WordPress を公式プラグインでAMP対応にしてみた
公式プラグイン名はその名も AMP。
公式プラグインだけあって、AMP化は概ね問題ないはず。
AMP化後24時間以内に、Googleから New AMP issues detected for site https://xxxx.net/ のようなタイトルで、AMPページの問題点が送られてくることがある。
まず広告を掲載する前に、このエラーを解決していく必要がある。
AMPページの問題を一つずつ解決していく
問題があると言われたページを下記のURLで張り付けてテストをすると。
https://search.google.com/test/amp
色々なエラーを教えてくれる。
WordPressで代表的なエラー（簡単に直せるもの）を2個程紹介。
Error in required structured data element
これは、ファビコンが無い場合に出るエラー。
エラー詳細を確認すると、logo 部分に、A value for the logo field is required と言われている。
管理画面→外観→カスタマイズ→サイト基本情報→サイトアイコンに適当な正方形の画像をアップロードすることで解決できる。
Image size smaller than recommended size
これは、AMPページ内に使っている画像ファイルの大きさ（容量ではなくサイズ）が小さい時にでるエラー。
該当ページの小さい画像を大きいものに差し替える必要がある。
Google的推奨サイズは横幅1200px以上でなかなかのハードルの高さ。
なお、画像の両サイドに白い部分を塗り足す等の対応でもOKだとGoogle公式ページで紹介されている。
AMP用 Googleアドセンスの追加
まずAMP用のGoogle Adsenseには大きく2種類ある。
自動広告と、従来のテキスト広告だ。
自動広告は、コードを、WordpressのAMP用テンプレートのヘッダーとフッターに記述しておくと、自動的に文中に広告を入れていってくれる。
自動広告貼り付け手順は Google Adsense の広告コード取得の画面で丁寧に説明してくれているので割愛。
WordPressのfunctions.phpを編集して、テンプレートのヘッダーとフッターにコードを入力させるのを忘れずに。
テキスト広告は、従来のアドセンスと同じように、自分で1つずつ、表示する場所にコードを貼り付けていく。
AMPのテンプレートファイルを編集する必要があるので、AMPテンプレートを子テーマ化しておかなければならない。
子テーマフォルダ(wp-content/themes/…)の中に amp フォルダを作ってその中に amp 用テンプレートを入れる。
記事部分に広告を挿入するなら
(wp-content/themes/子テーマフォルダ名/amp/single.php) のような形にする。
single.php の広告を表示したい場所に、Googleアドセンスで取得した、広告コードをコピペして完成。
広告を貼り付けたらまたエラーが来た場合
広告を入れてから表示されるまでに30分ぐらいと言われるが、実際には数時間必要な場合もある。
広告を入れた後にエラーが出る場合は、いつまでたっても表示されない（24時間以内にGoogleからAMPの問題点のメールが来る）。
The tag ‘amp-ad extension .js script’ is missing or incorrect, but required by ‘amp-ad’. This will soon be an error.
amp-ad 拡張タグのJSスクリプトが存在しないか正しくありませんが、amp-ad には必要です。これはまもなくエラーになるでしょう。
というエラーが出た場合。
これは広告タグを貼り付けているのに、必要なjsファイルをヘッダーに追加できていない場合に表示される。
この場合は、前述のfunctions.phpを編集するのと同じ要領で、
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
このコードをAMPテンプレートのヘッダーに挿入することで修正可能。
