公開日: WordPress

WordPressでAMP対応して、Googleアナリティクスを設定する → プラグイン「AMP for WordPress」

AMPとは?

「iphone」で検索した場合の結果画面

AMPは、Accelerated Mobile Pagesの略。詳細はウィキペディア(Accelerated Mobile Pages)で確認したりググって調べる。

実例としては、Googleのオーガニック検索結果で検索結果の上部に表示されるエリア(参考:キャプチャは、「iphone」で検索した場合の結果画面)。これはAMP対応していないと表示されることはない。逆にいえばAMP対応することで、検索結果上部に表示される可能性が0ではなくなるとも言える。

実装するには、記事ページを作成した際に、それとは別にAMP用のHTMLファイルを用意する必要がある。テンプレートを自前で用意するのもアリだが、WordPressを使ってることもあり、プラグインを使ってサクッと終わらせてしまおうと思う。

導入の流れ

AMPの設定

  1. プラグイン「AMP for WordPress」をインストールし、有効化する
  2. AMPが正しく設定されたか確認する
  3. ツールを使ってテストする

Googleアナリティクスの設定

  1. GoogleアナリティクスでAMP用のプロファイルを作成する
  2. WordPressの管理画面でプロファイルIDを紐付けする
  3. Googleアナリティクスのリアルタイムでログが集計されることを確認する

1. プラグイン「AMP for WordPress」をインストールし、有効化する

  1. 「プラグイン」を選択し、「新規追加」を選択する
  2. 入力フォームに「AMP for WordPress」と入力する
  3. 検索結果に表示される「AMP for WordPress」の「インストール」を選択する
  4. インストール後、「有効化」を選択する

2. AMPが正しく設定されたか確認する

記事URLの末尾に「/amp」もしくは「?amp」を付与してページを確認します。

例) 記事URLが、https://www.simplesimplesdesign.com/excerpt/dairy/single-lens-film-beginners.html であれば、https://www.simplesimplesdesign.com/excerpt/dairy/single-lens-film-beginners.html?amp とURLを変更して確認します。下記の画像は自動はこの例でAMP HTMLが自動で生成された画面です。


3. ツールを使ってテストする

GoogleのAMPテスト

https://support.google.com/webmasters/answer/7320015?hl=ja&ref_topic=4589289

  1. 「AMPテストを起動」を選択する
  2. 検証したいAMPのURLを入力する
  3. 「テストを実行」を選択する
  4. AMPファイルとしてOKだが、エラーが表示されてしまったので、「構造化データをテスト」を選択する

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

「logo」フィールドの値は必須です。とエラー表示されているが、このエラーを放置してしまうと、Google検索結果の上部に表示されないらしい。それは困るので修正する。

修正するには、functions.php の中に2枚の画像を設定します。

functions.php
/**
* AMPの Google構造化データテストツールで「「logo」フィールドの値は必須です。」が表示された場合
*/
function amp_modify_json_metadata( $metadata, $post ) {
$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => “https://www.simplesimplesdesign.com/wp-content/themes/allinthemind/assets/amp.png“,
‘width’ => “238px“,
‘height’ => “60px“,
);
$metadata[‘image’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => “https://www.simplesimplesdesign.com/wp-content/themes/allinthemind/assets/ogp.png“,
‘width’ => “1200px“,
‘height’ => “630px“,
);
return $metadata;
}
add_filter( ‘amp_post_template_metadata’, ‘amp_modify_json_metadata’, 10, 2 );

画像のパスと画像の幅・高さは適時修正が必要。$metadata[‘publisher’][‘logo’]の画像は、横600px以内、高さ60px以内である必要があるそうです。また、$metadata[‘image’]の画像は、横659px以上である必要があるそうです。これは記事に画像がない場合に代替画像として使用されるそうです。

もう一度テストしてみると、無事にエラーが消えました!

以上でAMPの設定は終わり。続いてGoogleアナリティクスの設定。

1. GoogleアナリティクスでAMP用のプロファイルを作成する

Googleアナリティクスを開く。

  1. 「管理」を選択する
  2. すでにアカウントを作成済みであれば、該当のアカウントを選択する。はじめてGoogleアナリティクスを利用する場合は「アカウントを作成」を選択する
  3. AMP用に「プロパティを作成」を選択する
  4. 必要項目を入力して「トラッキングIDを取得」を選択する
  5. トラッキングIDは後ほどWordPressの管理画面で利用するのでコピーしておく

