AMP対応はGoogleの検索結果にも影響！PR TIMESへの導入記。
PR TIMESフロントエンジニアの山田です。
AMPという言葉をご存知でしょうか。
Accelerated Mobile Pagesの略で、スマートフォンページを素早く表示するためのHTMLページ構造になります。
Googleなどが提唱して進めているので、対応してるかどうかでモバイルでの検索結果などに影響が出てくることが考えられます。
技術的な詳細などはこちらにまとまっているので、ご興味のある方はこちらをご覧ください。
（発展途上の仕様なので、今後大きく変わっていく可能性も高いです。）
www.ampproject.org
PR TIMESも先日プレスリリース詳細表示ページでAMPに対応したのですが、モバイルで高速表示するために技術的仕様が厳しく定義されているので適応させるのに少し苦労しました。
タグの書き換え
img→amp-img、iframe→amp-iframeと、一部のタグをamp対応用に書き換える必要があります。
これは置換するだけなので簡単ですね。
スタイルシート
linkタグを使って外部からの読み込みが禁止となっています。
そこでhead内に設定するか、インラインでスタイルを当てるという対応になります。
sassやscssなどを使っていてそれが面倒な場合は、headのstyle内にphpなどで直接includeしてしまうという手もあります。
これも対応としては簡単ですね。
問題になってくるのは次の項目。
リッチコンテンツが制限される
生活者に読んで頂くニュースコンテンツとしてプレスリリースを配信して頂くためにPR TIMESでは画像・動画をはじめ、VR・アニメーションなど多彩なリッチなコンテンツを扱えるようになっています。
ただAMPの技術定義では現状AMPランタイム以外のスクリプトが禁止なのです。
リッチコンテンツがAMPでは一部制限されてしまう状況で、PR TIMESの魅力を活かしつつどう対応するかが課題でした。
そこでAMP非対応ページとAMP対応ページ、両方のスマートフォンページを用意することにしました。
通常であれば同じ内容のコピーページが存在することはSEO的に良くないのですが、AMPに限ってはそれを解決する方法があります。
オリジナルページとAMPページのhead内にそれぞれ以下のタグを設定します。
オリジナルページ
<link rel="amphtml" href="ampページのHTML">
AMPページ
<link rel="canonical" href="オリジナルページのURL">
これによりGoogle側で自動的に判別して最適な方へ振り分けてくれます。
AMPページでのリッチコンテンツはページ内でなくリンクで出し、オリジナルページヘの導線を確保するというのが大まかな対応です。
確認
対応が完了したらテストページのURLに「?#development=1」というクエリをつけてChromeでアクセスすると、開発ツールのコンソール内にでエラーなどをデバッグすることができます。
エラーがなくなり「AMP validation successful.」というメッセージが出たら対応完了です。
AMPページ公開
（「iPhone」というキーワードで検索したところ）
モバイルでGoogle検索すると話題になっているキーワードだった場合、対応しているとAMPアイコンと共にトップニュースという扱いで上部に出てきます。
修正
これで終わりではありません。
アクセスをしばらく追ってみました。
リリースしてから数日アクセスがほとんどありません。
PR TIMESで配信したプレスリリースがまったく話題になっていないというのはおかしいので、何かが足りなかったのだと気づきます。
いろいろ試してわかったのはこのタグ。
<link rel="amphtml" href="ampページのHTML">
これをスマートフォンページにしか設置していないことが原因でした。
スマートフォン検索に関係するページなので、Google検索もスマートフォンページを見て判別するだろうという推測でしたが、違うようです。
念のためPC用ページにも追加するという修正を行ってみたところ、見事にアクセスが増えてきました！
PC用ページはAMPに関係ないとは言え、こちらにもタグ追加が必要ということですね。
PCページとスマートフォンページを分けている方はお気をつけください。
PR TIMESではこのように、試行錯誤しながら一緒にサービスを成長させて頂ける仲間を募集しています。
少しでもご興味のある方は、お話しやオフィス訪問なども受け付けています。
こちらから是非ご連絡ください。
