WordPressのAMPプラグインでブログをAMP対応してみた

WEB 2018.07.22

最近、スマホで検索をした時に、カミナリみたいなアイコンが付いたページが表示されてるのをよく見かけます。

このカミナリのアイコンが付いている記事のリンクをタップしてみると、めちゃめちゃ高速でページが表示されます。
これは、「AMP（Accelerated Mobile Pages）」という、Googleが推進しているモバイルページを高速で表示させるためのプロジェクトです。

今回、試しにこのブログを「AMP」対応させてみました。

WordPressでは、AMPを簡単に実装できる「AMP for WordPress」というプラグインがあるので、それを使用して実装してみました。

1 AMPプラグインのインストールと設定
2 AMPページの表示確認
3 当面の課題

AMPプラグインのインストールと設定

AMPプラグインのインストール

プラグインの新規追加ページの検索欄から「AMP for WordPress」を検索し、「今すぐインストール」→「有効化」をクリックします。

AMPページのデザイン

管理画面のサイドメニュー「外観」→「AMP」を選択し、デザインをクリック。

　「ヘッダーテキスト色」、「ヘッダーの背景 & リンク色」と配色（ライト or ダーク）を変更できます。

変更ができたら、サイドバー上部の「公開」ボタンをクリックし、左上の「X」ボタンをクリックして閉じます。

ものすごくシンプルな見た目になりました。

関連記事の表示や、SNSのシェアボタン、Adsense広告が表示されなくなり、このままではちょっとまずいんじゃないか、と思いました。
とりあえず、今はあまり気にせずに他の設定などを進めます。

Googleアナリティクスの設定

管理画面のサイドメニュー「AMP」→「Analytics」を選択します。

入力欄の「Type:」と「JSON Configuration:」に下記を入力します。

Type:


googleanalytics

JSON Configuration:


{
  "vars":{
    "account":"UA-XXXXXXXX-X"
  },
  "triggers":{
    "trackPageview":{
      "on":"visible",
      "request":"pageview"
    }
  }
}

「UA-XXXXXXXX-X」の部分は自分のトラッキングIDを入力してください。

入力ができたら下にある「Save」ボタンをクリックします。

AMPページの表示確認

ブログ記事URLの末尾に「/amp/」と入力すると、AMPページが表示されます。
次は、AMPを正しく設定できているかを検証していきます。

Chromeデベロッパーツールで確認

URLの末尾に「#development=1」と追記してリロードします。

デベロッパーツールを開き（Option + Command + i）、上部のタブメニューの「Console」をクリックします。

「AMP validation successful.」と表示されていればOKです。

構造化データテストツールで確認

下記のリンク先で、検証したいAMPページのURLを入力します。

構造化データテストツール

1件エラーが出てました。
「logo」フィールドの値は必須です。とのこと。

functions.phpに下記の関数を追加しました。


add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );
function xyz_amp_modify_json_metadata( $metadata, $post ) {
    $metadata['publisher']['logo'] = array(
        '@type' => 'ImageObject',
        'url' => "ロゴ画像のパス",
        'width' => "ロゴ画像の幅",
        'height' => "ロゴ画像の高さ",
    );
    return $metadata;
}

ロゴのサイズは、高さ600px以内・幅60px以内にする必要があります。

これでエラーが解消されました。