いよいよ導入されるAMP(Accelerated Mobile Pages)の基礎知識から対応方法まで!まとめ
「Accelerated Mobile Pages」と呼ばれるGoogleが推し進めてきたプロジェクトですが、2月24日にGoogleの検索結果にも導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。
まずは導入後のイメージを御覧ください。(英語ですが公式サイトのイメージよりもわかりやすいです)
このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。
自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。
http://g.co/ampdemo(※スマホからアクセスしてください)
Googleが過去に発表してきた、モバイル対応ラベルの表示や、著者表示など、今回のAMPでもSEO面などでどのような影響が出るのか、ウェブマスターにとって気になる情報だと思います。そこで今回はAMPが導入されても慌てないため、情報をまとめてみました。
AMP関連の主要ニュースまとめ
Googleが猛プッシュするAMPは来年初めに公開予定、モバイル検索のランキング要因になる可能性は?
Googleが猛プッシュするAMPは来年初めに公開予定、モバイル検索のランキング要因になる可能性は?
2015年12月9日に米サンフランシスコで開かれた記者会見では、検索結果で「Fast」というラベルが付きそうなことと、検索順位の要因になるかもしれないということがコメントされたそうです。
Google検索のランキングにAMPが与える影響
AMP最新情報 ―― Google検索のランキングにAMPが与える影響、WordPressがAMPプラグインを開発中
2015年12月16日のGoogleのリチャード氏へのインタビューによると、「AMP対応したからといって順位が上がるわけではないが、AMP対応したことによる結果としてユーザーの満足度が向上し、検索順位に影響を与えることはあるだろう」というようなことをコメントしたそうです。
つまり、どの程度の影響があるのかは今のところ不明ですが、SEOへの影響があることは間違い無さそうです。
AMPの対応方法まとめ
そもそもAMPとは
AMP JS以外のJavaScriptを認めないなど、AMPがどのような仕組みで高速表示を可能にしているのかまとめられています。
Googleの導入ガイド日本語版(PDF)
Accelerated Mobile Pages プロジェクトについて — 導入ガイド日本語版を本日公開しました
Googleが日本語で導入ガイドを公開しています。PDF形式にまとめられています。導入ガイドではAMPがどのようなものか、実際に導入しているサイトの例や、どのような対応をする必要があるのか、などざっくり記載されています。
AMPページのGoogle検索ガイドライン(SearchConsoleヘルプ)
SearchConsoleヘルプに公開されている、最適化ガイドです。こちらも本当にざっくり説明されている感じです。詳細な説明については記事からのリンク先が英語になっていることが多いので、英語が苦手な方には厳しいかもしれません。
AMPの対応方法(基礎知識)
具体的にHTMLをどのように記載したら良いのかわかりやすくまとめられています。禁止されているタグの一覧なども載っていますので、初心者の方はまずはこちらを見ることで、対応方法の基礎を学べると思います。
AMP設定ができているかチェックする方法
AMP対応のエラーチェックは、GoogleChromeのデベロッパーツールを利用することで簡単に確認することができます。デベロッパーツールでエラーが出ないことを確認できたら、「構造化データテストツール」を利用し、さらにチェックをしましょう。
Google Search Console からもAMP対応チェックが出来る
Google Search Console に AMP の項目が追加される
エラーはGoogle Search Consoleからも発見することができます。ただし、エラー発見後に修正をしても、サーチコンソール上では4日などのタイムラグの後、反映されるようです。
AMP対応したページだけをGoogleに公開しても問題なし
AMP対応したページだけをGoogleに公開しても問題なし、別URL構成のモバイルサイトではPC向けページにrel=amphtmlを設置
AMP対応する元のページが無くとも、AMPページを公開しても良いそうです。つまり全ページがAMPだけのサイトが存在してもGoogleは正しく検索へ反映してくれるということですね。ただし、AMP対応することでデザイン性によるユーザーの満足度を下げてしまうこともありますし、PCで閲覧した際に見やすいとは限りませんので、AMPだけのサイトを公開するという状況というのは少なそうですね。
WordPressプラグインで簡単にAMP対応をする方法
WordPressを利用している方向けのエントリー。WordPressではプラグインを利用することで簡単にAMP対応ができますが、ほとんどの場合デベロッパーツールで確認するとエラーが頻発すると思います。AMP対応は非常に厳しい対応を求められますので、プラグインを有効にするだけで安心するのは危険です。
WordPressプラグイン無しでAMP対応にする手順
【WordPress】プラグイン無しでAMP(Accelerated Mobile Pages)に対応にする手順
プラグインではエラーばかり…それならいっそ自分で対応しよう、という方にピッタリのエントリー。phpの書き方、HTMLの記述、CSSの対応方法など、とても細かく解説されています。現時点でしっかりAMP対応させるには、こちらの方法のほうが現実的かもしれません。
MovableTypeでのAMP対応
MovableTypeを利用している方でAMP対応したい方向け。簡単にではありますが、どのようなタグを使ってAMP対応をしたら良いのかのヒントになるでしょう。
AMP対応で注意したい点
AMP (Accelerated Mobile Pages) HTML を出力するようにしてみたけど面倒くさかった話
画像にwidthやheightの指定をしていなかったことで対応できなかったことや、iframeは禁止されているので、amp-iframeへ変換する話など、対応する上で注意したい点がまとめられています。MovableTypeで説明されていますので、WordPressの方は同様のカスタマイズをするために工夫が必要そうです。また、AdSenseのことにも触れられています。
まとめ
2月24日という正確な日付が発表されたことにより、いよいよ盛り上がりそうなAMP界隈です。SEOに関しては間違った情報に振り回されず、サイトを閲覧してくれるユーザーのことだけを考えて適切な対応をしていきたいところです。
実装については、かなりの難易度が求められそうですので、ウェブマスターの方にとっては少し嫌なニュースになったのかもしれません。