コラム
詳しく解説！WebサイトをAMPに対応させる方法！
AMPの基礎知識を紹介
まずはAMPの基礎知識から紹介します。すでに知っている方も、おさらいとして頭に入れておくと良いでしょう。
AMPとは
AMPは「Accelerated Mobile Pages」の略称で、直訳すると「加速化されたモバイル用ページ」という意味。つまり、モバイルページにおけるコンテンツ読み込みの高速化を実現するために、さまざまな技術が駆使されたHTMLページということです。一般的にはAMPと言うと、AMP HTMLというフレームワーク（手法）のことを指しています。
AMPを実際に体験
2016年から正式導入されているのですでに利用されている方も多いかと思いますが、改めて体験されたい方はスマートフォンでGoogle検索画面にアクセスし、「ニュース」などというキーワードを入力して検索してみて下さい。
以下のようなカミナリマークが付いているリンクがAMP対応されているページです。
（AMP版ページであることを示すカミナリマーク）
また、AMPを導入したイメージの解説動画もあります。英語ではありますが、分かりやすく説明されています。
スマホ検索が主流の時代
「スマホ時代」と称されている現在、日本国内のスマートフォン普及率は75％以上に到達し、ついにパソコンの普及率を追い抜きました。（※）
レストラン探しやショッピングなど、欲しい情報や物を手に入れるための主要ツールはスマートフォンへと変わり、スマートフォンを介してのWebサイト閲覧がスタンダードと化しています。
このように、モバイル市場が高まり続ける現代の流れにおいて、モバイルフレンドリーの進化系と言えるAMPは決して無視できない存在となっています。
※参照：総務省2017年調査
求められるスピード
溢れるほどの選択肢が揃っている現代において、次にユーザーが求めているのは圧倒的な質の高さと驚異的なスピード。ある調査結果によれば、モバイルサイトを利用する際コンテンツの読み込みに3秒以上かかると、40％のユーザーがそのサイトの閲覧を諦める傾向があるようです（※）。スピードに対するユーザーのジャッジはテクノロジーの進化とともにシビアになっており、現代のユーザーは欲しいコンテンツが瞬時に表示されることを求めています。
※参照：NEILPATEL調べ
AMPに対応する必要性
Webマーケティングにおいて、ユーザーエクスペリエンスの向上は常に欠かせない課題です。スピードに対し高いパフォーマンスを実現するAMP対応は、増大するスマホユーザーを満足させ、今後のビジネスチャンスの拡大を担う期待の星と言えるでしょう。
SEO効果が期待できる
また、ページをAMP対応にすることはSEO効果にもつながることをGoogleは言及しています。
『 読み込み速度はこれまでもランキングシグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。』（※）
これは、コンテンツの読み込みスピードとユーザビリティが強い関係にあるという研究結果を踏まえての判断のようです。実際に検索結果の上位にAMP対応のメディアを見かけることも増えてきました。
ただし、それはあくまでも「魅力的で検索クエリと関連性の高いコンテンツである」ということが前提です。中身の最適化を重視した上で、AMP対応による成果が期待できるでしょう。
※引用元：Google ウェブマスター向け公式ブログ「ページの読み込み速度をモバイル検索のランキング要素に使用します」
なぜAMPは高速表示できるのか
AMPの高速表示の実現には2つのメソットがあります。
まずは、仕様の制限です。AMPは「読み込みに時間がかかることは省く」ことを方針に、かなり限定的な仕様を採用しています。 例えば、非同期のJava Scriptのみを許容したり、全てのコンテンツのリソースサイズを静的に規定したりなどです。
次に、AMP Cacheというキャッシュの存在です。キャッシュ（Cache）とは、1度アクセスしたWebサイトのデータ（画像やデザイン情報など）を一時的に保存しておき、次回のアクセスで素早い表示を可能にするための仕組みのこと。AMP Cacheとは AMP対応のページにおけるキャッシュのことです。
AMPページはAMP Cacheにコンテンツが保存されています。これによりサイトの読み込みが省略され、コンテンツが高速で表示されるようになるという仕組みです。
Googleは以下のように解説しています。
『ニュース記事を提供しているメディアやコンテンツ提供者が、これまでのモバイル向けのウェブページに加えて、AMP HTML に準拠したウェブページを公開すると、Google のクローラーが AMP ページをキャッシュします。キャッシュされたコンテンツが検索クエリに関連が深いと判断された場合、検索結果にはキャッシュされたページの URL がリンクされます。検索結果に表示されたキャッシュ済みの AMP ページにユーザーがアクセスする場合には、キャッシュ済みのためコンテンツの取得までの時間が短く、また広告やアナリティクスといったタグは遅延読込されるため、記事の表示が瞬時に行われます。』（※）
引用元：Google Developers「Google モバイル検索が Accelerated Mobile Pages に対応しました」
AMP対応する方法
それではここからは、実際にAMPに対応する方法を紹介します。
AMPページの基本テンプレート
下記はAMPページの作成において必須のAMPタグでマークアップした、AMP HTMLコードが記述された基本テンプレートです。ほとんどは決まった記述なので、このままコピーペーストで使用することができます。
<!doctype html>
<html amp lang=”en”>
<head>
<meta charset=”utf-8″>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
<title>Hello, AMP</title>
<link rel=”canonical” href=”https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/”>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “NewsArticle”,
“headline”: “Open-source framework for publishing content”,
“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>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
先述の通り高速表示のために仕様を制限しているため、コンパクトな見栄えです。
AMPの対応方法1：AMP HTMLの宣言
スタートは<!DOCTYPE html>とし、HTMLを指定します。HTML要素は、AMPコンテンツであることを意味するカミナリマークを用いた<html ⚡> または <html amp>とマークアップし、AMP HTMLであることを宣言しましょう。日本語のサイトならlang属性はja、英語ならenです。
AMPの対応方法2：<head>タグと<body>タグ
<head>タグと<body>タグのマークアップはHTMLでは任意ですが、AMPでは必須です。
AMPの対応方法3：meta要素の指定
AMP HTMLでは文字コードとviewportの両方の指定が必須です。文字エンコードはUTF-8にのみに対応しているので、<meta charset=“utf-8″>となります。また、スポンシブ対応を可能にするためにviewportを指定し、ブラウザの表示領域を設定します。
AMPの対応方法4：ライブラリを読み込む
AMP JSライブラリの読み込みはページの高速表示を実行するために必須です。
<script async src=”https://cdn.ampproject.org/v0.js”></script>となります。
AMPの対応方法5：canonicalタグの設定
canonicalタグ（カノニカルタグ）も必須で、これはオリジナルページとの関連性を検索エンジンに伝えるためにあります。AMPページでの記述は<link rel=”canonical” href=“オリジナルページのURL”>となりますが、AMPページにオリジナルページがない場合はAMPページ自身のURLを指定します。
オリジナルページでの記述はcanonicalタグではなく、アノテーションタグ（link rel=”amphtml”）を用いて<link rel=”amphtml” href=“AMPのURL”>と記述し、同じく関連性を示します。
つまり、オリジナルページにはAMPページの存在があることを、AMPページにはオリジナルページの存在があることを、それぞれのタグを用いてGoogle クローラーに認識させるのです。
AMPの対応方法6：amp-boilerplate コードの指定
head要素に amp-boilerplate（AMPボイラープレート）のスタイルシートを含めることも、高速化に欠かせない記述です。
AMPの対応方法7：構造化データのマークアップ
構造化データ（JSON-LD + schema.org）はマークアップしなくても通常の検索結果には問題なく表示されます。しかし構造化データをマークアップすると、ページの構造を正確にクローラーに認識してもらえるようになります。これによってカルーセルやリッチリザルトなどのAMP専用のGoogle検索で優先的に配信されるようになり、ユーザーへの露出が増えることによってサイトへのアクセス数も増加することが期待されます。
AMPの対応方法8：その他の要素
ここまではAMPページの作成において、基本とされているルールをご紹介しましたが、AMPにはより高度な機能も備えられており、それらを追加することも可能です。広告や画像の表示機能、HTTPS化（SSL化）、レスポンシブデザインを行う機能など、速く美しくより高いパフォーマンスを提供することが可能になります。
詳しくはAMP「高度な AMP 機能を追加する」で説明されています。
WordPressサイトをAMP対応する方法
WordPressで作成されたサイトをAMP版に対応する方法は2種類あります。1つ目はAMPプラグインを利用する方法、2つ目はAMPプラグインは利用せずに手動でHTMLを記述する方法です。
プラグインを利用する最大のメリットは、「簡単であること」。プラグインを利用すれば約5分で、HTMLをAMPの書式に自動変換させることができます。しかし、簡単であるからこそと言うべきか、実はAMPプラグインは不完全でもあります。
ここではそれぞれの対応方法での手順、またその有効性について説明します。
プラグインでのAMP対応方法：インストール・有効化
まずはAMPプラグインをインストールし有効化します。有効化した後は、「設定」から「パーマリンク設定」、「変更を保存」を選択します。プラグインの設定はこれだけなので非常に簡単です。
プラグインでのAMP対応方法：AMP版ページの表示確認
インストールと有効化が完了したら、次は生成されたAMP版ページに実際にアクセスし表示確認を行います。オリジナルページのURL末尾に /amp/ を加えると（オリジナルURL/amp/）、ページにアクセスできることになっています。
プラグインでのAMP対応方法：AMP版ページの構成確認
問題なく表示されていることを確認できたら、次は構成がAMPページとして有効になっているかを確認します。
先ほどのオリジナルURL/amp/ の末尾に、さらに #development=1 を付加（オリジナルURL/amp/#development=1）。Windows の場合は「Ctrl + Shift + I」、Mac の場合は「Cmd + Opt + I」を押して、デベロッパーツールを表示させます（Google Chrome 利用時）。デベロッパーツールにて「Console」を選択して「AMP validation successful.」と表示されれば、AMPページとして構成されているということです。
AMP対応の確認方法はいくつかありますが、詳しくは後ほど解説します。
プラグインを利用せずにAMPに対応する方法
AMPプラグインがとても簡単であることはお分かり頂けたかと思います。しかし残念ながら、その性能は完璧とは言えません。実際に高い確率で、最後のデベロッパーツールでの確認作業でエラーが発生するでしょう。理由はAMP書式への「変換もれ」です。
AMPへの対応は「完璧」であることが求められているので、変換もれが起きがちであるプラグインに任せっきりでは、WordPressサイトを正確にAMP対応にすることはできないのです。
プラグインでエラーが出た際は、以下のような対応方法にスイッチしましょう。
- AMPの仕様を確実に理解した上で手動でHTMLを記述する
- 自身のWebサイトのHTML構造に最適化したプログラムを作成して自動化する
プラグインを利用せずに自身で対応する際の詳細はこちらのサイトが参考になります。
【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順
AMP対応チェックツールを導入しよう
AMPに対応したページがAMPのルールにしっかり沿っているか、確認できるツールがいくつかあります。
AMPテストで確認
Googleが提供している「AMPテスト」は、AMP対応できているか、検索結果では適切に表示されるか、修正点はどこかなどを知らせてくれるAMPの実装確認ツールです。
手順はとてもシンプルです。AMPテストを開き、「テストするURLを入力」という欄に確認したいAMPページのURLを入力するだけ。「有効なAMPページです」と表示されれば、HTMLに問題がないということ。実際の検索結果での表示を確認したい場合は「検索結果をプレビュー」をクリックします。
入力したURLがAMPページでなければ「AMP ページではありません」とエラーが表示され、HTMLに問題があれば「有効なAMPページではありません」の下の欄に修正が必要な箇所が示されます。
エラーに対する詳しい対応方法は Search console ヘルプ「AMPテスト」にて確認できます。
AMP Validator Chrome版で確認
AMP Projectがオフィシャルに提供しているのがChrome拡張の「AMP Validator」という文法チェッカーです。ブラウザで表示しているAMPページにバリエーションエラーがないかを一目で確認できます。
まずChrome ウェブストアから拡張機能のAMP Validatorをインストール、「AMP Validator を追加しますか」に対し「追加」を選択します。インストールが完了すると、右上のChrome ツールバーにAMPのカミナリマークのアイコンが表示されます。このAMP Validator のアイコンの色によって、AMPページの状態を判別することになります。それぞれの色は以下の状態を示します。
- ブルー：AMP対応ページがある（クリックするとAMPページへ飛ぶ）
- グレー：AMP対応ではない
- グリーン：AMPエラーはない
- レッド：AMPエラーがある
レッドのアイコンとともに表示されている数字はエラーの数を表しており、アイコンをクリックするとエラーメッセージが表れます。
AMP Validator Chrome版のエラーチェックに関する詳しい方法は「手軽にAMPエラーをチェックする方法（Chrome拡張「AMP Validator」の使い方）」が参考になります。
AMP Validator Web版で確認
AMP Validator のWeb版でAMP対応を確認する場合は、Chrome版のようにインストールを行う必要はなく、AMP ValidatorのWebページにアクセスすることになります。
AMP ValidatorのWebページを開いたら、上部のURL欄に対応確認を行いたいAMPページのURLを入力、または中央欄にソースコードを入力し右端にある「VALIDATE」をクリックします。エラーがない場合は「Validation Status」がグリーンで「PASS」と表示され、エラーがあれば「Validation Status」がレッドで「FAIL」となり、該当の行に原因が表示されます。
入力作業が少し手間ですが、エラーの位置が分かりやすいというメリットがあります。
Search console で確認
普段 Search consoleはサイトの管理や分析に利用しますが、AMP対応のチェックも行えます。
Search consoleにログイン後、ホームよりAMP対応を確認したいサイトをクリック。「検索での見え方」で「Accelerated Mobile Pages」を選択すると、AMPのインデックスの数、エラー内容をチェックすることができます。
まとめ
モバイルファーストが強まる流れにおいて、AMPに対応する必要性は今後も高まることが予測されます。ただし、AMPはユーザビリティの向上に一役買っている重要な存在と言えますが、それはあくまでも良質なサイトコンテンツありきのことです。サイト最適化の一手段として、AMPを有効に活用しましょう。
WEBでのお問い合わせはこちら
