AMP HTML導入ガイド～作り方をカンタンに解説！～

オススメ記事

ページの爆速表示を実現する「AMP」の実装方法をカンタンに解説します！AMPとは？SEOに有利なの？など紹介しています。WordPressプラグインあり／なしの対応方法まで書いています！

AMP（アンプ）とは？
AMP対応するとSEOに有利？
AMPの実装方法
AMPで利用できるタグ
AMPで禁止されているタグ
AMP専用のタグ
WordPressプラグインでAMP対応させる

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

出典：日時のフォーマット（ISO8601）

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	画像専用のライトボックスを表示します。