ウェブサイトをAMPに対応させてみた

AMP(Accelerated Mobile Pages)はウェブサイトのモバイル表示が速くなる、と前々から聞いていたのですが、試してみよう。ということでいくつかのウェブサイトに導入してみました。

こちらのブログでは「simplicity」を利用しているので簡単にできたのですが、別のサイトではWordpressプラグインのAMPを利用してみたので、メモしておきます。



AMP(Accelerated Mobile Pages)を導入してみて

メリット

  • モバイル表示が速くなる
  • サイトによっては意外と導入が簡単
  • SEO効果も期待できるのかな?

とりあえずよかったこと、AMPでしっかり対応できたページはモバイル表示の速度が爆速になりました。またこちらのブログではsimplicityを導入しており新しいテーマがAMPに対応していたので簡単でしたし、他のサイトもWordrpessプラグインのAMPを導入したら思いの外簡単でした。

デメリット

  • 表示が微妙
  • 広告表示
  • SNS表示など

simplicityの場合は良かったのですが、高速化のために通常サイトに適用されていたCSSはAMPのモバイルページで除外されており、新たにCSSを書き込まないといけないのが少し面倒。CSSの追加はまだしてないのですが、少しデザインを整えるくらいのことはした方が良いかもしれない。

またAMPプラグインを利用した場合はウィジェット・広告・SNSボタンもAMPページで全部表示されなくなったので、プラグイン > プラグイン編集 > amp/templates/single.phpから直接HTMLを記述した。

参考になりそうな記事

ちなみにSimplicityの対応バージョンを利用している場合は、AMPベータを使うとシェアボタンが表示されるようになっていたので特に何もしていません。

試しにAMPのモバイルページを確認

Google Search Console AMP Testというものがあるので、しっかりAMP化できているかもかくにんしてみました。今回確認したのはDENON AH-MM400を使ってみた時の記事です。

  • 通常ページ http://one-hack.com/denon-ah-mm400-review/
  • AMPページ http://one-hack.com/denon-ah-mm400-review/?amp=1

結果は以下の通り。simplicityだとエラーでない。Youtube動画をビジュアルエディタからURLのみで貼り付けたページはエラーが出ているみたいだけど、AMP Projectの公式ページにあるYoutubeの貼り方をしていれば多分エラーが出ないはず。iframeでエラー出てくるのかな?よくわからない(多すぎで試してません)

2016-12-20-11-25-41

では今回確認したページをPreview Search Resultを押して実際の表示を確認してみると

2016-12-20-11-29-32

こんな感じで⚡️AMPでトップページにも表示される可能性があるということです。

今回はプレビューなので実際にはニュース性の高い記事とかのみトップページに表示されるのかな、なんて勝手に思っているのですが、中の人が運営している弱小ブログなんかでもGoogleのトップに表示されればSEO的にもバコンと伸びる可能性はあるのかな、なんて思ってます。

また実際のモバイル表示だとこんな感じで表示されていました。

screenshot_20161220-113241

AMPのニュースページではない(ニュース性がない話題だから?)ので検索ページのスニペットの部分にAMPの文字が。で、実際の表示を比べてみると

デザインなんかはCSSで調整する必要がありそう。また広告表示をしているサイトはその辺りもしっかり対応させないといけないかもしれませんね。

SEO効果としては、どうなんだろう。ちょっと疑問なのが「Google Newsに登録しているサイトのみがトップページに掲載されるのか?」という部分。GoogleNewsの流入というのは他のサイトを見ているとやっぱりすごいなと感じるのですが、これに登録していないサイトはトップに来ないということだとあんまりSEO効果はないのかも、と、感じました。

高速化によっていくつか制限は出てくるわけですし、広告でマネタイズをしているサイトは少し慎重に考えるべきなのかもしれないですね。