この記事を書いているのは、2016年2月27日（土）～28日（日）です。
（配布テンプレートも同時に書きました。）
この時、AMP HTML本家のページのリファレンスとGit Hubを見ながら作業をしてました。
（よくあることと言えばそれまでですが）本家のフレームワークを使っても、バリデーションチェック（記述内容のエラーチェック）では、エラーが出ました。
ということで、バリデーションツールに従った記述にしているため、本家サイトに書かれている内容とは若干異なる部分があります。
そんな時はGit Hubと併せてご確認下さい。
文末にバリデーションツールの紹介もしていますので、その時々に併せてチェックして記述内容のエラーをご確認下さい。
現時点ではバリデーションツールでエラーが出ない記述でテンプレートを配布しています。
弊社でも常々情報をチェックしていまして重大なエラーや仕様の変更などなどがあった場合は随時アップデートする予定でいていますが、100%の対応を取ることが出来るか分かりかねます。
ということで、ご容赦下さいますよう、宜しくお願い致します。
AMPとは、Accelerated Mobile Pagesの略でして、GoogleとTwitterが連携してモバイル（主にスマホ）端末でのページ表示を高速化するためのプロジェクト名です。
そして、そのためにHTMLルールを策定しているというところです。
GoogleとTwitterが連携しているというのは、GoogleとTwitterが策定しているAMP HTMLルールに従ったページを公開することで、AMP HTMLルールに従ったページをGoogleとTwitterのサーバーがキャッシュしてくれ、彼らのサーバーでページを表示してくれるという流れです。
AMPルールに従ってるページがあるサイトは、Googleの検索結果ページ、Twitterのタイムライン上でリンクが張られたりすると、上手くキャッシュしてもらえるようです。
デモについては以下のURLでして、スマホ端末でアクセスして頂くと確認することが出来ます。
本家サイトに色々なハウトゥー的なことが書かれており、辞書的なことはGit Hubにアップされているという、そんな感じです。
ということで、早速テンプレートに組み込んでみましたので、ダウンロードしてお使い下さい。
phptemp_amp_160227.zip
通常版とAMP版です。
元々のファイル名の拡張子前に”_amp”をつけています。
当サイト内の「SEOの基礎知識」の中のコンテンツです。
組み込み手順は省くことに致しました。
単純にページを増やし、ソースを書き換えるだけですので、組み込み手順と言うよりは導入に際してのポイントや記述ルールを書いていこうと思います。
凡そ、こんな感じで記述ルールがあるようです。
ですので、サンプルファイルではそれらを守った感じにしました。
PCからの閲覧を無視してもいいのかどうかは分かりませんが、基本的にモバイルに対して色々考慮している感じですので、それ以上でもなければそれ以下でもないというところです。
本家に記述されているフレーム記述
<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.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": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [ "logo.jpg" ]
}
</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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
上記の記述について、若干の補正をしました。
languageはenからjaに修正しています。
imgタグの記述
<!-- 通常記述 --> <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img> <!-- レスポンシブ記述 --> <amp-img src="responsive.jpg" width="527" height="193" layout="responsive"></amp-img> <!-- Fix固定記述 --> <amp-img id="img1" src="fixed.jpg" width="264" height="96"></amp-img> <!-- 表示しない --> <amp-img id="img2" src="hidden.jpg" width="527" height="193" layout="nodisplay"></amp-img>
幾通りか記述がありますので、その時々に併せて使ってください。
あと、サイズは縦も横もかならず指定して下さい。
iframeについては、今回は利用していないので参考ページをご確認下さい。
すぐに使えるような感じです。
head内に書くCSS
<style amp-custom>
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
タグの中に書くCSS
<amp-img media="(min-width: 650px)" src="wide.jpg" width="466" height="355" layout="responsive" > </amp-img> <amp-img media="(max-width: 649px)" src="narrow.jpg" width="527" height="193" layout="responsive" > </amp-img> <amp-img src="wide.jpg" srcset="wide.jpg" 640w, "narrow.jpg" 320w > </amp-img> <amp-img src="wide.jpg" srcset="wide.jpg" 640w, "narrow.jpg" 320w sizes="(min-width: 650px) 50vw, 100vw" > </amp-img>
今回、テンプレートに組み込んだ内容で本家サイトで解説されてたのは、こんな感じでしょうか。
あとは、Git Hubでも見ながら細かい内容を見て発展・拡張して頂ければと思います。
因みにですが、本家サイトの内容を使いやすい状態に書き換えています。
単純なHTMLに近い状態を目指した感じですので、あとは全部調整次第という感じです。
元ページとamphtmlページはそれぞれのページのメタタグでそれぞれのページを明示しなければいけません。
元ページに書くメタタグ
<link rel="amphtml" href="/column/seo/160227/01/index_amp.php" />
amphtmlページに書くメタタグ
<link rel="canonical" href="/column/seo/160227/01/" />
Google chromeで記述内容の確認が出来ます。
Google chromeを立ち上げ、「F12」でデベロッパーツールを立ち上げ、ページのURLの末尾に「#development=1」を入れてページを開いてください。
作業をしてた時に色々考えたことをメモ代わりに書いておこうと思います。
WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。
今回のAMP HTMLの内容は初心者の方には難しい内容になってしまったかもしれません。
細かいことが多く、このページには収まりきらないくらいのことがあったような気がします。
全ての仕様を書き出すことが目的ではないので、重要だと思った部分だけを簡潔に書き出してみた感じです。
最近の新しいマークアップはだいぶとHTML5がベースとなっているような感じがします。
当サイトで配布しているテンプレートはxhtml 1.0 strictで記述しています。
マークアップの内容がSEOに直接的な影響を持っているとはなかなか思えないということで、特に着手してない感じですが、技術のベースがHTML5になるというのであれば色々考えなきゃいけないかな？と思えます。
しかし、AMP HTMLは検索エンジンからの誘導を考えるとなかなか外せない感じがしますので、当サイトのコラム記事ページではAMP HTMLを導入しようか考えています。
どこを残してどこの部分を削除しなければいけないのかをきっちり見極める必要がありそうなのでまだ設計段階ですが、気持ちは導入で固まっています（笑）
ということで、これからも何かしら展開があった時は情報をアップデートしていきたいと思う今日この頃です。
執筆 : 清水 隼斗
GoogleとTwitterが連携して策定しているプロジェクト、AMP（Accelerated Mobile Pages） HTMLの通常ページ
簡単WEBサイトテンプレート（PHP）をアップデートしました。
以下のページから、アップデートファイルをアップしているページにアクセスしてください。
「GoogleとTwitterが連携して策定しているプロジェクト、AMP（Accelerated Mobile Pages） HTML」のシェアをお願い致します！