2. WordPressの管理画面でプロファイルIDを紐付けする

  1. 「AMP」を選択し、「Analytics」を選択する
  2. Typeに任意のワードを入力する
  3. JSONを入力するaccountの値は、Googleアナリティクスの設定で取得したトラッキングIDを入力する

    {
    “vars”:{
    “account”:”UA-XXXXXX-XX
    },
    “triggers”:{
    “trackPageview”:{
    “on”:”visible”,
    “request”:”pageview”
    }
    }
    }

  4. 「Save」を選択する

3. Googleアナリティクスのリアルタイムでログが集計されることを確認する

  1. Googleアナリティクスを開き、先に設定したプロパティのリアルタイムを開く
  2. AMPファイルへアクセスし、ログが取得されることを確認する

これにて完了。

最近の記事

在宅で仕事ができない人へのアドバイス

新型コロナウイルスが世界に猛威を振るっている。在宅でのリモートワークが推奨され、家で仕事している人が増えているとのこと。 そんな中、なぜか家だと仕事にな・・・

徒然なままに

このサイトのリニューアル2020

主な変更点 ・3つのブログ(「0から目指すWebマスター」「シンプルシンプルデザイン」「シンプルシンプルデザイン代表ブログ」)を一つにまとめました ・・・

更新履歴

久しぶりにリニューアルしました

3つのブログを一つに Web業界に足を踏み入れたのが2006年夏。完全アナログ人間がブラインドタッチからのスタート。そこで「0から目指すWebマスター」・・・

お仕事・制作日記

サイトのURLを変更して、管理画面が表示されなくなった場合 → functions.phpの一時修正

DBを修正する必要はなかった! WordPressの管理画面で、メニューの「設定」→「一般」にある、WordPress アドレス (URL) を変更する・・・

WordPress

元号のjsonファイルを作ってみた

制作経緯 4/1 新しい元号が「令和」と知る。これまでの元号って何だろうとWikipediaで調べる。4/2 ある海外の方が「令和の前って江戸時代とか縄・・・

お仕事・制作日記

カラーグレーディング

先日、CP+2019 で行われた、鈴木 佑介(映像作家)さんによるプレゼン「動画もRAWの時代。BenQで作るカラーグレーディング環境」が、ちょうど気になって・・・

学びの部屋

「しょぼい起業で生きていく」を読んで

書籍「しょぼい起業で生きていく」を読んで、共感したことや改めての気づきや新たな発見を書き残しておく。 「嫌なことからは逃げろ」 「やりたくないこと・・・

起業関連の本

えっ!?Yahooの検索結果から遷移しようとしたら全く違うサイトにリダイレクトされてしまった…

直接URLを入力したり、Googleの検索結果からの遷移時にはまったく問題なかったが、Yahoo Japanの検索ボックスで検索して表示される検索結果一覧から・・・

お仕事・制作日記

CP+2019に行ってきた

開催日 2019年2月28日〜3月3日会場 パシフィコ横浜 / 大さん橋ホール CP+(シーピープラス)とは? CP+はカメラや関連機器の一般ユー・・・

参加セミナー・イベント

「外壁塗装業の集客できるホームページ制作ならゆいまるWeb」の山縣力也さんと座談会

ぼくたちの共通点→「集客」 仕事内容を考えたとき、ぼくたちの共通点は「集客」を意識していることです。山縣力也(以降、やまけん)さんは、外壁塗装業、主に下・・・

対談

人気の記事

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・

JavaScript

背景画像の拡大・縮小 → background-size !

W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加され・・・

CSS

イラストレーターでレイヤーごとにPNGで書き出す

フォトショップでは、レイヤーごとに書き出す設定がありますが、イラストレーターにはありません。そこでレイヤーごとにPNGファイルを書き出すためのスクリプトファイル・・・

Illustorator

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript

WP_Queryを使って絞り込み検索するのにコレは便利!

めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・

WordPress

Advanced Custom Fields を使った条件分岐(セレクトボックス、チェックボックス、ラジオボタン、真偽)のテンプレート記述方法

前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・

WordPress

[連想配列]2つ以上のキーで並び替えをする

2つ以上のキーで連想配列を並び替えしたいときの備忘録。 サンプル配列 var arr = []; arr.push(["5", "4", "たちつて・・・

JavaScript

アーカイブページでカスタムフィールドやタクソノミーで絞り込みした状態でリスト表示する

<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・

WordPress

http://localhost:8888/ → http://localhost/

http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・

MAMP

WordPressのカテゴリー一覧ページでカテゴリー名とスラッグを取得する → get_queried_object()

やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・

WordPress

思考と学び対談WordPressでAMP対応して、Googleアナリティクスを設定する → プラグイン「AMP for WordPress」 | シンプルシンプルデザイン