サイトアイコン すけログ

WordPressのAMP設定メモ

suke

AMPを当ブログに設置した際の覚え書きです。モバイル向けページの表示が速くなるとのことでやっておくことにしました。

環境

以下の環境にAMPを導入しました。プラグイン類は新たに必要になりインストールしたものです。また、今まで使用していた”All in One SEO”と機能が重なるのでこの機会により高機能という触れ込みの”Yoast SEO”に移行しています。

 

AMP導入手順

以下の記事で紹介されている手順を参考にさせて頂きました。当記事の内容はほぼそのままなのですが、一点、AdSenseのコードが公式サイトで変更になっていたので注意です。

AMPに対応する

WordPressはプラグイン”AMP”を導入するだけです。ただし、この段階ではGoogle AnalysticとAdSenseが使えません。

  1. プラグイン”AMP”をインストールし有効にする
  2. 動作確認をする
    （適当な記事のURL末尾に”/amp”をつけてアクセスし表示されること）
URL末尾に/ampとつけると対応ページが表示されます。

Google Analysticに対応する

"Yoast SEO"のアドオンである”Glue for Yoast SEO & AMP”を使うのが簡単です。以下の手順でプラグインを有効にしてGoogle Analysticsのコードを貼り付けてください。

  1. プラグイン”Yoast SEO”とアドオンである”Glue for Yoast SEO & AMP”をインストールし有効にする
  2. 管理画面の左メニューからSEO>AMPを選択して、タブから”Analystic”を選択する
  3. “Analytics code:”に以下の内容を貼り付け保存する（”UA-12345678-9”は各自のGoogleAnalysicsのものに修正）

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-12345678-9"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Analytics code欄にコードを貼り付ける。

Google AdSenseに対応する

AdSenseを使っていない方は不要です。
ここではAMPに対応した無料プラグインである”Quick Adsense Setting”を使用してAdSense広告をAMPで表示させます。

  1. プラグイン”Quick Adsense Setting”をインストールして有効にする
  2. AdSenseのコードを貼り付けて保存する

AdSenseのコードは通常のPC/スマホサイト向けのコード部分と、AMP向けコードとを入力します。AMP向けのAdsenseコードについては以下のサイトが参考になります。

以下にコード例を示します。コード中のdata-ad-clientとdata-ad-slotの値は各自のAdsenseのものに書き換えてください。この内容は2018年11月現在のものです。変わっている可能性もあるのでうまく動作しない場合は上記サイトを参照してください。


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<amp-ad width="100vw" height=320
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxx"
data-auto-format="rspv"
data-full-width>
<div overflow></div>
</amp-ad>
AdSenseコードを貼り付ける。AMPでは専用のコードが必要になります。

Quick Adsense Settingの詳細な設定方法は以下の記事が参考になると思います。

AMPが上手く設定出来ているか確認する

最後に導入したAMPが正常動作しているかを確認します。以下のサイトにアクセスしてAMPページのURL（末尾に/amp）を入力してください。”有効なAMPページです”と表示されればOKです。

こんなふうに表示されていればOKです。

まずい箇所があるとこんな感じでエラーになります。このページの場合はtableタグに問題があって修正したらパスしました。

参考

この記事は以下の内容を参考にさせて頂きました。

More from my site

モバイルバージョンを終了