グーグルが推奨しているモバイル対応の高速表ページAMP。
以前の記事でワードプレスのAMP化、そして前回はAMPのページにアナリティクスを設定する方法でした。
今回はAMPのページにアドセンスを導入する方法です。
ワードプレス、プラグインAMPを使用しています。
AMP化することにより表示速度があがる
AMPとはなんでしょうか？
AMPとはAccelerated Mobile Pagesの頭文字を取ったもので、グーグルが推奨しているモバイル用の高速表示のページのことです。
Acceleratはいわゆるアクセルです。
グーグルが推奨しているだけにグーグルの検索結果にはAMP対応しているページが分かるようになっています。
モバイル機器でグーグル検索した場合、検索結果の左に「稲妻」のマークが表示されているのがAMP対応のページです。
AMP対応のページはクリックしてみると分かりますが、表示が早くなっています。
ただこのAMPのページ、表示速度は速いのですが、使えるタグや記述に制限がありページ構造が簡易なものになります。
表示速度は速いけれど、ページのレイアウトが崩れるなどの理由で賛美両論があります。
ワードプレスでAMP化をする時はそれらの意見も考慮したほうがよいでしょう。
ワードプレスのAMP対応は簡単
ワードプレスを利用してサイトを作っている場合、AMP対応にするのは非常に簡単です。
プラグインの「AMP」をインストールして有効化するだけです。
詳しくは以前の記事を参考にしてください。
インターネットの世界は日々変化しています。 近年はグーグル検索で見慣れない稲妻のマークの様なものを見かけることがあります。 これは一体なんだろうと思い調べたところ「AMP」と呼ばれる、モバイル機器のためのページということが分かり[…]
AMP対応にして気を付けなければならないのは
・AMPのページ用のアナリティクスを導入する必要がある
・AMPのページ用にアドセンスを設定する必要がある
AMPページへのアナリティクスの導入方法は前回に記事を参考にしてください。
AMPページにアドセンスを表示させる
モバイル機器でのグーグルの検索結果はAMP対応のページが表示されるようになっています。
サイトにアドセンスを導入している人はAMP用にアドセンス設定をする必要があります。
グーグルが推奨するAMPなのでアドセンスにもAMP対応のものがあります。
アドセンスのページの「広告」をクリックすると下のような画面になります。画面の右下にAMP広告の「オンーオフ」のボタンがあるのでここをクリックします。
すると「AMP サイト用 AdSense コード」のページになります。このページにAMPページ用の用のコードが表示されますので、このコードをコピーします。
このアドセンスのページは開いたまま、次にワードプレスのダッシュボードに移動します。
「プラグイン」→「プラグインエディター」を選択します。プラグインの編集はリスクがあります、自己責任でお願いします。
ページが表示されたら「編集するプラグイン」の項から「AMP」を選択。
さらに「templates▼」→「html-start.php」へ
コードが書かれたページが表示されますので＜/head>タグの直前に先ほどのアドセンスのコードをペーストします。
そして再びアドセンスのページに行きます。プラグインエディタのページはそのままにしておきます。
先ほどのコードの下に「ステップ2」という表示がるので、今度はこのコードをコピーします。
プラグインエディタのページに戻り、このコピーしたコードを＜body>直後にペーストします。
下の画面の例では赤い枠の行の次の行にペーストします。
コードをペーストしたら画面左に下にある「ファイルを更新」をクリックして保存します。
これでAMPページ用のアドセンスの設定は完了です。
ワードプレスのダッシュボードから「外観」→「AMP」でAMPのプレビューが見られます。
ここに広告が表示されていれば成功です。
広告がAMPプレビューに表示されるまで時間がかかる場合があります。
グーグル検索結果のAMPページに反映されるにはさらに時間がかかります。
今回は以上です。
＜関連リンク＞
簡単！ワードプレスAMP化したページにgoogleアナリティクスを導入する
簡単！ザ・トールのワードプレスAMP化 ワードプレス5.5.1
お勧めのワードプレステーマ ザ・トール THE THOR