webマーケティング手法やseo対策を発信するブログ!ウェブマ

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

amp_main

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

AMP(アンプ)とは?

AMP(アンプ)とは、「Accelerated Mobile Pages」の略で、モバイル端末でwebページを高速に表示するために、GoogleとTwitterが共同で進めているプロジェクトを意味します。つまり、「モバイルページ高速化」の取り組みのことです。

AMP(アンプ)

ページを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のページで利用できるタグを紹介します。

タグ 説明
doctypeHTMLは<!doctype html>の宣言で開始します
html<html amp>というように、AMPを示す属性を付けます。
headヘッダ情報を含みます。
meta各meta要素を指定できます。charsetとviewportが必須です。※http-equivは禁止です。
titleページのタイトルを指定します。
bodyコンテンツ部分を含みます。
scriptAMPのライブラリとJSON-LDを指定するため以外の仕様は、禁止されています。
ahref属性に「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が正しく設定できているかを検証するための、4つのチェック方法を紹介します。

  • AMP Validator
  • Search Console
  • Chromeのデベロッパー ツール
  • 構造化データ テスト ツール

以上のツールを使うことでAMPの検証が行えます。内容が膨大になってしまうため、具体的な確認方法は「AMPを検証する4つのチェック方法」で紹介しています。

WordPressプラグインでAMP対応させる

AMPに対応させる便利なWordPressプラグインを「AMP対応させる優れたWordPressプラグイン5選!」で紹介しています。

この記事がお役に立ったらシェアしてね!

気に入ったらいいね!してね

関連記事

カテゴリー

人気の記事

新着の記事