1. Home
  2. 開発

WordPressをAMP対応化させてAdsenseとAnalyticsを設置する方法

スポンサード リンク
PR：当サイトの記事には一部広告が含まれています

このブログはWordPressで作成していますが、話題のAMP導入についてはしばらく様子を見ていました。

…が、どうやらデメリットが殆ど無いようなので、AMPに対応させてみました！

WordPressをAMP化させるにはプラグインを利用する方法と、自分でPHPをカスタマイズする方法があります。

今回はプラグインをインストールするやり方を選択し、設定も少しいじってみました。

更にAdsenseを表示させたり、GoogleAnalyticsを設置する方法もご紹介します！

プラグイン「AMP」を導入する

インストール

まずはWordPressをAMP対応させるために一番利用されている（？）プラグイン「AMP」をインストールします。

管理画面から「プラグイン」→「新規追加」→「AMPで検索」→「インストール」→「有効化」でOKです。（執筆時のバージョンは0.4.2でした）

おすすめプラグイン

設定方法

有効化した後に、1点だけ注意事項があります。

それはWordPressでパーマリンクを変更している場合、パーマリンクの設定をリフレッシュしてやる必要がある、ということです。

とは言ってもやり方は簡単で、管理画面から「設定」→「パーマリンク設定」→（何も変更せずに）「変更を保存」ボタンをクリックするだけです。

これでデータベースのパーマリンクの設定がリフレッシュされます。

※パーマリンクを変更していない場合はリフレッシュする必要はないはずです。

AMP化されているか確認

プラグインでのAMP対応はたったこれだけで終わりです！

では実際にちゃんとAMP化されているか確認してみましょう。

記事ページ（例えば http://barikanblog.com/mac-m4a-mp3-converter/ ）にアクセスして、ソースを確認してみます。

すると、</head>の直前に

<link rel="amphtml" href="http://barikanblog.com/mac-m4a-mp3-converter/amp/" />

というタグが追加されていました。

このタグの中にあるURL http://barikanblog.com/mac-m4a-mp3-converter/amp/ がAMP用のページになっています。（アクセスしてみてください。AMP用のページが開きます）

つまり、通常の記事ページのURLの後ろに/amp/を付けてアクセスしてやれば、AMP対応ページが表示されるということになります。

※WordPressでパーマリンクの設定を変更していないブログの場合は/amp/ではなく?amp=1になります。

実際にアクセスしてみるとこんな感じ↓

画面キャプチャ1

・
・

画面キャプチャ2

デザインはプラグインで用意されているものが反映されます。といってもご覧の通り、超あっさりした内容です。

ヘッダーメニューやサイド（ウィジェット）が無くなって、記事だけになっていますね。

ちなみに、このデザイン用テンプレートファイルは/wp-content/plugins/amp/templates/の中にあります。

ソースを確認してみる

AMP用に書き出されたページのソースを確認してみると、通常のページと比べて下記のような変更点が見られました。

  • <html>→<html amp>に変更
  • <script async src="https://cdn.ampproject.org/v0.js"></script>の追加
  • canonicalのURLには元記事のURLが指定されている
  • <style amp-boilerplate>…の追加
  • <script type="application/ld+json">…で構造化データを記述
  • <style amp-custom>…でCSSが直書きされている
  • 記事部分がAMP対応タグに書き換えられている
    • 画像のHTMLタグ<img>→<amp-img>など

細かい変更点はもっとありますが、AMP対応のために変更されてる主要部分は上記のような点になります。

これらについては、AMP公式サイトのドキュメントと見比べても、きちんと対応されているようです。

AMPをカスタマイズ

プラグインを導入するだけで終わった！と思っていたWordPressのAMP化ですが…いくつか気になる点がありました…

構造化データ テストツールでエラーが出る

Googleの構造化データ テストツールで先程の記事ページを確認してみると、下記のようなエラーが出ました。

構造化データのエラーチェック

エラー：「logo」フィールドの値は必須です。

これは構造化データでロゴが指定されてないよ！というエラーです。

そもそもプラグインではどの画像がロゴかなんて分かりませんので、ロゴを指定する機能がないのかもしれません（勝手な推測ですが）。

そこで、functions.php内でJSON-LDの構造化データにロゴを追加してみましょう。

function add_amp_json_metadata( $metadata, $post ) {
  $metadata['@type'] = 'NewsArticle';
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => get_template_directory_uri() . '/images/logo.png',
    'height' => 36,
    'width' => 270,
  );
  return $metadata;
}
add_filter( 'amp_post_template_metadata', 'add_amp_json_metadata', 10, 2 );

※add_amp_json_metadataは任意の名前です
※画像URLのパス、height、widthはご自分のロゴに合わせて変更してください

上記のように、構造化データ（リッチスニペット）を追加で有効にするためのメタデータの変更方法は、AMPのGitHubにあるマニュアルに詳しく載っていましたのでご参照ください。

