AMP作成方法とアドセンスの設定方法2018年最新版！
AMPがいいらしい、というのを聞いていてもなかなか導入できなかったり、そもそもAMPってなんなの？という人も多いと思います。今回はグーグルとTwitterが推奨しているAMPの解説とその導入方法、それから現在アドセンスを利用している人のためにAMPページにアドセンスを掲載する手順と方法を解説します。
そもそもAMPって何のこと？
AMPというのはAccelerated Mobile Pagesの略で、ざっくりいうとモバイルページを高速に表示するためにグーグルとツイッターが設けた新しい仕様の事です。これを用いれば驚くほど高速にモバイルページが表示されます。
AMPが早く表示される理由
まずひとつめが毎回ページを読み込む必要がないことがあげられます。”キャッシュ”という言葉があります。これはページをはじめて表示させた時にブラウザが画像データなどを保存しておいて、次回開いた時にはページを読み込まなくてもいいので、早く表示する事が可能なことをいいます。
普段から各ブラウザが行っていて、定期的に容量がいっぱいになったら古いものから削除されていきます。AMPの場合は推奨しているグーグルとツイッターがキャッシュを行っているので、高速で表示が可能になるんです。もう一つの理由としては、AMPはサイトを高速に表示するための独自のルールを採用しています。
通常のページで仕様しているタグや機能などを制限していて、フォントをはじめとしてレイアウトに大きな違いが出てくるというデメリットと引き換えに、高速化を実現しているんです。
AMPを導入する簡単な方法は2つ
AMPページを作成してサイトに導入する方法は2つあります。ただし、単純にAMPのページを作成するのであれば、どちらもさほど違いはありません。数クリックで設定が完了します。
プラグインを使ってAMPページを作成する
ワードプレスを使っているのであれば、プラグインを導入するだけでOKです。記事を作成するたびにAMPページが自動で作成されます。僕も最初はこちらのプラグインを導入して作成していました。”AMP”というプラグインを検索してインストール、有効化して設定すれば終了です。
AMPプラグインの設定方法については多数のサイトで解説していますのでここでは割愛します。
AMP対応のテーマを利用する
このテーマ（LION MEDIA）をはじめAMP対応のテーマは数多くあります。AMP対応のテーマを使えば簡単な設定をするだけでAMPページが自動で作成されます。エラーやカスタマイズの事を考えればCSS等による変更だけなので、僕はこちらの方が簡単でした。
そもそもプラグインでAMPページを作っていた時はアドセンスもやっていませんでしたし、試しにやってみようというだけで実際に本格的に運用していませんでした。
テーマがAMP対応の場合は導入が簡単
デザインや機能性はもちろん、快適にサクサク表示させる事もユーザービリティ向上のために必要です。ですから最近のテーマは必要な機能は残しつつも、javascriptを極力シンプルな構成にして読み込み速度を早くしたり、AMP対応などもテーマ側でやっています。
作成されたAMPページのアドレスこそ違っても、後々カスタマイズしやすいのは対応するテーマの方が簡単ではないでしょうか。対応テーマはLION MEDIAの他にSimplicity2などがあります。
LION MEDIAを例にとりますけど、ダッシュボードの「外観」⇒「カスタマイズ」⇒「AMP設定」で「有効」を選択して公開をクリックすれば、AMPページが作成されていきます。ページのURLの末尾に?amp=1とつければ表示されます。
正しくAMPページとして作成されていれば、AMPチェックページにて”有効なAMPページです”とグリーンで表示されます。赤文字でエラーメッセージが表示されているのであれば、そのエラーを個別に修正していけば問題ありません。僕の場合はエラーはでましたが、全部アドセンス関連でしたので対応は可能でした。
導入後のアドセンスの設置方法
僕は少し前からアドセンス以外の広告を外しています。本文中のアマゾンや楽天のリンクは別にして、それ以外はアドセンスしか表示させていません。そのアドセンス広告も規約違反等のことを考えて自動広告に変えたばかりでした。自動広告の場合はアドセンスのコードはテーマのheader.phpの</head>の直上に
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-********************",
enable_page_level_ads: true
});
</script>
と記載します。これで問題なく表示されていました。AMP対応の自動広告はheadタグ内にひとつ、bodyタグ内に別の種類のコードを記載する必要があります。最初は通常のアドセンスコードの上にAMPのheadタグ内に記載用のコード
<script async custom-element="amp-auto-ads"
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
を記載して、bodyタグ内はどこに記載すればいいのかわからなかったので、管理画面のウィジェットにてカスタムHTMLで記載していました。
そうするとAMPページにAMP用のアドセンス広告は表示されるものの、通常のアドセンス広告も表示され、AMPページではエラー連発でサーチコンソールからもエラー報告が100件近くありました。
中でも一番多い致命的なエラーが”カスタム JavaScript は使用できません。”というものでした。これの詳細を見てみると、通常のアドセンス広告の
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
この部分にあたります。そこで削除しました。結果は予想していましたが、通常・AMPともに広告が表示されなくなり、元に戻しました。何をどうすればいいのか頭を悩ましながらheader.phpのコードを眺めていたら、
<?php fit_amp_head(); ?>
と
<?php wp_head(); ?>
というのが目に付きました。これはおそらく通常ページとAMPページの分岐なのでは？と思いました。”AMP分岐終了”の項目もあります。そこで
<?php fit_amp_head(); ?>
の下にはAMPのコードを記載して、
<?php wp_head(); ?>
の下には</head>直上に記載していた通常のアドセンスコードを移動させました。これでチェックをしてみました。結果はエラーです。同じようにAMPページにも通常ページのアドセンスが表示されています。また、考えました。今度はウィジェットで記載しているbodyタグ内に書くAMPのコードです。
こちらもheader.phpを見てみると</head>タグの直下に
<body<?php fit_body_class(); ?>>
という記載を見つけました。もうここに書こう！と考えてウィジェットを削除して
<amp-auto-ads type="adsense"
data-ad-client="ca-pub-****************">
</amp-auto-ads>
を記載して更新を押しました。するとやっと成功です！AMPページでは通常ページをは違うレイアウトで広告がしっかり表示されていましたし、通常ページは変わらず表示しています。AMPチェックページでもエラーがなくなり”有効なAMPページです”と表示されました。その後は現在までエラーは発生しておりません。
やはり原因はコードの記載場所でした。ちなみにAMPの自動広告は表示されるまでに20分前後はかかるので、しばらく待つ必要があります。
AMPサイトにアドセンスを設定する方法・まとめ
いかがでしたか？試行錯誤しながら成功したAMPページへのアドセンスの設置方法を紹介してきました。分岐のコードが記載されているものであれば応用ができると思いますので、チャレンジしてみてください。
追伸
記事を書く際のレイアウトのためのプラグインであったり、CSSの定義やタグなどでエラーが出る場合がありますので、記事を書いた・更新した場合は個別にチェックしていたほうがいいようです。
ビジネスに活用できる情報収集のために英語猛勉中です＾＾英語とPCとネット関連で、日々やっている事や気になった事、忘備録のような感じで投稿していきます。