AMPの対応方法まとめ (作成途中)

投稿日: / 更新日:

アイキャッチ画像

Googleが「Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)」という目的で始めた、AMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。

AMPに関するQ&A

AMPに対応するにあたって疑問に思いそうな点を、Q&A形式でまとめました。私の個人的な意見ですので、鵜呑みにせず、自身の判断材料の1つとしていただければ幸いです。

対応するとどうなるの?

カルーセルに表示されたページ
カルーセルに表示されたページ

モバイルでのGoogleの検索結果ページに、カルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。

アクセスは増える?

増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その「カルーセルの中の順位」が低かった場合、ユーザーがカルーセルをスワイプで左に動かさないと、あなたがわざわざ対応したAMPの記事はユーザーの目には映りません。それでも、何千、何万人がアクセスする検索結果。上部のカルーセルに加わらないより加わった方が、当然、アクセスは増えるでしょう。

SEOで有利になるの?

カルーセルを抜きにした純粋な「検索順位」についてはどうでしょうか。AMPに対応した記事はデスクトップで検索した時も検索順位が上がるだとか、AMPに対応した記事をいくらか持っておけばサイト全体の評価も上がるんじゃないか、とかそういうことですね(笑)。Googleは、「AMPへの対応は検索順位には影響がない」と発言しています。私は、「Googleはそう言っているけど、AMPを広めるためにほんの0.001%くらいは影響を出しているんじゃないか」とか勝手に妄想しています。いずれにしても、「検索順位を上げる」という目的のみで対応する価値はないと思います。月並みな言葉ですが、その時間をコンテンツ磨きに費やした方が有意義でしょう。私が対応しようと思ったのは「面白いから」のただ一点です。

具体的には何すればいいの?

大雑把に説明します。通常のぺージAMP用のぺージ、の2つのぺージを用意して下さい。そしてお互いのぺージに、指定された方法で相互にリンクを貼ることで、Googleがモバイルで来たユーザーはAMPのぺージへ、デスクトップPCで来たユーザーは通常のぺージへ、といった具合に調整してユーザーを振り分けてくれます。つまり、これからAMPに対応したいあなたがやることは、AMP用のぺージを作ること、そして、通常のぺージからそのAMP用のぺージにリンクを貼ること、この2点です。

全部のぺージを対応しなきゃダメ?

対応を始めてみると分かるのですが、AMPには様々な制約が存在します。そのため、ページによっては完全に対応できないケースも出てくるでしょう。そのため、技術的に可能なページのみを対応していけば十分だと思います。

WordPressはプラグインで対応できる?

難しいと思います。この「難しい」は「無理」に限りなく近い意味で使ってます。WordPressには、HTMLをAMPの書式に自動で変換してくれるプラグインが存在します。が、その性能は「完璧」ではありません。よほどHTMLの構造がシンプルでない限り、「変換漏れ」が起きるでしょう。そしてAMPへの対応は「完璧さ」が求められるため、少しの変換漏れも許してくれないというわけです。

AMPに対応するには、その仕様を理解した上で手動でHTMLを記述するか。自分のウェブサイトのHTML構造を把握している自分が、それに最適化したプログラムを作成して自動化するか。または、既に存在するプラグインが既存の記事、今後投稿される記事のどれにも変換漏れを起こさない幸運か。そのどれかが求められるでしょう。

レンタルブログでAMPに対応できる?

無理だと思います。

AMPのテンプレート

最もシンプルな、AMPに対応したページのHTMLコードです。このコードを全てコピーして表示させてみて下さいね。これらのほとんどは、決まった記述なので、あまり難しく考える必要はないと思います。次章でAMPの基本的な決まりごとを確認していきましょう。

