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

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

AMP

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

検索結果で出てくるAMPのアイコン

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

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

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

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

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

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

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

AMPページのデザイン

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

AMPページのデザインカスタマイズ

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

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

AMPのページ

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

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

Googleアナリティクスの設定

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

AMP Analytics Options

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

Type:


googleanalytics

JSON Configuration:


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

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

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

AMPページの表示確認

AMPページを表示するURL

ブログ記事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以内にする必要があります。

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

AMPテストツールで確認

最後にGoogleが公開している「AMPテスト」ツールで確認してみました。

AMP テスト – Google Search Console

AMPテストの結果

HTMLに問題がなければ、「有効なAMPページです」と表示されます。

当面の課題

とりあえず、「AMP for WordPress」プラグインを使用すれば、あっという間にAMP対応できましたが、ただAMP対応しただけでは色々と困ることがあります。

  • SNSシェアボタン設置したい
  • 関連記事を表示したい
  • アドセンス広告を表示したい

これらのことを早急になんとかしないといけないのでもっと勉強します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.