AMPの対応方法まとめ
公開日: 2016/02/12 / 更新日:
Googleが「Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)」という目的で始めたAMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。
Q&A
対応するとどうなるの？
モバイルでのGoogleの検索結果にカルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。
モバイルでのGoogleの検索結果に雷のマークが付きます。そして検索結果からのアクセスは全てAMPのページになります。開発者もユーザーも、通常のページかAMPのページかを選択することができません。
アクセスは増える？
増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その「カルーセルの中の順位」が低かった場合、ユーザーがカルーセルをスワイプで左に動かさないと、あなたがわざわざ対応したAMPの記事はユーザーの目には映りません。とはいえ、何千、何万人がアクセスする検索結果で上部のカルーセルに加わらないより加わった方が当然、アクセスは増えるでしょう。
SEOで有利になるの？
カルーセルを抜きにした純粋な「検索順位」についてはどうでしょうか。AMPに対応した記事はデスクトップで検索した時も検索順位が上がるだとか、AMPに対応した記事をいくらか持っておけばサイト全体の評価も上がるんじゃないか、とかそういうことですね(笑)。Googleは、「AMPへの対応は検索順位には影響がない」と発言しています。私は、「Googleはそう言っているけど、AMPを広めるためにほんの0.001%くらいは影響を出しているんじゃないか」とか勝手に妄想しています。いずれにしても、「検索順位を上げる」という目的のみで対応する価値はないと思います。月並みな言葉ですが、その時間をコンテンツ磨きに費やした方が有意義でしょう。私が対応しようと思ったのは「面白いから」のただ一点です。
具体的には何すればいいの？
大雑把に説明します。「通常のぺージ(今までのページ)」と「AMP用のぺージ」、の2つのぺージを用意して下さい。そしてお互いのぺージに、指定された方法で相互にリンクを貼ることで、Googleがモバイルで来たユーザーはAMPのぺージへ、デスクトップPCで来たユーザーは通常のぺージへ、ユーザーを振り分けてくれます。つまり、これからAMPに対応したいあなたがやることは、AMP用のぺージを作ること、そして、通常のぺージからそのAMP用のぺージにリンクを貼ること、この2点です。
全ぺージを対応しなきゃダメ？
対応を始めてみるとすぐに分かるのですがAMPには様々な制約が存在します。特にJavaScript全般が禁止されているのはその筆頭です。「通常ページと比べたら質が下がる」という意味では、ほとんどのページが完全に対応できないはずです。「完全なページを見るにはこのリンクをクリックして通常ページに移動して下さい」、そんなお粗末な対応をしているサイトも少なくありません。AMPに対応することでどれだけコンテンツの質を落としてしまうのか、それは長期的に考えて果たしてユーザーのためになるのか。それらを考慮しながら、AMPにしても問題のない特定のページのみを対応していけば十分だと思います。
WordPressはプラグインで対応できる？
難しいと思います。この「難しい」は「無理」に限りなく近い意味で使ってます。WordPressには、HTMLをAMPの書式に自動で変換してくれるプラグインが存在します。が、その性能は「完璧」ではありません。よほどHTMLの構造がシンプルでない限り、「変換漏れ」が起きるでしょう。そしてAMPへの対応は「完璧さ」が求められるため、少しの変換漏れも許してくれないというわけです。
AMPに対応するには、その仕様を理解した上で手動でHTMLを記述するか。自分のウェブサイトのHTML構造を把握している自分が、それに最適化したプログラムを作成して自動化するか。または、既に存在するプラグインが既存の記事、今後投稿される記事のどれにも変換漏れを起こさない幸運か。そのどれかが求められるでしょう。
レンタルブログでAMPに対応できる？
個々のブログで対応するのは無理だと思います。ただし、はてなブログやAmebloなど、ブログ全体で対応している場合もあります。
テンプレート
最もシンプルな、AMPに対応したページのHTMLコードです。このコードをコピーして表示させてみて下さい。これらのほとんどは決まった記述なので難しく考える必要はないと思います。次章でAMPの基本的な決まりごとを確認していきましょう。
AMPのテンプレート
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>【デモ】AMPの対応方法まとめ</title>
<link rel="canonical" href="https://syncer.jp/Web/AMP/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
background-color: #fff ;
padding: 12px ;
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "記事のタイトル",
"image": [
"eyecatch.jpg"
],
"datePublished": "2017-08-23T00:00:00+0900"
}
</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>AMPのデモぺージ</h1>
<p>AMPのHello World!</p>
</body>
</html>仕様
AMPのコンテンツを作成する方法をまとめています。
ルール
- 文書宣言は、
<!DOCTYPE html>にすること。 - html要素に
⚡、またはampの属性を付けること。(例:<html amp>) - 通常ページの
rel=canonicalのlink要素のhref属性は、AMPページのURLを指定する。 - AMPページの
rel=amphtmlのlink要素のhref属性は、通常ページのURLを指定する。存在しなければ自身(AMPページ)のURLを指定する。 - head要素の最初の子要素は<meta charset="utf-8">でなければいけない。
- head要素に<meta name="viewport" content="width=device-width,minimum-scale=1">を含めなければいけない。
initial-scale=1を加えることが望ましい。 - head要素に<script async src="https://cdn.ampproject.org/v0.js"></script>を含めなければいけない。
- head要素にboilerplateのスタイルシートを含めなければいけない。
- JSON-LD形式のschema.orgのマークアップを含めることが推奨される。
- オープングラフやTwitterカードのmeta要素を含めることが推奨される。
- HTMLで条件付きコメントは使用できない。(
<!--[if IE 6]>) - JavaScriptは使用できない。script要素だけでなく、on〜属性、href属性による利用も含めて禁止。
- HTMLはタグの制限事項、属性の制限事項を違反しないこと。
- スタイルシートはstyle要素にamp-custom属性を付けてインラインで記述すること。50KBを超えない範囲で、スタイルシートの制限事項を違反しないこと。
- 外部のスタイルシートはカスタムフォントを利用する以外では読み込めない。
相互にURLを指定する
AMPページの元となる通常ページが存在する場合、rel=amphtmlのlink要素にAMPページへのURLを指定します。これで、クローラーが通常ページを訪れた時に「このページにはAMPページが用意されている」ということを伝えられます。逆に、AMPページのrel=canonicalのlink要素には通常ページのURLを指定します。
通常ページのlink要素 (AMPページのURLを指定)
<link rel="amphtml" href="https://syncer.jp/amp.html">AMPページのlink要素 (通常ページのURLを指定)
<link rel="canonical" href="https://syncer.jp/normal.html">boilerplateとは？
boilerplateとは直訳すると「決まり文句」という意味で、head要素内に加えなければいけないスタイルシートのことです。内容を理解する必要はありません。改変するとエラーが発生します。
HTML
<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ではimg要素が使えません。代わりにamp-imgというAMP独自の要素を使わなければいけません。このように、AMPではいくつかのHTMLタグの使用に制限があります。
| タグ名 | 説明 |
|---|---|
| script | JavaScriptは禁止されています。script要素は、type=application/ld+jsonを付けてJSON-LDとしてなら利用できます。 |
| base | 禁止されています。 |
| img | 禁止されています。代わりにamp-img要素を利用します。 |
| video | 禁止されています。代わりにamp-video要素を利用します。 |
| audio | 禁止されています。代わりにamp-audio要素を利用します。 |
| iframe | 禁止されています。代わりにamp-iframe要素を利用します。 |
| frame | 禁止されています。 |
| frameset | 禁止されています。 |
| object | 禁止されています。 |
| param | 禁止されています。 |
| applet | 禁止されています。 |
| embed | 禁止されています。 |
| form | amp-formのライブラリを読み込む必要があります。 |
| input | type属性がimage、button、password、fileは禁止されています。 |
| style | head要素内のstyle要素には、amp-custom属性を付けて下さい。 |
| link | rel属性には、microformats.orgに登録されている値を指定できます。ただし、stylesheet(許可されたカスタムフォントを除く)、preconnect、prerender、prefetchは禁止されています。 |
| meta | http-equiv属性は禁止されています。 |
| a | href属性はjavascript:で始めてはいけません。target属性は_blankでなければいけません。 |
属性の制限事項
タグと同様に、属性にも一部の制限があります。
- style属性は使用できない。
xml:lang、xml:baseなど、XML関連の属性は使用できない。onclick、onchangeなど、onで始まる全ての属性は使用できない。- id属性、class属性では、
-amp-、またはi-amp-を含む値は使用できない。ただし、一部のコンポーネントではカスタマイズが許可される場合がある。
スタイルシートの制限事項
タグと同様に、属性にも一部の制限があります。
- style要素にはamp-custom属性を付けなければいけない。
- スタイルシートの内容は、50,000byte(50KB)以内に抑えなければいけない。
- @-rulesは、@font-face、@keyframes、@media、@supports以外は使用できない。
- 修飾子の
!importantは使用できない。 - behaviorプロパティ、-moz-bindingプロパティ、filterプロパティは使用できない。
- overflow、overflow-x、overflow-yに
auto、scrollを指定してはいけない。AMPでは、ユーザーがコンテンツにスクロールバーを持たすことができない。
カスタムフォント
AMPでは許可されたカスタムフォントを利用できます。下記はその一覧です。これらのホスト以外から読み込もうとすると、エラーとなりページが表示されないのでご注意下さい。
| サービス名 | ホスト |
|---|---|
| Google Fonts | https://fonts.googleapis.com/ |
| Font Awesome | https://maxcdn.bootstrapcdn.com/ |
| Typography.com | https://cloud.typography.com/ |
| Fonts.com | https://fast.fonts.net/ |
次のようにlink要素で読み込んで下さい。
カスタムフォントの使用例
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- FontAwesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">トップニュース
AMPページに手を加えることで、Googleの検索結果の上部に表示されるカルーセル(トップニュース)の掲載候補にすることができます。この章ではその条件を説明します。
- AMP 対応のトップニュース
- Googleによる、トップニュース(カルーセル)に掲載されるための条件の説明。
JSON-LD
カルーセルに加わるにはJSON-LDによる構造化データ(schema.org)のマークアップが必要です。これは、定められた形式であなたの記事がどういった内容を含んでいるのかをGoogle側に伝える手段です。
テンプレート
JSON-LDのテンプレートを用意しました。AMP版HTMLのテンプレートのtype=application/ld+jsonのscript要素を、これに差し替えて下さい。必要な部分(ハイライト)だけ環境に合わせて変更すれば大丈夫です。
トップニュース対応のJSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle" ,
"mainEntityOfPage": {
"@type": "WebPage" ,
"@id": "https://syncer.jp/Web/AMP/"
} ,
"headline": "記事のタイトル" ,
"image": {
"@type": "ImageObject" ,
"url": "https://cdn.syncer.jp/Web/AMP/cover-l.png" ,
"height": 320 ,
"width": 800
},
"datePublished": "2017-08-16T00:00:00+0900" ,
"dateModified": "2017-08-23T00:00:00+0900" ,
"author": {
"@type": "Person" ,
"name": "Yuta Arai"
},
"publisher": {
"@type": "Organization" ,
"name": "SYNCER" ,
"logo": {
"@type": "ImageObject" ,
"url": "https://cdn.syncer.jp/asset/logo/publisher.png" ,
"height": 60 ,
"width": 600
}
},
"description": "記事の簡単な紹介文。"
}
</script>- @type
- ページの種類。ニュース記事なら
NewsArticle、ブログ記事ならBlogPosting。 - mainEntityOfPage.@id
- AMP版ではなく、通常版のURL。
- headline
- ページのタイトル。
- image.url
- アイキャッチ画像のURL。横幅が696px以上でなければいけない。ベクター(svg)ではなく、ラスター(png、jpg、gif)でなければいけない。
- image.height
- アイキャッチ画像の高さ。
- image.width
- アイキャッチ画像の横幅。696px以上でなければいけない。
- datePublished
- ページの公開日時。ISO 8601の表記でなければいけない。
- dateModified
- ページの最終更新日時。ISO 8601の表記でなければいけない。更新されてない場合は省略していい。
- author.name
- ページの著者名。ペンネームでも問題ない。
- publisher.name
- ページを配信する組織名。企業でなければウェブサイト名でいい。
- publisher.logo.url
- 組織のロゴ画像のURL。サイズは横幅が600pxちょうど、または高さが60pxちょうどでなければいけない。また、横幅が600px以上、高さが60px以上になってはいけない。。
- publisher.logo.height
- ロゴ画像の高さ。推奨は60px。
- publisher.logo.width
- ロゴ画像の横幅。推奨は600px。
- description
- 記事の簡単な紹介文。いないとは思うが全文を含める必要はない。
日時の形式
日時はISO 8601の規格に則った表記でなければいけません。PHPで出力するには、date関数にDATE_ISO8601というフラグメントを用いることで簡単に出力できます。例えば、2017年8月23日の20時41分を日時として指定したい場合は次の通りです。PHP以外にも各プログラム言語にはこういった関数が用意されているはずです。
PHP (ISO 8601を動的に出力する例)
<?php
// ISO 8601で出力
echo date( DATE_ISO8601, strtotime( "2017-08-23 20:41" ) ) ;
// 結果
// [2017-08-23T20:41:00+0900]と出力されるJSONの検証
構造化データに間違いがないか確認するには、Googleが提供する検証ツールが便利です。
- 構造化データ テストツール
- Googleが提供するウェブツール。構造化データのエラーチェックができます。
- エラーがない場合、「エラーなし」と表示されます。
- エラーがある場合、原因が表示されます。
画像
トップニュースに掲載されるには、アイキャッチ画像とロゴ画像を用意しなければいけません。
アイキャッチ画像
JSON-LDのimage.urlには、アイキャッチ画像を指定する必要があります。下記の条件を満たして下さい。
- ベクター(svg)ではなく、ラスター(png、jpg、gif)でなければいけない
- 横幅が696px以上でなければいけない。
ロゴ画像
JSON-LDのpublisher.logo.urlには、組織のロゴ画像を指定する必要があります。下記の条件を満たして下さい。サイズをちょうど600x60にするのが理想ですが、それが難しい場合は高さを60pxに合わせるのが推奨されています。
- ベクター(svg)ではなく、ラスター(png、jpg、gif)でなければいけない
- 横幅が600pxちょうど、または高さが60pxちょうどでなければいけない。
- 横幅が600pxを、高さが60pxを超えてはいけない。
- 全体の高さを60pxとした場合、画像(48px)の上下それぞれに6pxの余白をとることが推奨される。見本の場合は
SYNCERの高さが48pxで、上下に6pxずつ余白(白背景)がある。
コンポーネント
AMPに用意されているコンポーネントをまとめてあります。これらを利用することで、JavaScriptを使用できないAMPでもカルーセルやサイドバー、ライトボックスなどのUIを実現できます。
| コンポーネント名 | 説明 |
|---|---|
| amp-access | 勉強中…。 |
| amp-access-laterpay | 勉強中…。 |
| amp-accordion | アコーディオンを設置する。 |
| amp-ad | 広告を表示する。 |
| amp-analytics | 勉強中…。 |
| amp-anim | GIF画像を表示する。 |
| amp-animation | 勉強中…。 |
| amp-apester-media | Apesterのコンテンツを埋め込み表示する。 |
| amp-app-banner | 勉強中…。 |
| amp-audio | 音声プレーヤーを表示する。 |
| amp-bind | 勉強中…。 |
| amp-brid-player | Brid.tvの動画を埋め込み表示する。 |
| amp-brightcove | Brightcoveの動画を埋め込み表示する。 |
| amp-carousel | カルーセルを設置する。 |
| amp-dailymotion | Dailymotionの動画を埋め込み表示する。 |
| amp-dynamic-css-classes | 勉強中…。 |
| amp-experiment | 勉強中…。 |
| amp-facebook | Facebookのコンテンツを埋め込み表示する。 |
| amp-fit-text | テキストのサイズをフィットさせる。 |
| amp-font | フォントの読み込みを制御する。 |
| amp-form | 勉強中…。 |
| amp-fx-flying-carpet | フライングカーペットを設置する。 |
| amp-gfycat | Gfycatの画像を埋め込み表示する。 |
| amp-google-vrview-image | 勉強中…。 |
| amp-hulu | Huluの動画を埋め込み表示する。 |
| amp-iframe | インラインフレームを設置する。 |
| amp-image-lightbox | 画像用のライトボックスを設置する。 |
| amp-img | 画像を表示する。 |
| amp-instagram | Instagramのコンテンツを埋め込み表示する。 |
| amp-install-serviceworker | 勉強中…。 |
| amp-jwplayer | JW Playerの動画を埋め込み表示する。 |
| amp-kaltura-player | Kalturaの動画を埋め込み表示する。 |
| amp-lightbox | ライトボックスを設置する。 |
| amp-list | 勉強中…。 |
| amp-live-list | 勉強中…。 |
| amp-mustache | 勉強中…。 |
| amp-o2-player | AOL O2Playerの動画を埋め込み表示する。 |
| amp-ooyala-player | Ooyalaの動画を埋め込み表示する。 |
| amp-pinterest | Pinterestのコンテンツを埋め込み表示する。 |
| amp-pixel | GETリクエストを送信する。 |
| amp-playbuzz | Playbuzzの動画を埋め込み表示する。 |
| amp-reach-player | Beachfront Reachの動画を埋め込み表示する。 |
| amp-reddit | redditのコンテンツを埋め込み表示する。 |
| amp-selector | フォームの選択肢を表示する。 |
| amp-share-tracking | 勉強中…。 |
| amp-sidebar | サイドバーを設置する。 |
| amp-social-share | ソーシャルシェアボタンを設置する。 |
| amp-soundcloud | SoundCloudの音楽を埋め込み表示する。 |
| amp-springboard-player | Springboardの動画を埋め込み表示する。 |
| amp-sticky-ad | 固定追尾広告を表示する。 |
| amp-twitter | Twitterのツイートを埋め込み表示する。 |
| amp-user-notification | 勉強中…。 |
| amp-video | 動画プレーヤーを表示する。 |
| amp-vimeo | Vimeoの動画を埋め込み表示する。 |
| amp-vine | Vineの動画を埋め込み表示する。 |
| amp-viz-vega | Vegaのデータビジュアライゼーションを表示する。 |
| amp-youtube | Youtubeのコンテンツを埋め込み表示する。 |
エラーチェック
作成したHTMLがAMPのルールに違反していないかを調べるには、いくつかの方法があります。
コンソールで確認
一番簡単なのは、ブラウザの開発者ツールで確認する方法です。次のフラグメントを付けて、AMPページを開いて下さい。
エラーチェック用のフラグメント
https://demo.syncer.jp/563/#development=1[LINK]すると、コンソールにチェック結果のメッセージが表示されます。AMP validation successful.のメッセージがあれば、エラーがない有効なHTMLということです。
- エラーがない場合、
AMP validation successful.のメッセージが表示されます。 - エラーがある場合、原因とリンクが警告として表示されます。
ウェブサイトで確認
AMP Projectが公式に提供しているThe AMP Validatorというサービスで確認できます。このサイトにURL、またはソースコードをコピーして下さい。手間ですが、エラーの位置が分かりやすいのでオススメです。
- The AMP Validator
- AMPが公式に提供している文法チェッカーです。
- エラーがない場合、Validation Statusが
PASSと表示されます。 - エラーがある場合、Validation Statusが
FAILと表示され、該当の行に原因が表示されます。
