
ページの爆速表示を実現する「AMP」の実装方法をカンタンに解説します!AMPとは?SEOに有利なの?など紹介しています。WordPressプラグインあり/なしの対応方法まで書いています!
目次
AMP(アンプ)とは?
AMP(アンプ)とは、「Accelerated Mobile Pages」の略で、モバイル端末でwebページを高速に表示するために、GoogleとTwitterが共同で進めているプロジェクトを意味します。つまり、「モバイルページ高速化」の取り組みのことです。

ページをAMP対応させることで、爆速で表示できるようになりユーザビリティの劇的な向上につながります。Googleは2016年内には、モバイルページの表示速度を、スマホ検索における順位決定の重要なシグナルに導入すると発表しており、AMP対応の重要性が一気に加速化しました。
AMP対応するとSEOに有利?
Googleは「AMPへの対応は検索順位に影響しない」と述べており、直接的なSEO効果は無いとされています。しかし、AMP対応することで検索結果での露出が増え、アクセスが多く集まることでサイトの評価が高まり、間接的に上位表示されやすくなります。
AMPの実装方法
最も基本的な「AMP HTML」のコードサンプルをご紹介します。
<!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": "ページタイトル",
"datePublished": "2017-07-10T13:50:40+09:00",
"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>
</body>
</html>
AMP HTMLの記述を解説していきます。
HTML文書の宣言
HTML文書の宣言は、HTML5と同じです。(doctypeは小文字・大文字どちらでもOKです。)
<!doctype html>
meta要素の指定
<head>要素内に、文字コードとビューポート(viewport)を指定します。※2つとも必須です。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
canonical属性タグの設定(URLの正規化)
AMPページを作ったら、canonical属性タグでURLの正規化を行います。ここには、本体ページのURLを記述します。
<link rel="canonical" href="本体ページのURL">
URLは絶対パス/相対パスのどちらでも大丈夫ですが、絶対パスだと確実です。
JSON-LDの指定
schema.orgのJSON-LDを指定することで、ページの内容を正しく検索エンジンに伝えることができます。※省略するとGoogleサーチコンソール内でエラーになるため、必須です。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "ページタイトル",
"datePublished": "2017-07-10T13:50:40+09:00",
"image": [
"logo.jpg"
]
}
</script>
各項目を説明していきます。
@context
"@context": "http://schema.org"
これは、「schema.orgに従って書くよ!」ということを伝えるための記述です。
@type
"@type": "NewsArticle"
schema.orgで定義される「型」をValueに記述します。
Valueに記述する型は、以下のサイトから確認できます。
schema.org 日本語訳 – 全ての階層
headline
"headline": "ページタイトル"
ここに、ページのタイトルを記述します。
datePublished
"datePublished": "2017-07-10T13:50:40+09:00"
ここに、投稿日(ISO8601)を記述します。
▼日時のフォーマット(ISO8601)
Format | Time zone | Sample |
---|---|---|
yyyy-MM-ddTHH:mm:ss | 日本標準時(JST) | 2017-07-10T13:50:40+09:00 |
~ | 協定世界時(UTC) | 2017-07-10T04:50:40Z |
image
"image": [
"logo.jpg"
]
ここに、アイキャッチ画像のパスを記述します。
amp-boilerplateの記述
決まり文句「amp-boilerplate」を記述します。下記はAMPが高速化を実現するために必要な記述です。
<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を稼働させるための、ライブラリを読み込みましょう。
<script async src="https://cdn.ampproject.org/v0.js"></script>
AMPの存在を伝える
AMP元となる本体ページに以下コード記述し、クローラーにAMPの存在を伝えましょう。※URLは相対パス/絶対パスどちらでもOKです。
<link rel="amphtml" href="AMPページのURL">
AMPで利用できるタグ
AMPのページで利用できるタグを紹介します。
タグ | 説明 |
---|---|
doctype | HTMLは<!doctype html>の宣言で開始します |
html | <html amp>というように、AMPを示す属性を付けます。 |
head | ヘッダ情報を含みます。 |
meta | 各meta要素を指定できます。charsetとviewportが必須です。※http-equivは禁止です。 |
title | ページのタイトルを指定します。 |
body | コンテンツ部分を含みます。 |
script | AMPのライブラリとJSON-LDを指定するため以外の仕様は、禁止されています。 |
a | href属性に「javascript:」を含める場合は「target=”_blank”」の記述が必須です。 |
p | 利用可能です |
button | 利用可能ですが、form要素の利用ができないので、使う機会はありません。 |
noscript | 利用可能です |
AMPで禁止されているタグ
AMPのページで禁止されているタグを紹介します。
タグ | 説明 |
---|---|
img | 代わりにamp-imgを利用して下さい。 |
video | 代わりにamp-videoを利用して下さい。 |
audio | 代わりにamp-audioを利用して下さい。 |
iframe | 代わりにamp-iframeを利用して下さい。 |
base | 禁止されています。 |
frame | 禁止されています。 |
frameset | 禁止されています。 |
object | 禁止されています。 |
param | 禁止されています。 |
applet | 禁止されています。 |
embed | 禁止されています。 |
form | 2016年2月現在、禁止されていますが、将来的に対応予定となっています。 |
input | 禁止されています。 |
textarea | 禁止されています。 |
select | 禁止されています。 |
option | 禁止されています。 |
AMP専用のタグ
AMPのページだけで使えるタグを紹介します。
タグ | 説明 |
---|---|
amp-img | 画像を表示する。imgタグの代わりに利用。 |
amp-video | 動画を表示する。videoタグの代わりに利用。 |
amp-ad | 広告を表示するタグです。Google Adsenseを含めて、一部の広告に対応しています。 |
amp-fit-text | |
amp-font | |
amp-carousel | カルーセルを表示します。 |
amp-anim | GIFアニメーションを表示します。 |
amp-facebook | Facebookの投稿、または動画を表示します。 |
amp-youtube | Youtubeの動画を表示します。 |
amp-twitter | Twitterのツイートを表示します。 |
amp-vine | Vineの動画を表示します。 |
amp-instagram | Instagramの写真、動画を表示します。 |
amp-pinterest | Pinterestの画像、ピンボタン、フォローボタンを表示します。 |
amp-iframe | |
amp-pixel | Google アナリティクスの設置に利用。 |
amp-audio | 音声を埋め込む。audioタグの代わりに利用します。 |
amp-lightbox | ライトボックスを表示します。 |
amp-image-lightbox | 画像専用のライトボックスを表示します。 |
AMPチェック
AMPが正しく設定できているかを検証するための、5つのチェック方法を紹介します。
- AMP Validator
- AMPテストツール
- Search Console
- Chromeのデベロッパー ツール
- 構造化データ テスト ツール
以上のツールを使うことでAMPの検証が行えます。内容が膨大になってしまうため、具体的な確認方法は「AMPを検証する5つのチェック方法」で紹介しています。
WordPressプラグインでAMP対応させる
AMPに対応させる便利なWordPressプラグインを「AMP対応させる優れたWordPressプラグイン5選!」で紹介しています。