アールイーデザインWEBサイトのリニューアルから新規作成まで、お客様の様々なご要望にお応えしホームページを作成いたします。Pages)とは、スマートフォンやタブレットのモバイル端末でWebページを高速に表示するためにGoogleが導入したプロジェクトです。今回の弊社サイトのリニューアルに合わせてブログ記事をAMPに対応させましたのでその実装方法をまとめました。MEDIAを参考にさせていただきました。基本的には通常のHTMLと大きく変わりませんが、特有の仕様がいくつかありますので公式ドキュメントを参考にマークアップしていきます。注意すべき内容としてスタイルシートの記述方法、javascriptの使用、コンテンツ内のコーディング、AMPページと通常ページの紐付けについてまとめました。amp-custom>タグを使用して記述していきます。boilerplateというAMPが使用するスタイルシートの記述が必要になります。amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>javascriptの使用javascriptの使用はあらかじめAMPページ用に用意されたコンポーネント以外は使用不可となっており、AMP用のjavascriptライブラリーの読み込みも必要となります。弊社ブログでは以下のコンポーネントを使用しました。height="44"></amp-social-share>この他にも複数枚画像のカルーセル表示(amp-carousel)、YouTube動画の表示(amp-youtube)、ライトボックスの設置(amp-lightbox)、アコーディオンの設置(amp-accordion)などがあるようです。構造化データとはWebページの情報を検索エンジン等に適切に提示するためのもので、記述方法はいくつかあるようですが公式ドキュメントにも記載されているJSON-LDで記述しました。この記事の構造化データは下記のようになってます。Pages)とは、スマートフォンやタブレットのモバイル端末でWebページを高速に表示するためにGoogleが導入したプロジェクトです。}</script>コンテンツ内のコーディング通常のHTMLの記述とほとんど変わりませんが、いくつか使用できないタグや置き換えなければいけないタグがあります。詳細については公式サイトの仕様書のHTMLタグを参照ください。一般的なブログで使用するタグとしてはimg(amp-imgに置き換え)、video(amp-videoに置き換え)、iframe(amp-iframeに置き換え)あたりを注意してコーディングすれば問題ないかなと思いました。amp-imgについてはlayout属性にresponsiveを指定することによって、ブラウザサイズに合わせて画像のアスペクト比を保ったまま拡大縮小することができます。layout="responsive"></amp-img>AMPページと通常ページの紐付けAMPページとは別に通常ページがある場合、クローラーがAMPページと通常ページにお互いの存在を確認できるように紐付けを行います。AMPページにはcanonicalに通常ページのURLを設定したタグを設置し、通常ページにはamphtmlにAMPページのURLを設定したタグを設置します。通常ページがなく、AMPページのみの場合はcanonicalに自身のURLを設定したタグを設置を設置します。Chromeなどブラウザのデベロッパーツールでデバッグすることができます。作成したAMPページのURLの最後に#development=1をつけてアクセスし、デベロッパーツールを起動します。successful」と表示されていればAMPの仕様に沿ったページとなり、仕様に沿っていない場合エラーが表示されます。ブラウザでの検証の他に、Googleが公開しているテストツールでも確認できます。ブラウザのデベロッパーツールでは構造データのチェックはできませんが、こちらのテストツールでは結果ページ内のリンクから確認できます。検索結果のプレビューも確認できます。HTMLを実装してみて、制限や独自の仕様がありますが基本的には通常のHTMLと変わらないので対応自体はそれほど難しくありませんでした。WordPressにはAMPに対応できるプラグインもあるようですので比較的容易に設置できそうです。モバイルユーザーが増える中、ページ表示の高速化はユーザーのストレス軽減に繋がりますし、モバイル端末でのGoogle検索結果上部のトップニュースにはAMP対応ページのみ表示されるようですのでモバイルからのアクセス増加を目指すには導入してみてもいいかもしれません。Saito高い成果を上げるホームページをご提案いたします。リニューアルから新規ホームページ作成まで、お客様の様々なご要望にお応えしホームページの目的達成を実現いたします。お見積りやご相談はすべて無料です。ホームページに関するご相談、ご質問などお気軽にお問い合わせください。