そろそろ対応しなきゃ！WordPressサイトのためのAMPの基本と実装方法

2017年08月17日　08時00分更新

文●Jason Daszkewicz

ツイートする

グーグルが推進しているモバイル向けの高速化技術「AMP」、もう対応しましたか？　WordPressを利用しているサイトなら、意外なほど簡単に対応できます。

グーグルのAccelerated Mobile Pages（AMP、モバイル向け専用の高速ページ）プロジェクトは2016年2月24日に始まりました。何千もの開発者が参加者として名を連ね、無数のWebサイトがAMP版ページを用意して、多くの開発者がAMPを学んでいます。ここでは、WordPressでAMPを使う方法を学びます。

グーグルは真剣にAMPに取り組んでいます。検索エンジンのランキング基準の1つにして、多くのサイトにとってAMPが必要になるように仕向けました。まずは、グーグルのAMPプロジェクトの詳しい情報を紹介します。WordPressサイトでAMPを利用する方法も含まれます。

AMPとは？

AMPとは、モバイルブラウザー上でWebサイトを高速に読み込む、モバイル親和性を意図したフレームワークです。AMPはオープンソースの技術で、Webサイト運営者がモバイルでの表示速度とユーザー体験を改善できるように作られています。また、広告収入には影響しません。

経験豊富な開発者なら、ページ読み込みの最適化によって同様の改良ができるでしょう。AMPなら、モバイルレイアウト作成に時間と労力を裂かずに、簡単に最適化できるのです。

サイトのSEOランキングを上げるために残業しているなら、To-Doリストの1つにAMP化もあるでしょう。AMPページはランキングの上昇要因です。大企業がAMPを採用している大きな動機だと思います。

AMPプロジェクト

AMPは3つの主要部分から成ります。

AMP HTML
AMP JS（JavaScript）
AMP Cache（キャッシュ）

AMP HTML

AMP HTMLは、制限、カスタムタグ、カスタムプロパティが加わったHTMLのサブセットです。HTMLになじみがあれば適用するのは簡単です。なにかの問題に直面したら、AMP HTMLページの作り方で学ぶことをおすすめします。

AMP JS（JavaScript）

AMPでは、モバイルページ用に限られたJavaScriptを提供します。AMPにおけるJavaScriptでは、サードパーティーのJavaScriptは使えません。

AMP Cache（キャッシュ）

グーグルのAMP Chache（キャッシュ）はAMPページを配信するためのCDN（コンテンツデリバリーネットワーク）です。コンテンツデリバリーネットワークの主要な役割が、サイト閲覧者からより近いサーバーにリソースを置くことだと知っていると思います。AMPページ用にCDNが距離による遅延を最小限にして、読み込み時間を最小化します。

AMPによるSEO効果の有無

2016年にグーグルがAMPを開始した際、AdAge.comにグーグルのニュース・ソーシャルプロダクツ上級部長Richard Gingrasのインタビューが掲載されています。この中で、AMPはランキングの直接の要素ではなく、検索結果に直接的な影響はないと述べています。さらにこう付け加えています。「そのほかの検索ランキングシグナルもすべて満たされなければなりません」。

この説明のあとのセリフで、すべてが明確になります。「もしも速度以外のほかのシグナル要素が同じスコアの2つの記事があったとすれば、速いほうを上にします。ユーザーにとってそのほうが良いからです」。

グーグルでさえAMPのSEO効果を否定していません。SEOにおいて、速度は常に影響する要素です。高速であることでAMPサイトがより多くクリックされ、直帰率がより低くなれば、優れたユーザーエクスペリエンスによって確実に上位表示されるでしょう。

WebサイトをAMPにする方法

Webサイトに2通りの記事を作ります。通常のWebブラウザー用の元記事と、モバイルユーザーに向けたAMP版の記事です。

AMPではフォーム要素やサードパーティー製のJavaScriptが使えません。通常の方法では問い合わせフォームやコメント欄は設置できません。AMPはコンテンツ閲覧に特化しています。

