記事の内容は動作や機能を100%保障するものではございません。悪しからずご了承下さいませ。※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

AFFINGER4の「AMP」について

amp

AFFINGER4はver20161106より「通常のモバイル検索結果」に表示されるAMPに向けて対応致しました。

DEMOAMPに対応したAFFINGER4のデモサイト

「AMP」はjavascriptが使用できないなど、利用に関して様々なルールがあります。その為、正しく使用して頂く為には利用する方にも意識して使用して頂く事項がいくつかございます。少し長いですが、使用を検討される方は必ず最後までお読みください。

まずはココをCHECK!

  • AMPには使用できるタグや出来ないタグがあり表示には制限があります
  • AMP対応は通常のモバイル検索結果のみの対応です。(NEWSなどが表示されるカルーセルタイプにはデフォルトでは対応しておりません)
  • WP内部のURLに関するデータの更新が必要となるため、テーマをアップデートした後は「パーマリンク設定」の保存で更新をしてください(しないと404になります)

AFFINGER4の「AMP」について

AMPの設定方法

2016-11-06_17h02_23

投稿ページ又はテーマ管理にて「AMP対応する」にチェックを入れるだけで該当の投稿ページがAMP対応になります。(※投稿ページのみです)

WP内部のURLに関するデータの更新が必要となるため、テーマをアップデートした後は「パーマリンク設定」の保存で更新をしてください(しないと404になります)

YouTubeの貼り付けに付いて

2016-11-06_201726

YouTubeページに①「埋め込みコード」で表示される②URLをそのままエディタに貼り付けて下さい。

SNSボタン

Facebookのシェアには「Facebook App ID」が必要です。

2016-11-07_09h14_41

https://developers.facebook.com/apps

AMP用サイドバーウィジェットについて

2016-11-06_203720

AMPのページではjavascriptが制限されている為、通常のアコーディオンメニューが表示されません。その代りにコンテンツの下部に表示される「AMPサイドバーウィジェット」を用意しましたのでここに「01_STINGERサイドメニューバー」を設定することをお勧めします。

Googleアドセンスとアナリティクスについて

2016-11-06_201756

Googleアドセンス

2016-11-06_20h22_21

アドセンスコード内にある「data-ad-client」の「ca-pub-」以降の数字と「data-ad-slot」をテーマ管理の②と③に記述するだけでamp-adに変換されます。(記事中に挿入したショートコードのアドセンスもamp-adに変換されます)

Googleアナリティクス

Googleアナリティクスは①にGoogleアナリティクスのプロパティIDの「UA-」以降の数字を記入して下さい。

参考AMP計測のために別のプロパティを新たに作成することが推奨されています

AMPの確認方法

AMPのページはURLに「/amp」を追加することで確認できます。

AMPが正常かどうか?

2016-11-06_194742

AMPが正常かどうかはGoogleの提供するAMPテストで確認が出来ます。

https://search.google.com/search-console/amp

Chromeを使用している場合は「AMP Validator」をインストールすれば簡単にチェックが出来ます。

2016-11-06_194027

エラーがないと緑になる(あると赤色になる)

AMPの注意事項

AMPページのルール

AMPでは使用できないタグや、変更する必要があるタグが多数存在します。当テーマのAMP用のページで表示できるのは制限がありますので御了承下さい。

表示できるもの

  • テキスト
  • 画像(widthとheightの記述が必要)
  • Youtube
  • アドセンス(amp-ad)
  • SNSボタン(FacebookはAppIDが必要)
  • 変換・削除対応対象: <img>, <iframe>, <video>, <audio>, AMP HTMLとして不正なタグ、属性の大半。
  • wp_head()はwp_footer記載されておりません
  • ほとんどのプラグインは無効化されています。(コードを整形して表示する「Crayon Syntax Highlighter」なども表示されなくなるので注意して下さい)
  • ショートコードもテーマデフォルトで使用できるもののみ有効化されています。

※AMPに対応したら必ずAMPページを確認して、内容を含めエラーが無いか確認して下さい。

アフィリエイトタグについて

バナーのアフィリエイトコードは使用できません。
テキストのタグもコンバージョンタグ(1pxの画像)など原則としてimgタグは「amp-img」に改変されます。利用は各自自己責任でお願い致します。

AMP関連の他の検索機能の非対応について

2016-11-06_195032

AMP対応は通常の検索結果への対応のみであり、検索結果の上部に表示されるカルーセルタイプには対応しておりません。こちらに対応するにはさらに細かくロゴのサイズや画像、schema.orgの設定など細かな規則に準ずる必要があります。詳細は以下のガイドラインをご確認下さい。

その為、サーチコンソール上ではAMPで上記に対応していない旨の構造化データに関するエラーが出ますので予めご承知下さい。

2016-11-06_092820

2016-11-06_092835

基本的には通常の検索結果に対するAMPの構造化データは不要なので(カルーセルタイプの検索結果に表示した位という場合以外は)エラーは特に無視しても良いと思います。以下の記事もご参考下さい。

参考AMPに構造化データはもはや不要、Search Consoleのエラーレポートからも外れる

※モバイル検索結果へのAMP対応は始まったばかりということもあり、対応したからといって必ず反映されるわけではありません。

ad

ad

情報配信中

NEWS

amp2 1

AMPがGoogleモバイルの通常検索結果にまで拡大したことを受けて通常の検索結果のAMPに対応した「AFFINGER4ver20161107」をUP致しました。 AMP(アクセラレイティッド・モバイ ...

affinlion 2

新しく有料配布とさせていただいた「AFFINGER4」。 今までのサイト作成を通して必要な機能や便利な仕組みを思いつく限り詰め込んだ万能テーマに仕上がっています。 micataやSTINGER PLU ...

2016-09-28_163821 3

AFFINGER4はSTINGERとmicataの両方を兼ね備えた、STINGER系の中でもっとも最新かつ最高位のテンプレートです。 試験的にAFFINGER4の管理画面の中をのぞいて頂ける管理画面用 ...

投稿日:

Copyright© アフィリエイトのAFFINGER , 2016 AllRights Reserved Powered by AFFINGER4.