Simplicityがバージョン2.3.1からamp対応となりました。
本ブログはSimplicityを利用しており、いずれはAMPがGoogleの検索順位に影響があるかもしれないということで、記事数が少ないうちにAMPを適用することにしました。
今回はAMP適用前と適用後で何を確認したかについてまとめました。
SEO対策にも繋がるampとは何か
まず、はじめにampとは何かについて調べました。一番簡潔で分かりやすい説明は、本家Googleのサイトでした。
Accelerated Mobile Pages は、読み込みを高速化しさらに快適なユーザー 体験を追求するため、さまざまな技術的手法を活用してコンテンツをほぼ瞬時に読み込めるようにした HTML ページです。
引用：AMP について
AMPは昨今、スマホでネットを見るユーザが増えてきていることを踏まえて、「モバイルページの高速化」をテーマとして進められているプロジェクトです。そのプロジェクトにはGoogleのほかにもTwitterやWordPressなどが参画しています。
サイト表示が遅いとユーザは離れていく
「サイト表示に3秒以上かかると、ユーザはそのサイトの閲覧を諦める（別のページに行ってしまう）」という調査結果が出ています。この調査結果からもGoogleがAMP対応に力を入れている理由がわかると思います。
サイト運営者からすると3秒は結構シビアな数字だと思います。高性能なサーバを使っているだけでは補いきれない数字かもしれません。
この調査結果からもAMP対応が必要なことは見えてきます。
参考：https://blog.kissmetrics.com/loading-time/
Simplicityでamp適用前に確認した４つのこと
Simplcityのバージョン
AMP対応の必要性がわかったところで、次はSimplicityのバージョンを確認しました。
Simplicityは2.3.1からAMP適用となっていますので、少なくともそれ以降のバージョンを適用する必要があります。
ただし、AMP対応ではまだまだ様々な不具合が出ています。そのため、適用する際は必ず最新バージョンのSimplicityを適用するのが良いと思います。
なお、Simplicityは不具合への対応が非常に早いです。（わいひらさんありがとうございます。）そのため、定期的にSimplicityの公式サイトをチェックして、不具合対応への状況を確認することをおすすめします。
Googleアナリティクスの設定
次に確認したことはGoogleアナリティクスの設定です。
Simplicityではカスタマイズの画面に、Googleアナリティクスのidを入れることでアクセス解析ができるようになっています。
Analyticsについては、Simplicityのテーマカスタマイザーで設定した値が利用されます。
引用：SimplicityのAMP機能の使い方。カスタマイズ方法など。
なお、Simplicityを使っているけど、Googleアナリティクスのコードをheaderなどに直接書き込んでいるという方は、「カスタマイズ」→「アクセス解析（Analyticsなど）」からGoogleアナリティクスのトラッキングIDを設定してください。
GoogleAdsenseの設定
続いて、GoogleAdsense(アドセンス)の設定です。
ウィジェットの「広告 300×250」を用いてGoogleAdsenseを設置している場合は、AMP用に新たに設定する必要はありません。
もし、別のウィジェットを使って広告表示を行っている場合はカスタマイズのAMPページに広告コードを設定する必要があります。
AMP専用のGoogleAdsenseの設定方法はこちらの公式ページをご覧ください。
ページのテスト方法
最後に確認したことは、AMPページのテスト方法です。
Simplicityでは、以下の画面のようにサイト管理者向けにAMPページの確認ができるようになっています。
また、AMPの確認方法はそれ以外にもGoogleChromeのアドオンを使って確認することもできます。私の場合はAMP適用前にChromeのアドオンにこのAMP Validate Checkerを導入しました。
Simplicityでamp適用後に確認した４つのこと
エラーが出ていないか
これは当然ですが、AMPに関するエラーが出ていないかについて全ページを対象に確認いたしました。
AMPエラーの確認方法は先述の通りChromeのAMP Validatorを使いました。AMP Validatorの使い方は非常に簡単で、ブラウザの右上のボタンを押下するだけです。
エラーがある場合はAMPのマークが赤色となり、正常（エラーなし）の場合はマークが緑色になります。
なお、AMP Validatorの詳しい使い方は以下のサイトが参考になると思います。
デザインが崩れていないか
仮にエラーが出ていないとしても、デザインが大きく崩れていた場合は対処が必要です。
私の場合はデザインが崩れていたわけではないですが、質素な感じになっていました。そのため、amp.cssを追加してAMPページのカスタマイズを行いました。
amp.cssの格納場所
AMPのカスタマイズは、テーマのフォルダの直下にamp.cssを格納し、amp.cssを修正します。
amp.cssは何もカスタマイズしていない状態だと、ただの空ファイルです。ファイルの冒頭にimport処理などを入れる必要もありません。
amp.cssでh2タグなどの見出しも修正可能
AMPは高速表示が可能な反面、デザインが質素になります。そのため、私はパソコンで表示される見出しと同じ見出しをAMPにも表示させることにしました。
修正方法は非常に簡単で、simplicityの子テーマ（親テーマ）のstyle.cssの見出しタグに関する記載をamp.cssにコピーするだけです。
amp.cssの仕組みに関してはこちらの本家サイトが参考になると思います。
画面のアクセス数が計測できているか
Googleアナリティクスの設定ができているかを事前確認していたので、問題なくアクセス出来ているだろうと思っていました。
しかし、AMPがGoogleに反映された頃から「アクセス数が激減！？」と思いましたが、よくよく見てみるとAMPページがGgooleアナリティクスの計測ページに含まれていませんでした。
「これはAMPのアクセス数が計測できていないのは？」と思い、色々調べていたところ、リファラ対策でのフィルタリングが原因でした。
リファラ対策として「言語設定 not set」は除外していたため、AMPぺージの計測が出来ていなかったようです。
画面で広告が表示されているか
最後に確認したことは、Google Adsenseの広告がうまく表示されているかです。私の場合、特に問題なく、広告が表示されました。
ただ、若干広告表示が遅いです。他の画像の読み込みはかなり早い中で若干広告表示だけが遅く感じました。
そのため、一瞬「あれ？広告が表示されていない？」と思いましたが、約1〜2秒ほど待つと広告は無事表示されました。
私のようにせっかちな方は、「少し待つ余裕」をもって確認してください。笑
コメント