サイトのテンプレート全体を書き直して制約に対処する。たとえばAMPページのCSSはインライン記述し、かつページサイズが50kb以下。またフォントの高速読み込みのため、amp-fontエクステンションを使うことで効率化する
画像にはamp-img要素を使い正確な幅と高さを指定する。GIFアニメなら別途amp-anim拡張コンポーネントを使う
動画には2つの選択肢があり、1つはamp-videoという、埋め込み動画用のカスタムタグの利用。YouTube動画を埋め込むなら、amp-youtubeという専用タグを使う
スライドを埋め込むにはamp-carouselを使う。加えて、画像にライトボックス（サムネイルの拡大表示機能）を使うならamp-image-lightboxを使う
Twitter、Facebook、Instagram、Pinterest、Vineなどのソーシャルメディア・プラットホームの埋め込みは、それぞれに用意されたコンポーネントを使用する
すべての準備が整い、AMPページが完成したら、Googleに通知する。メインページに、AMPページの情報を記載したタグを加える（<link rel="amphtml" href="http://www.yourblog.com/blog-post/amp/">）。同時に、AMPページにはカノニカル（正規ページを示す）タグで通常のメインページを示す（<link rel="canonical" href="http://www.yourblog.com/blog-post/">）

AMPタグおよびAMPのSchema.orgメタデータはこちらを見てください。Schema.orgメタデータとは「自分のコンテンツをグーグル検索のニュース一覧のデモに表示するための必要事項」です。Google AMPを成功するなら、スキーマを正しく記述します。

AMPページでGoogle アナリティクスを使う

GoogleアナリティクスはAMPでも使えます。AMPのアナリティクスはとても賢く、いくつもの分析用トラッカーによりサイトが遅くならないよう、「1度の計測で、大勢の役に立つ（Measure Once, Report to Many）」考えで動作します。AMPサイトでGoogle アナリティクスを使うには2つの方法があります。

amp-pixel要素：GETリクエストを発行してページ閲覧数を数えるシンプルなタグ。計測タグ（トラッキングピクセル）に似ている
amp-anayltics拡張コンポーネント：amp-pixelよりも高度。AMPページ上のどんなアクティビティも計測可能。JSONコンフィグファイルを使って、計測要素、リポートの送信先など詳細を設定できる

WordPressのWebサイトでAMPを使う方法

AMPを使う簡単な方法は、WordPressサイトに適用することです。Automattic/WordPressが開発した公式プラグインを使います。

手順1：WordPressプラグインのインストール

上記のリンクからプラグインをダウンロードし、WordPressサイトにインストールします。インストール後は、記事ページに「/amp/」を加えるだけです。良いパーマリンクが設定できていないなら、?amp=1はいかがでしょう。

手順2：バリデーションと設定変更

Googleサーチコンソールは、プラグインにより追加したメタタグを基にAMP版の記事を拾います。問題は、変更を検知するには数日かかることです。

この状況を改善するために、Chromeの検証機能とサーチコンソールを組み合わせて使います。Chrome検証機能は、ChromeでAMPページを開き、URLの末尾に#development=1を足します。それからControl+Shift+IキーでChromeデベロッパーツールを開きます。

ページを更新すると、「AMP Validation Successful（AMPのバリデーション成功）」、または修正すべき問題の詳細リストを表示します。

プラグインのインストールだけでは十分ではなく、ページを開いて上記の手順を繰り返し、データを検証しなければなりません。

手順3：スキーマ記述の検証

AMPページのスキーマ記述の検証が重要だと述べました。スキーマ・マークアップを検証するには、Googleの構造化データテストツールを使います。WordPressではロゴの表示に問題が発生するので、いくつか変更します。

Pluginsから「Editor」をクリックし、「AMP」を選択します。以下の部分をエディタ内で変更します。

変更前

if ( $site_icon_url ) {
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => $site_icon_url,
    'height' => self::SITE_ICON_SIZE,
    'width' => self::SITE_ICON_SIZE,
  );
}

変更後

$metadata['publisher']['logo'] = array(
  '@type' => 'ImageObject',
  'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
  'height' => 60,
  'width' => 170,
);

URL内でロゴの在り処を指定して、高さと幅をそれぞれ指定します。

手順4：AMP WordPressプラグインとGoogle アナリティクスとの連携

個人的には、統計データの収集はGoogle アナリティクスが好みです。AMP WordPressプラグインではamp-analyticsを使えないので、簡単な方法で設定します。

AMP WordPressプラグインをGoogle アナリティクスと連携させるためには、Plugins→Editor→AMPを選択し、以下のコードを末尾に追加します。

add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <?php
}

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <amp-analytics type="googleanalytics" id="analytics1">
    <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  ←(YOUR GOOGLE ANALYTICS PROPERTY ID)
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    </script>
    </amp-analytics>
    <?php
}

UA-XXXXX-Yの部分を自分のGoogle アナリティクスのプロパティIDに変更してください。

変更を加えて、再度AMPページを前述の手順で検証すると、統計データを収集できます。