AMPを知ろう!

AMPって何?

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

対応すべきページ

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

どうやって対応するか?

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

AMP化の手順

其の1:DOCTYPEはHTML5と同じです。
<!DOCTYPE html>
其の2:HTML要素にAMP属性を付けます。雷マークでも良いです。
<html amp>
其の3:以下の通りmeta要素を記述します。

<!-- Text Code -->
<meta charset="utf-8">
<!-- ViewPort -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

其の4:同じコンテンツが存在することになるためcanonicalで通常ページへのリンクを行います。
<link rel="canonical" href="(元ページのURL)">
其の5:boilerplateを記述します。
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
コードを改変してしまうと、エラーが出るので注意!
其の6:script要素でJSON-LD(構造化データ)を設定します。
其の7:AMPを動かすためのライブラリを読み込みます。
<script async src="https://cdn.ampproject.org/v0.js">
<head>での設定は以上となります。
※通常ページのhead要素にAMPバージョンが有ることをクローラーに認識してもらうために以下を追加します。
<link rel="amphtml" href="(AMPバージョンのURL)">

タグ

画像や動画などを表示するときにはデフォルトの以下のようなタグを使います。それ以外はオプションで別に読み込む必要があります。
amp-img
amp-video
amp-ad
amp-pixel
amp-embed
タグの説明は一つひとつ説明していくのが本筋だと(管理者は)思っていますが、長くなってしまうので割愛しますm(_ _)m

雑談:どうでもいい話

HTMLページやCSSページをAMPに対応させようとして頑張ってみたもののエラーしか出ずどう頑張っても無理だったので諦めました(笑)。将来的に対応できるように頑張ります。






このページはAMPバージョンのページです。
通常版はこちらです。


Copyright © NORISUKETV.COM. All Rights Reserved.