警告：属性 image.width の値が無効です。

これは最初なぜ警告が出るのか分からなかったのですが、どうやらWordPressの記事のサムネイル画像の横幅が小さ過ぎる場合に「属性 image.width の値が無効です。」という警告が表示されるようです。

ちょっと気になったので、試しに大きい画像で上書きしてみると、この警告は表示されなくなりました。

テンプレート（デザイン）を変更する方法

「デザインはプラグインで用意されているものが反映されます」と言いましたが、そのテンプレートファイルを直接編集することで、デザインをカスタマイズすることもできます。

  • テンプレートのディレクトリ：/wp-content/plugins/amp/templates/

ただし、AMPプラグイン内のテンプレートファイルは、AMPプラグインが更新される際に新しいテンプレートに上書きされる可能性があります。（つまりカスタマイズしたものが元に戻ってしまう可能性があります）

そのため、プラグインのテンプレートを直接編集するのであれば、常にバックアップを取っておくことをおすすめします。

別のテンプレートを読む方法

プラグイン内のテンプレートを直接編集せずに、自分の使用しているテーマにコピーしてから、その中でテンプレートを編集する方法が下記のページで紹介されていました。

私は試していませんが、気になる方はチェックしてみてください。

Adsenseを表示させる

AMPへの対応で一番困るのがJavaScriptだと思いますが、Googleさんが推し進めているだけあって、既にAdsenseとAnalyticsは対応されています。

まずはAdsenseを表示させる方法について見てみましょう。

1.<head>でAMP用スクリプトを読み込む

AMPで呼び出すテンプレートの<head></head> タグ内に下記コード（JavaScript）を貼り付けます。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

2.レスポンシブ広告ユニットを作成する

Adsenseの管理画面にログインして、レスポンシブ広告ユニットを作成し、下記の2種類のコードをメモします。

  • サイト運営者ID（data-ad-client）
    • 例：ca-pub-1234567891234567
  • 広告ユニットID（data-ad-slot）
    • 例：1234567890

3.AMP用の広告コードを作成する

スクロールせずに見える範囲に配置する広告コード作成（推奨版）

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

※高さ100pxの広告になります
※data-ad-clientとdata-ad-slotを先程の自分のIDと置き換えます

スクロールしなければ見えない位置に配置する広告コード作成（推奨版）

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

※300×250の広告になります
※data-ad-clientとdata-ad-slotを先程の自分のIDと置き換えます

4.AMP用テンプレートに広告コードを配置する

上記3で作成したAdsenseの広告コードを、WordPressのAMP用テンプレートファイルに設置します。

先程も申し上げましたが、テンプレートファイルはAMPプラグインで用意されているものが利用されているので、その中の/wp-content/plugins/amp/templates/single.phpなどに設置すれば、Adsenseを表示させることができます。

※AMPプラグインが更新される際に新しいテンプレートに上書きされ、消える可能性がありますので、変更後のファイルのバックアップを取ることをおすすめします。

下記が実際にAMPページにAdsenseを表示した時の画面キャプチャになります。

Adsenseの配置

キャプチャでは広告は1つだけですが、ちゃんと下部（300×250）にも表示されています。

GoogleAnalyticsを設置する

GoogleAnalyticsを設置するためには、テンプレートのフッターなどを編集する方法もありますが、AMPプラグインのマニュアルで推奨されているようにfunctions.phpでamp_post_template_analyticsのフィルターフックを利用する方が良いでしょう。

具体的には下記のようなコードになります。

function add_analytics_for_amp( $analytics ) {
  if ( ! is_array( $analytics ) ) {
    $analytics = array();
  }
  $analytics['amp-ga'] = array(
    'type' => 'googleanalytics',
    'attributes' => array(
      // 'data-credentials' => 'include',
    ),
    'config_data' => array(
      'vars' => array(
        'account' => 'UA-XXXXX-Y'
      ),
      'triggers' => array(
        'trackPageview' => array(
          'on' => 'visible',
          'request' => 'pageview',
        ),
      ),
    ),
  );
  return $analytics;
}
add_filter( 'amp_post_template_analytics', 'add_analytics_for_amp' );

※add_analytics_for_ampは任意の名前です
※UA-XXXXX-Yはご自分のAnalyticsのコードに合わせて変更してください

上記のコードは一般的なページトラッキング用です。

その他、イベントトラッキング用などかなりの機能がサポートされていますので、詳しくは下記をご確認ください。

以上が、WordPressをAMP対応化させてAdsenseとAnalyticsを設置する方法です。

プラグインで簡単に対応して、サクッと終わるつもりが、色々と調べていて数時間掛かってしまいました…

Googleでは「AMPページはSEOには影響ない」と言っていますので、SEO対策としての意味はないかもしれませんが、検索結果の上部（AMP専用枠）に表示されることで、本当にアクセスアップに繋がるのでしょうか？？

今後、様子を見て変化があればまたお伝えしたいと思います。