Web制作

 AMP

  

AMPとは何か?



AMP(Accelerated Mobile Pagesの略称)とは、Googleが中心となって始まったスマートフォンでのウェブサイト(後述)を高速表示することを目的としたプロジェクトのことです。このAMPページもAMPに対応しています。



対応するべきページ



Googleが公開しているAMP導入ガイド(参照)にはAMPページを用意すべきページとして、リーフノードコンテンツを提示しています。 リーフノードコンテンツとは、このAMPページのような個々の記事ページや投稿ページ、レシピなどのことを言います。逆に対応すべきでない(最適化されない)ページはトップページや検索ページなどが挙がっています。



どうやって対応するのか?



当サイトも過去にブログで導入していたCMS、WordPress(ワードプレス)に適応する「テーマ」に機能としてAMPページを生成するというものが搭載されているものがあります。そのような機能を使うととても簡単に通常ページとともにAMPページを生成することが可能となります(設定が必要です)。しかしこのページのようにCMSを導入していないコンテンツなどの場合は手動で対応していくしか手がありません。実際にこのページをAMPに対応する時に行ったことを以下に提示します。

其の1:DOCTYPEはHTML5と同じです。
其の2:HTML要素にAMP属性を付けます。雷マークでも良いです。 其の3:以下の通りmeta要素を記述します。 其の4:同じコンテンツが存在することになるためcanonicalで通常ページへのリンクを行います。 其の5:boilerplateを記述します。 コードを改変してしまうと、エラーが出るので注意!
其の6:script要素でJSON-LD(構造化データ)を設定します。
其の7:AMPを動かすためのライブラリを読み込みます。 <head>での設定は以上となります。
※通常ページのhead要素にAMPバージョンが有ることをクローラーに認識してもらうために以下を追加します。



友だち追加


 中の人のTwitter



 公式サイトのTwitter




広告