昨今Googleが対応するぞ、SEOに影響があるぞ、ないぞと話題のアクセラレーテッド・モバイル・ページ、AMP。今回試しにブログで対応してみたので、そのポイントをご紹介。
歴史は繰り返す
長くインターネットをやっていると、なんどか揺り戻しを体験します。AMP HTMLが出てきた背景を考えると非常にシンプル。
・スマホの台頭と普及
・スマホ用ページが必要
・リニューアル時PC用とスマホ用HTML作るのが面倒
・レスポンシブが流行
・リッチなHTMLは貧弱な通信環境だと表示が遅い
・ならスマホ用のシンプルなHTMLにすればいいんじゃない？
・AMP HTMLの登場 ← イマココ
i-mode登場時を思い出しました。
AMP HTMLの仕様
仕様については、本家本元が一番よく分かります。
<html ⚡> の ⚡がなんというか...ええのん？ って思ってしまいます。
かなり制限されたHTML仕様になっており、これまでのリッチでゴチャゴチャしたHTMLからある意味解放された感があります。
AMP HTMLへの対応方法
AMP HTMLを用意してもgoogleから見つけてもらわないといけません。
通常のhtmlを sample.htmlとすると、そのsample.htmlの <head>の中に
<link rel="amphtml" href="sample.amp.html">
を置き、sample.amp.htmlが AMP HTMLのファイルだということを明示するだけでOKです。
AMP HTMLの作り方
・The AMP HTML format / Sample document
を参考に、とてもシンプルなhtmlにするのがいいです。サイト内回遊とか、レイアウトとかデザインとか無視で構いません。
schema.orgに対応した構造化ドキュメント化するために、 ld+jsonに対応するのがよいようです。
⇒ Structured Data Testing Tool | Google Developers
Movable TypeでAMP対応する方法
一番簡単⇒ Google AMP HTML に対応してみた件 - LIQUID BLOG
HTMLが長くて読みにくいけど、詳しい⇒ 検索結果上位に表示されるAMP(Accelerated Mobile Pages)に対応するMovable Typeテンプレート大公開！ | cherry-pick BLOG | 株式会社cherry-pick
Google Search Console
AMP対応したファイルを配置したら、Google Search Consoleで
・クロール＞Fetch as Google
でクロールを手動リクエスト。
その後、
・検索での見え方＞Accelerated Mobile Pages
で見つかったかどうかを確認します。
作業はざっと、以上です。
・・・
まだ作ったばかり、AMPファイルが見えてないのでしばらくたってからまた続報をお知らせします。
（後編につづく、多分）