AMPの実装を公式で用意されているチュートリアルを見ながら試してみました。
実装方法
まずはAMPの実装を行うサンプルページを作成します。
index.html
<h1>AMP</h1> <h2>AMPとは</h2> <img src="amp.jpg" alt="AMP" width="320" height="130"> <blockquote cite="https://ja.wikipedia.org/wiki/Accelerated_Mobile_Pages">Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである[1]。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。<br> <cite>引用 - Wikipedia</cite></blockquote> <h2>マークアップ</h2> <h3>AMPページ</h3> <ul> <li><code><!doctype html></code>と<code><html amp></code>で開始</li> <li>headタグに<code><meta charset="utf-8"></code>タグと<code><link rel="canonical"></code>タグと<code><meta name="viewport"></code>タグを入れる。</li> <li>head タグの最後の要素を<code><script async src="https://cdn.ampproject.org/v0.js"></script></code> タグにする</li> </ul> <h3>非AMPページ</h3> <p><code><!link rel="amphtml"></code>でAMPページを指定</p> <h2>プレビュー</h2> <ol> <li>ブラウザで開いてURLの末尾に「#development=1」をつけてアクセスする</li> <li>Chrome デベロッパーツールのconsoleを開いて、検証エラーを確認する</li> </ol>
AMPを紹介しているサンプルページを作成しました。
このページをAMP対応してみます。
headタグ内にAMPページのURLを指定します。
今回はamp/index.htmlにAMPページを設置するので、以下のように記述します。
<link rel="amphtml" href="https://cly7796.net/blog/sample/try-using-amp/amp/index.html">
これでAMP元のページ設定は完了です。
非AMPページのデモ
次にamp/index.htmlにAMPのページを作成します。
文書型宣言を<!doctype html>として、htmlタグを<html amp>にします。
<!doctype html> <html amp lang="ja">
headタグの最初に<meta charset=”utf-8″>を設定します。
<meta charset="utf-8">
headタグ内にcanonicalでAMP元のページを指定します。
AMP元のページとAMPページが同一の場合は自身を指定します。
<link rel="canonical" href="https://cly7796.net/blog/sample/try-using-amp/index.html">
headタグ内にviewportを指定します。
content=”width=device-width,minimum-scale=1″として、必須ではないですがinitial-scale=1も入れるといいようです。
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
headタグ内にstyleタグを指定します。
<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 JS ライブラリを読み込むために、headタグの最後に<script async src=”https://cdn.ampproject.org/v0.js”></script>を入れます。
<script async src="https://cdn.ampproject.org/v0.js"></script>
ここまでがAMPページの必須項目になります。
ページ全体はこのようになります。
amp/index.html
<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<title>AMPについて | cly7796.net</title>
<link rel="canonical" href="https://cly7796.net/blog/sample/try-using-amp/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
</body>
</html>
必須ではないですが、合わせてSchema.orgの設定などをしておくといいようです。(今回は省略します。)
次にbodyタグ内を設定してみます。
基本的にはそのまま使用できますが、imgタグなど一部置き換えが必要なタグや使用が禁止されているタグがあります。
詳しくは公式ドキュメントをご確認ください。
<body> <h1>AMP</h1> <h2>AMPとは</h2> <amp-img src="../amp.jpg" alt="AMP" width="320" height="130"></amp-img> <blockquote cite="https://ja.wikipedia.org/wiki/Accelerated_Mobile_Pages">Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである[1]。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。<br> <cite>引用 - Wikipedia</cite></blockquote> <h2>マークアップ</h2> <h3>AMPページ</h3> <ul> <li><code><!doctype html></code>と<code><html amp></code>で開始</li> <li>headタグに<code><meta charset="utf-8"></code>タグと<code><link rel="canonical"></code>タグと<code><meta name="viewport"></code>タグを入れる。</li> <li>head タグの最後の要素を<code><script async src="https://cdn.ampproject.org/v0.js"></script></code> タグにする</li> </ul> <h3>非AMPページ</h3> <p><code><!link rel="amphtml"></code>でAMPページを指定</p> <h2>プレビュー</h2> <ol> <li>ブラウザで開いてURLの末尾に「#development=1」をつけてアクセスする</li> <li>Chrome デベロッパーツールのconsoleを開いて、検証エラーを確認する</li> </ol> </body>
imgタグはamp-imgタグに置き換えています。
AMPページ用のスタイルを設定します。
htad内にstyleタグを使って以下のように記述します。
<style amp-custom>
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
スタイル設定について詳しくはこちらをご確認ください。
最終的にAMPページは以下のような内容になりました。
amp/index.html
<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<title>AMPについて | cly7796.net</title>
<link rel="canonical" href="https://cly7796.net/blog/sample/try-using-amp/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>AMP</h1>
<h2>AMPとは</h2>
<amp-img src="../amp.jpg" alt="AMP" width="320" height="130"></amp-img>
<blockquote cite="https://ja.wikipedia.org/wiki/Accelerated_Mobile_Pages">Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである[1]。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。<br>
<cite>引用 - Wikipedia</cite></blockquote>
<h2>マークアップ</h2>
<h3>AMPページ</h3>
<ul>
<li><code><!doctype html></code>と<code><html amp></code>で開始</li>
<li>headタグに<code><meta charset="utf-8"></code>タグと<code><link rel="canonical"></code>タグと<code><meta name="viewport"></code>タグを入れる。</li>
<li>head タグの最後の要素を<code><script async src="https://cdn.ampproject.org/v0.js"></script></code> タグにする</li>
</ul>
<h3>非AMPページ</h3>
<p><code><!link rel="amphtml"></code>でAMPページを指定</p>
<h2>プレビュー</h2>
<ol>
<li>ブラウザで開いてURLの末尾に「#development=1」をつけてアクセスする</li>
<li>Chrome デベロッパーツールのconsoleを開いて、検証エラーを確認する</li>
</ol>
</body>
</html>
プレビュー
作成したAMPページのプレビューを行います。
ブラウザでAMPページを開いて、URLの末尾に「#development=1」をつけてアクセスします。
Chrome デベロッパーツールのconsoleを開いて確認できます。
もしくはThe AMP Validatorという検証ツールでも確認できます。
URLを入力するかコードを直接貼り付けることでチェックできます。
確認
実際に検索結果でどのようになるかを確認してみます。
以下のURLにスマホでアクセスするか、PCの場合はChromeのデベロッパーツールでデバイスモードをスマホに切り替えるなどで確認してください。
https://www.google.co.jp/search?q=cly7796.net%2Fwp%2Fsample%2Ftry-using-amp%2F
検索結果にAMPに対応したカミナリマークが付いているのを確認できました。
検索結果のリンクから遷移してみると、AMPページで表示することができました。
今回はAMPを実装するための最低限の必須項目などを確認しただけですが、次はもう少し細かい実装部分も試せればなと思います。
【参考サイト】
コメントが承認されるまで時間がかかります。