<!doctype html>
<html amp lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
		<title>SYNCER</title>
		<link rel="canonical" href="https://syncer.jp/">
		<script type="application/ld+json">
			{
				"@context": "http://schema.org",
				"@type": "NewsArticle",
				"headline": "SYNCERのホームページ",
				"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>SYNCERにようこそ!!</h1>
	</body>
</html>

基本的なルール

AMPに対応するために最低限必要な、基本的なルールをまとめています。利用できるタグ、禁止されているタグなどについては、次章以降をご参考下さい。

HTML文書の宣言

HTML文書の宣言は、HTML5と変わりません。doctypeは小文字でも大文字でもエラーは出ません。

<!doctype html>

meta要素の指定

head要素内のmeta要素で、文字コードとビューポートを指定します。この2つはどちらも必須で、欠けるとエラーが発生します。

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

オリジナルページの指定

AMPは基本的にサブの存在ですよね。クローラーがオリジナルページがどこにあるのかを認識できるよう、link要素のcanonical属性で指定します。省略するとエラーが発生します。URLは相対パスでも絶対パスでも、どちらでも大丈夫です。なお、AMPページだけしか存在しない場合、ここにはAMPページ(自身のページ)のURLアドレスを指定します。

<link rel="canonical" href="original.html">

JSON-LDの指定

schema.orgのJSON-LDを指定することで、そのページがどんなページなのかを正確にクローラーに伝えることができます。このJSON-LDは、省略してもデベロッパーツール上でのエラーは出ませんが、サーチコンソール内でエラー扱いとなります。つまり、省略不可です。ルールは複雑で奥深いですが、通常はテンプレートを改変すれば事足ります。

<script type="application/ld+json">
	{
		"@context": "http://schema.org",
		"@type": "NewsArticle",
		"headline": "SYNCERのホームページ",
		"datePublished": "2015-10-07T12:02:41Z",
		"image": [
			"logo.jpg"
		]
	}
</script>

boilerplateの記述

boilerplateとは「決まり文句」という意味です。下記はAMPが高速化を実現するために、head要素内に必要な記述です。内容を理解する必要はありません。文字通り、決まりごとだという認識で、何も考えずに記述しておきましょう。改変すると、エラーが発生します。

<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>

ちなみに、下記に置き換えても2016年2月現在、エラーは発生しません。これは昔に公式ドキュメントに掲載されていたboilerplateで、2016年1月のアップデート時に、先日の内容に置き換わったものです。エラーは発生しませんが、個人的には使わないことを推奨します。

<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

ライブラリの読み込み

最後にAMPを稼働させるための、ライブラリをhead要素内で読み込みましょう。ライブラリはCDNで提供されているので、ダウンロードなどする必要はありません。ライブラリのURLの指定は厳密で、//から始めるとエラーが発生します。必ず、https://から始めましょう。

<script async src="https://cdn.ampproject.org/v0.js"></script>

クローラーにAMPの存在を知らせる

AMPページの元となるオリジナルページが存在する場合、このhead要素内の、link要素で、AMPページへのパスを指定しましょう。パスは相対パスでも絶対パスでも大丈夫です。rel属性にはamphtmlを指定して下さい。これで、クローラーがこのページを訪れた時に、「このページにはAMP用のページが用意されているよ」ということを伝えられます。

<link rel="amphtml" href="./amp.html">

利用できるタグ一覧

AMPのページで利用できる、それぞれのタグをまとめています。

コアなタグ
項目名説明
doctypeHTMLは<!doctype html>の宣言で開始します。doctypeでもDOCTYPEでもエラーは出ません。
html<html ⚡>というように、AMPを示す属性を付けます。amp、どちらでも大丈夫です。また、lang属性を指定できます。
head公式ドキュメントではThey are optional in HTMLとありますが、省略するとエラーが発生しました。
meta各メタ要素を指定できます。charsetviewportが必須です。http-equivが禁止です。
titleドキュメントのタイトルを指定します。
body公式ドキュメントではThey are optional in HTMLとありますが、省略するとエラーが発生しました。
一般的なタグ
項目名説明
scriptAMPのライブラリを読み込むためと、JSON-LDを指定するため以外は禁止されています。
ahref属性にjavascript:を含める場合はtarget="_blank"としなければ、エラーになります。
button利用可能です。が、2016年2月現在、form要素を利用できないので、あまり使う機会はありません…。
noscript利用可能です。

禁止されているタグ一覧

AMPのページでは禁止されているタグの一覧です。ないと困るタグは大抵、AMP専用のカスタムタグに置き換わっているので、そちらを利用しましょう。

項目名説明
img代わりにamp-imgを利用して下さい。
video代わりにamp-videoを利用して下さい。
audio代わりにamp-audioを利用して下さい。
iframe代わりにamp-iframeを利用して下さい。
base禁止されています。
frame禁止されています。
frameset禁止されています。
object禁止されています。
param禁止されています。
applet禁止されています。
embed禁止されています。
form2016年2月現在、禁止されていますが、将来的に対応予定となっています。
input禁止されています。
textarea禁止されています。
select禁止されています。
option禁止されています。

AMP専用のタグ一覧

AMPだけで利用できる専用のタグが用意されています。専用タグを利用するには、head要素内のscript要素で、それぞれの拡張用ライブラリを読み込む必要があります。

項目名説明
amp-img画像を表示します。img要素の代わりに利用できます。
amp-video動画を表示します。video要素の代わりに利用できます。
amp-ad広告を表示します。2016年2月現在は、Google Adsenseを含めて、一部の広告に対応しています。
amp-fit-text
amp-font
amp-carouselカルーセルを表示します。
amp-animアニメーションGIFを表示します。
amp-facebookFacebookの投稿、または動画を表示します。
amp-youtubeYoutubeの動画を表示します。
amp-twitterTwitterのツイートを表示します。
amp-vineVineの動画を表示します。
amp-instagramInstagramの写真、動画を表示します。
amp-pinterestPinterestの画像、ピンボタン、フォローボタンを表示します。
amp-iframe
amp-pixel
amp-audio音声を表示します。audio要素の代わりに利用できます。
amp-lightboxライトボックスを表示します。
amp-image-lightbox画像専用のライトボックスを表示します。

対応方法の一覧

内容が膨大になるため、各項目をページ別にまとめています。項目名をクリックすると、そのページに移動できます。

項目名説明
エラーチェックページがAMPに対応しているか、エラーチェックをするには、Google Chromeのデベロッパーツールを使います。