概要
AMP は Google が推奨するモバイル用の Web ページの描画を高速化するための仕組みです
簡単に言えば使える JavaScript やタグを制限しキャッシュすることでページの高速化を実現しています
今回は AMP 対応したページの作成を公式のチュートリアルを元に試してみました
環境
AMP 対応のサンプルページ
まずは AMP 対応したページを実際に作って動かしてみましょう
mkdir -p /path/to/workspacecd /path/to/workspacetouch index.html
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "NewsArticle",
"headline" : "AMP のテストページです",
"image" : {
"@type" : "ImageObject",
"url" : "/welcome.jpg",
"height" : 400,
"width" : 400
},
"publisher" : {
"@type" : "Organization",
"name" : "@hawksnowlog",
"logo" : {
"@type" : "ImageObject",
"url" : "/welcome.jpg",
"height" : 400,
"width" : 400
}
},
"author" : {
"@type" : "Person",
"name" : "hawksnowlog"
},
"datePublished" : "2018-12-17T00:00:00Z"
}
</script>
<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>
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<amp-img src="/welcome.jpg" alt="Welcome" height="400" width="400"></amp-img>
</body>
</html>
welcome.jpg は適当にダウンロードして index.html と同じパスに配置します
wget 'https://pbs.twimg.com/profile_images/712848447569661952/ayfI9-77_400x400.jpg' -O welcome.jpg
動かす
cd /path/to/workspacepython -m SimpleHTTPServer
で localhost:8080/index.html にアクセスするとページが表示されます
本当に AMP 対応しているか確認する
ページを見るだけではただの Web ページです
このページが AMP 対応しているかどうか確認するには
- デベロッパーツールのコンソールを使う
- amp-validator という Chrome 拡張を使う
の 2 通りがあります
1 の場合コンソールを開いた上で http://localhost:8000/index.html#development=1 という URL にアクセスします
するとコンソールに以下のように表示されると思います
ここにエラーが表示される場合は AMP 対応できていません
例えば使えないタグを使っていたり必要なメタタグなどが不足している場合などです
2 の場合はツールバーにアイコンが表示されます
ページにアクセスして緑のアイコンが表示されれば AMP 対応が完了しているページになります
解説
では動かせたところで AMP 対応に必要なそれぞれのタグのについて紹介します
html タグ
まず上部にある HTML タグに AMP 対応であることの記載が必要です
amp ではなく雷マークでもいいようです
<html amp lang="en">
JavaScript
次に amp の JavaScript ライブラリを参照します
これも必須です
<script async src="https://cdn.ampproject.org/v0.js"></script>
AMP は基本的に上記以外の JavaScript は使えません
動的なコンテンツを表示したい場合それ専用の AMP タグがあるのでそれで代用します
将来的には好きな JavaScript が使えるようになるという話も聞きますが現状では厳しいようです (Twitter などを埋め込む場合はそれ専用のタグが用意されているようです)
rel=”canonical” の設定
簡単に言えば AMP 対応していない同一ページへのリンクを設定します
AMP 対応しているページだけであればその自身へのページのリンクを設定します
<link rel="canonical" href="/index.html">
AMP 対応するとよく言われるのが AMP 対応していないページ (モバイル用ではなく通常の Web 用のページ) を残すというケースです
その場合にはこの rel="canonical" を使って参照して上げることで Google に別のページがあることも教えてあげることで、そちらのページもインデックスさせることができます
またモバイル用のページが見づらい人がいる場合には Web 版に誘導することもできるようになります
viewport
必須のタグと属性です
基本はコピペで OK です
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
viewport はレスポンシブ対応しているページでよく見かける属性です
JSON-LD
JSON-LD はページの構造やメタ情報を定義することができる機能です
AMP 用の JSON-LD スキームが決められており定義することが推奨されています
JSON-LD を定義することで Google の検索結果 (特にニュース記事など) でよく見る「カルーセル」に該当ページを表示されることができるようになります
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "NewsArticle",
"headline" : "AMP のテストページです",
"image" : {
"@type" : "ImageObject",
"url" : "/welcome.jpg",
"height" : 400,
"width" : 400
},
"publisher" : {
"@type" : "Organization",
"name" : "@hawksnowlog",
"logo" : {
"@type" : "ImageObject",
"url" : "/welcome.jpg",
"height" : 400,
"width" : 400
}
},
"author" : {
"@type" : "Person",
"name" : "hawksnowlog"
},
"datePublished" : "2018-12-17T00:00:00Z"
}
</script>
上記は @type NewsArticle の定義になります
他にもタイプの定義があるので公開するページのタイプに合わせて設定してあげると良いと思います (参考)
amp-boilerplate
AMP Boilerplate Code と呼ばれています
これも必須の要素です
viewport と同じで基本はコピペで OK (なはず) です
<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>
余分なスペースなどは削除しておく必要があるようです
amp-custom
カスタム用のスタイルシートをここで定義します
むしろここ以外でスタイルシートを定義することはできません
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
amp-img
画像を表示する場合には img タグではなく amp-img タグを使います
amp-img のように AMP 対応したページでは使えるタグが限られています
既存の HTML タグにも使えるものがありますが基本的には限られたタグしか使えません
AMP で使える基本コンポーネントは以下の通りです
https://www.ampproject.org/ja/docs/reference/components
逆に使えないタグや属性は以下の通りです
https://www.ampproject.org/ja/docs/fundamentals/spec
一旦作成してみて validator やコンソールで確認してみて、エラーが出なくなるまでタグを置き換えたり削除したりするしかないかなと思います
実際に AMP 対応するには
ケースとしては 2 つが考えられると思います
- 既存のページを AMP 対応する
- 新規で AMP 用のページを作成する
1 は動的なコンテンツに依存していれば依存しているほど大変だと思います
また大規模なページになればなるほど大変なイメージもあります
やり方はいろいろありますがやはり前に紹介した通り validator を使って 1 つ 1 つエラーを解決していく感じだと思います
2 のほうが簡単だとは思います
が、2 を採用すると同一ページの管理が 2 つになってしまうため管理コストがあがります
うまく吸収してくれるようなツールもありそうですが単純に考えれば 2 倍になります
rel="canonical" 属性もあるようにそういったケース自体 AMP は想定しているので間違いではないです
個人的にはできれば 1 で進めて無理そうであれば 2 にするというのが良いかなーとは思います
当然ですがどちらにするにしてもモバイル向けのページデザインにする必要はあります
1 であればレスポンシブデザイン対応は必須になるので考えることが増えます
2 であればレスポンシブにする必要はなくなり完全にモバイル用の別ページを作れば良いだけになるので考えることは減ります
自分は実際に自分のページに適用したなどの経験はないのであくまでも推測にはなります
最後に
AMP 対応したサンプルページを作成して AMP に入門してみました
制限を設けることで最適化しているのでシンプルなページほど AMP に向いているなと思いました
AMP 用の JSON-LD の @type を見てもわかるようにニュース記事やブログ記事、レビュー記事など静的コンテンツを含んでいるページに向いているのだと思います
また JSON-LD を使うことで Google 検索のカルーセルに該当記事を表示させることもできるので SEO 的な効果もあるのかもしれません
同じではないですが PWA やレスポンシブデザインも意識したほうが良いかもしれません
最近は PWA + AMP (PWAMP (ぷわんぷ)) という取り組みをしているページもあるようです
PWA 自体は Service Worker を使った仕組みになるので仕組み自体は全然違いますがシナジーはあるので興味があれば調べてみると良いかなと思います
参考サイト
