皆さんのブログはAMPに対応していますか？
僕が使っている「はてなブログ」でも2016年6月よりベータ版として対応されましたが、広告(AdSense)が表示出来ない、CSS、JAVASCRIPTが使えないなど、様々な制約があったので対応せずに今日まで過ごしていました。
しか～し！
コトリさんの記事を読んで、僕のブログもAMPに対応しようと決断しました！
Googleの検索結果でもAMP対応のページを紹介する専用の検索結果枠（カルーセル）なんかも出来ていて、現状では検索順位には影響がないとは言われていますが、やはり見過ごせませんよねｗ
そして、先日Googleがスマートフォンからの検索数上昇に伴い、検索結果の優先順位を「スマートフォンページ ＞ パソコンページ」と今までの優先順位から逆転する「モバイルファーストインデックス」を導入していく事も発表されました。
AMPに対応しているかどうかの記載は特にありませんでしたが、今後はそちらも関連してくるだろうと個人的には思います。
今まではAMPに対応せずに、出来る限りページの表示速度を上げようと足掻いては来ましたが、これ以上は難しいところまで来てしまったのでAMPに対応することにしました。
そこで、はてなブログでAMPに対応する上で必要な設定や広告、デザインの注意事項をまとめて紹介したいと思います。
はてなブログのAMP対応
AMP対応について、レンタルブログサービスならでは制約もあるので、それらを中心に紹介していきます。
設定編
はてなブログでAMP対応するのはすごく簡単です！
有料プランの「はてなブログPro」を利用している方が対象ですが、「設定→詳細設定」にある「Accelerated Mobile Pages (AMP) を配信する」にチェックを入れて変更するボタンを押したら完了です。
注意事項
はてなブログでAMPに対応させる場合、注意事項がたくさんあるのでまずはそちらから紹介します。
- はてなブログのデザインテーマは反映されない
- サイドバーモジュールや、HTMLの自由記述（記事上下、ヘッタ、フッタなど）が配信されない
style属性（CSS）が反映されない- 記事中のJavaScriptが反映されない
- はてなスターが反映されない
- はてなカウンターは非対応（カウントされない）
ざっくり説明すると、設定しているテーマやCSS、JAVASCRIPTは反映せず、広告も掲載出来ないのですごくシンプルなページとなります。
その結果、無駄な部分が抑えられ劇的に表示スピードが上がるというものですね！
（正確にはキャッシュや最適化された軽量HTMLを使っているからです。）
詳しくは、はてなブログ ヘルプをご覧ください。
見た目比較（AMP対応：非対応）
ちょっと見にくくて申し訳ありませんが、はてなブログでよく使うツールなどを使用したページでAMP対応と非対応（通常）ページで比較してみました。
見てもらうとわかるように、AMP対応では、テーマやCSSが反映されていないので、デザインがかなりあっさりしています。
ちょっとページの尺的に紹介はしていませんがtwitterやYou TubeはAMPに対応しているので特にデザインに変化はありませんでした。
実際のページを確認
実際の表示を確認する場合は、記事ページのURLの末尾に「?amp=1」を追加してアクセスすると確認出来ます。
※「Accelerated Mobile Pages (AMP) を配信する」にチェックを入れている場合です。
例）
◆通常ページ
www.aritai.net/entry/my-life
◆AMP対応ページ
www.aritai.net/entry/my-life?amp=1
※現在は対応していません。
スマートフォンからアクセスしてもらうと分かりやすいと思いますが、表示速度が全然違います！
デザインは残念ですが、この速度はやはり魅力的ですね！
ちなみにAMP対応ページを「PageSpeed Tools」と「GTmetrix」でも測定してみました！
結果は、
◆PageSpeed Tools：100点満点の91点！
◆GTmetrix：スコアがAの読み込み速度2秒、リクエスト数10件でした。
この数値は本当に凄いです！
AMPに対応する前に測定した時と比べると雲泥の差ですｗ
CSSについて（4/3更新）
基本としてAMP対応ページではCSSは外部ファイルがNGでファイルの容量も50KBを超えるとエラーとなります。
なので、設定しているテーマも反映されないのだと思います。
こればかりは、はてなさんが何とかしてくれない限りは現状では難しいでしょうね…。
今まで上記のようにCSSが反映されずに薄っぺらいページでしたが2017年3月30日にAMPページにCSSを適用出来るようになりました。
これによってデザインが大幅に改善されました。
広告（AdSense編）
デザインがダメならなんとか広告だけでも対応したい所です。
広告については、アドネットワークサービスでもAMP対応が進んできています。
ブロガーさんがよく使うサービスの中では「i-mobile」や「nend」も対応しています。
そして「AdSense」ももちろん対応しています。
ただAdSenseをAMPページでも表示させるにはAMP対応の広告コード（<amp-ad></amp-ad>）に変更する必要があります。
はてなブログのAMPページでもAdSenseを掲載出来ないかと試してみましたが、皆さんが言っているように現状では出来ないようです…。
広告についても、デザイン同様に運営側で対応してもらうのを待つしか無いと思います。
でしたが、どうやらAMPページにAdSenseを掲載する方法はあるようです。
方法はデザイン設定からではなく、記事ページに直接コードを書くようです。
はてな側で対応するまでは、諦めていましたがこれはありがたいですね！
アクセス解析を見てみても、アクセス数の多いページではAMPページも結構見られているようなので助かります。
ただ、一方で、ぽけっとしすてむ (id:psne)さんが説明されていますが、この方法は今後使えなくなる可能性もあるようです。
やはり、はてなさんがしっかりと対応してくれないといろいろと問題はありそうですね…。
アクセス解析（Analytics編）
注意事項でも書きましたが、はてなブログの「はてなカウンター」はAMPに対応していないので、AMPページが表示されてもカウントされません。
しかし、「設定→詳細設定」の「Google Analytics埋め込み」でAnalyticsの「プロパティID」をしっかりと設定していればGoogleアナリティクスではカウントされるので、AMPに対応する場合はしっかり設定をしておきましょう！
メリット・デメリット
はてなブログにおいてAMPに対応するメリットは、ずばり「検索流入の増加」が見込める点でしょうね！
先程も説明したように、GoogleでもAMPページを紹介する専用枠があるので、検索結果に直接の影響がなくても、そこからの流入が増えることが期待できます！
そして、ページの表示速度が劇的にアップするので、閲覧者に対してもページの表示速度の遅れからくる不快感（ストレス）を減らすことが出来ると思います。
逆にデメリットは、現状では非常に多いですね^^;
- テーマが反映しない
CSSが使えない※対応済み- スクリプトが使えない
広告が表示できない※一部対応
など、他にもいろいろとあると思います。
今後、はてなブログのAMP対応が更に進めば状況は変わると思いますが、現状では、AMPに対応してアクセスアップに期待するか、現状を維持しデザイン・収益をとるかというところでしょうね！
僕も、このタイミングでAMP対応したのは、一種のギャンブルですねｗ
まとめ
2017年4月現在のはてなブログのAMP対応についてまとめると、こんな感じです！
- 検索流入が増える可能性があります。
- 表示速度が凄いです！
デザインは諦めて下さいCSSが使えるようになりました。- ソーシャルボタンも無理です
- はてなスターも使えません
- アクセス数はAnalyticsで！
広告が掲載出来ないので収入が減る可能性があります。
AMPへの対応は、はてなさんも発展途上という感じですが、ブログのアクセスは検索流入からが大半だと思います。
その中でもスマートフォンからのアクセスはこれから更に増える可能性もあります。
「モバイルファーストインデックス」もそうですが、確実にスマートフォンの検索結果は速度重視へと変わってきていると思います。
もちろん大前提として、記事の内容が一番重要ですが、AMPへの対応も考えていったほうが良いかもしれませんね！
SEOに強い！と言われている、はてなブログも5周年を迎え、早い段階でベータ版ではありますがAMPへの対応もしてくれたので、今後の期待も込めて僕はAMPへの対応を決めました！
正解かどうかはわかりませんが、マイナスでなければ現状は良しとしますｗ
皆さんも導入するかどうかは別にしてAMPページの表示速度の速さを一度体験してみて下さい！
