【これで一発解決】Googleタグマネージャー、サーチコンソール AdSense & AMPの導入【コピペコード付き】
キャラ右

この記事は、サイト運営の目的をAdSense報酬の獲得だけに絞っているブログサイトの場合は、記事末の「コピペで使えるfunctions.php編集コード」以外は参考にならないかもしれません。

アドセンス報酬とビジネスサイトとしての売上や集客の最適なバランスを実現するためにも、サイトの公開とアクセス解析タグの設置作業、そしてアドセンスタグの設置作業、さらにはAMP導入作業をタイムロスなく実行する必要があります。

その手順は以下の通りになります。

サイトを立ち上げたら…

  1. Googleタグマネージャーを使ってアナリティクスを設置する
  2. サイトをアドセンスに登録する
  3. アドセンスとアナリティクスを結合する
  4. サーチコンソールへの登録
  5. Fetch as GoogleでGoogleに通知
    (2019年3月28日以降「Fetch as Google」は利用できなくなります)

続いて、AMPの導入です。

AMPプラグインを実行する前に…

  1. AMP用解析タグを設置する
  2. AMP用アドセンス自動広告タグを設置する
  3. AMPプラグインを実行する
  4. The AMP ValidatorでAMPの記述が正しいかを確認する。
  5. AMPスタイルを整える

キャラ左

AMP プラグイン実行後の③と④の間に⑤『AMP用スタイルを整える』を実行しても良いでしょう。本サイトでは、通常ページとAMPページで、ほとんど変わらないスタイルが適応されるようにスタイリングしています。

なぜ、上記で紹介している手順で実行するのかと言うと、AdSenseの審査が以前と比べて厳しくなっているほか、アドセンスの審査コードが自動広告の掲載コードになっているため、審査通過と同時に広告を掲載し報酬獲得の機会を逃さないのが第一の理由です。

それでは、各設定方法と手順に関してご案内いたします。記事末には、各種タグをfunctions.phpで管理するためのコピペで使えるコードをご紹介していますので、活用してください。

AdSenseやアクセス解析、AMP用タグの設置方法の違いで管理の手間が大きく変わる

アクセス解析タグやAdSense広告を表示させるためのコードの設置は、設置方法の違いひとつで、管理の手間が大きく変わってきます。

特に「アップデート」を繰り返すWordPressやTheme、プラグインでは、設定方法の違いで、その作業労力は3倍程度に膨れ上がります。

まずは、「なぜ、アクセス解析はGoogleアナリティクスではなく、タグマネージャーを使うのか」を抑え、各種タグの設置方法には3種類の方法があることをお伝えします。

そして、AMP導入の是非にも関わるAMPについて軽くおさらいをしておきましょう。

アクセス解析にGoogleアナリティクスではなくGoogleタグマネージャーを利用する利点

一般的にアクセス解析を導入する際には、無料で高機能なGoogleアナリティクスが採用されています。しかし、近年ではGoogleタグマネージャーを使ってGoogleアナリティクスを設定するサイトが増えています。

その理由は、追加の解析タグの導入する際に、サイトを編集することなく、タグマネージャー管理画面の作業だけで設置することができるからです。

ここがポイント

各種タグを追加するたびに、サイト自体を編集しているとテーマを変更した際やテーマのアップデートがあった際の作業工数が増えてしまうわけですね!

この労力を少しでも抑えるために、タグマネージャーは便利なんです。

また、編集作業ミスを犯すリスクを軽減するためにもGoogleタグマネージャーを利用するサイトが増えているようです。

キャラ右

Googleタグマネージャーには「プレビューモード」があるため、タグが正しく設置されているかどうかを公開前に確認できるのでミスを未然に防ぐことができるんですね!

タグ設置の方法は『サイトの立ち上げ時に実施するアドセンスの設定と各種解析コードの設置方法』でご案内しています。

各種タグの設定方法。そのメリットとデメリット

各種解析タグやアドセンスのタグをサイトに設置する方法には以下の3通りがあります。

  1. ThemeにGoogleアナリティクスやアドセンスの設置タグを入力するボックスが準備されている
    (AMPプラグインにも同様に専用のボックスが準備されている)。
  2. 各種タグを設置する該当箇所を管理しているphpファイルを編集して直接タグを書き込む
  3. functiopns.phpを使って一元管理する

このブログでも採用しているワードプレスTheme【賢威8】の場合なら、以下のように『埋め込みコードの設定』の項目から</head>直前に挿入するコード、<body>>直後に挿入するコード、</body>直前に挿入するコードの3種類が準備されていますので、直接phpファイルを編集する必要はそれほどありません。

賢威8はコードの埋め込みが楽チン!

私たちがあえて、このThemeに準備されているボックスを使わずに、functions.phpで管理している理由は、【賢威】以外のThemeを使っている読者の方にも、phpファイルを編集するリスクを抑えていただく方法をご案内するとともに、functions.phpを確認するだけで、どんな機能をサイトに追加しているのかを、すぐに確認できるようにするためです。

キャラ左

私たちは、異なるテーマで同一のオプション機能を追加して様々な検証を行っているので、このようなことが必要なわけなんです。

また、Themeの変更の際にも各種設定をfunctions.phpだけで管理できるのは、大きな作業労力の削減につながるため、このような方法を採用しています。

AMPページの管理に関して

AMPの導入には、このブログではWordPress公式AMPプラグインを採用しています。

WordPress公式AMPプラグイン

同じ賢威8で運営している比較サイトでは『AMP for WP – Accelerated Mobile Pages』を使って、その操作性などを比較しています。

AMP for WP – Accelerated Mobile Pages

キャラ右

両プラグインを使った使用感などは、また別の記事でご紹介いたします。

AMPはプラグインの有効化と同時にAMPページを自動で生成します。各ページのampバージョンは、通常ページに「/amp/」を加えると確認できますが、前述の通り、この「通常ページのURL+/amp/」で確認できるページは、あくまでも確認用のページです。

実際にアクセスされるのは、画像の通りGoogleのURL配下になります。

AMPページへのアクセスは検索経由のみ

また、AMPページの検索結果はモバイル検索時にのみ掲載されます。また、AMPページに掲載される各種リンクは、たとえそのリンク先のページにもAMPが導入されてあったとしても、通常ページのリンクしか掲載されません。

言い換えれば、AMPページへのトラフィックは「検索経由のみ発生」するわけです。

AMPを導入してもアクセスされるかはGoogle次第

AMPを導入したとしてもGoogleのクローラーが、そのAMPページの存在を知るまで、検索結果にAMPマークは付かず、AMPページにはアクセスが発生しません。また、AMPページは通常、従来のアクセス解析を行なっていたアナリティクス・プロパティで管理するのではなく、新たにAMPページ用のプロパティを開設して管理します。

また、AMPはモバイル端末での閲覧に際し、コンテンツを高速で表示させるための特別な仕様ですので、様々な制約が課せられています。

その制約の中で実現可能な収益拡大を目指すためにも、一通りの準備をAMPページ公開の前に実施し、すべてが整ってからAMPプラグインを有効にすることをお勧めしています。

知っ得メモ

AMP導入に際して必要となるアクセス解析タグやアドセンスのタグの設置方法にも、Themeで紹介した時と同様に「プラグイン自体にタグ設置のボックスが準備されている」こともあれば、プラグインファイルのphpを直接編集する方法とfunctions.phpで一元管理する3つの方法があります。

通常ページのタグマネージャー・タグをfunctions.phpファイルで管理する方法は、プラグインファイルを直接編集するリスクをなくす方法へと応用が利きますので、phpのお勉強のひとつとして取り組んでみてください。

私はエンジニアではなく、元々は実業団のスポーツ選手でした。そんなスポーツバカだった私でもphpの編集が少しずつできるようになったのは、このような「コピペで使えるサンプルコード」を提供してくれる記事があったり、そのコードの解説を丁寧に解説してくれたりする記事がネットにはたくさんあったからです。

今度は、その恩返しとして、少しでも使いやすく、わかりやすい解説ができればと、本サイトを立ち上げました。

それでは、理論や理屈はこのくらいにして、実質的な作業を進めるためのサンプルコードとその解説を行いましょう。

サイトの立ち上げ時に実施するAdSenseの設定と各種解析コードの設置方法

ここからは、以下の流れで解説します。

  1. アクセス解析用のアナリティクスをタグマネージャーで管理する方法
  2. AdSenseに登録する
  3. 通常ページのアナリティクスとアドセンスの結合方法
  4. AdSenseの審査に関して
    AdSenseの審査に関する詳細は、審査の合否を分ける検証が採れたので公式ブログにてご紹介することとなりました。
  5. 通常ページのGoogleアナリティクスとサーチコンソールの連携

上記の事前準備編を経てAMP導入方法を紹介し、通常ページの自動広告を任意配置広告へと変更する際に、オススメの広告掲載位置と種類をfunctions.phpにコピペで使えるコードと一緒に紹介いたします。

Googleアナリティクスをタグマネージャーで管理する

アクセス解析に必要なGoogleアナリティクスをGoogleタグマネージャーで管理する理由は『アクセス解析にGoogleアナリティクスではなくGoogleタグマネージャーを利用する利点』でお伝えした通り、コンバージョントラッキングやリマーケティングタグの設置など、追加の解析用タグの管理と作業を一元管理するためです。

キャラ左

Googleタグマネージャーには「Google サーベイ ウェブサイト満足度調査」という機能があります。まだ、私たちは使ったことのない機能ですが、ウェブサイトに関する顧客満足度アンケートを簡単に作成することができるツールのようですので、機会を見て導入できたらと考えています。詳しくはこちらをご確認ください。

Googleタグマネージャー「新規アカウントの作成」

まずは、Googleタグマネージャーにアクセス(登録)し、画像右上赤囲み内「アカウントを作成」をクリックします。

キャラ右

「Googleタグマネージャー」は、一般的に「GTM」と呼ばれるので、ここでも以降は「GTM」と表記します。ちなみにGoogleアナリティクスは「GA」と表記することが多いですよ!

GTM手順2- 必要事項の入力

上図に変わったら必要事項を入力して【作成】をクリック。

GTM利用規約に同意

GTM利用規約に同意します。

キャラ左

この時、最下部の「GDPRで必須となるデータ処理規約にも同意します 詳細」を確認してくださいね!

GTMタグの設置

利用規約に同意すると、上図のようにGTM設置用のタグが表示されますので、エクセルなどにコピペしておきます。

GTMコードをfunction.phpを使って設置する(コピペで使えます)

【賢威8】を使っている場合は、先述の通り、【賢威の設定】→【埋め込みコードの設定】を開き、GTMの指示通りにコードをコピペしますが、ここではあえて、functions.phpで管理する方法をご紹介します。

子テーマのfunctions.phpを編集ソフトで開き、下記のコードをコピペで貼り付けます。

4行目の「echo “<!– Google Tag Manager 【head】–>」と6行目の「<!– End Google Tag Manager 【head】–>”;」の間、5行目に、あなたの「GTMコードを<head>内のなるべく上の方へ貼り付ける」と書かれたコードを貼り付けてください。

次に上図下部の「また、開始タグ<body>の直後に〜〜」と記載されたコードを貼り付けるのですが、Themeによっては、親テーマのhead.phpを子テーマに移植してファイルを編集せざるを得ないケースも多々あります。

しかし、親Themeのファイルを子テーマに移植したり直接編集するとThemeのバージョンアップの際に、再び編集や変更の確認が必要になりますので、その労力を最小限に抑える方法をここではご紹介します。

<body>直後のGTMコードをfunction.phpで管理する方法

まずは、お使いのWordPressテーマファイルの中から<body>のl記述があるファイルを探します。ほとんどのThemeでは「head.php」に記述されています。

WordPressの管理画面から【外観】→【テーマエディター】を開いて、【編集するテーマを選択: 】を親テーマに合わせ【選択】をクリックします。

ほとんどのThemeでは、下図のように</head>のすぐ下に<body>があります。

head.phpで<body>の位置を確認

この<body>すぐ下に「<?php do_action(‘~~’); ?>」という記述がある場合は、( )内の「~~」が使えるのですが、記述がない場合は、一般的には、この<body>直下にGTM 2つ目のコードを貼り付けます。

しかし、ここでは、後学のためにも<body>にGTMコードを貼り付けるのではなく「<?php do_action(‘~~’); ?>」を貼り付けます。

上記コードの「add_code_after_body」が、「(’~~’)」の「~~」に該当します。お好きな文字に変えても構いませんが、次のfunctions.phpにコピペするコード2行目も同じ文字列に変更してください。

functions.phpにコピペするGTM2つ目のコード

head部分同様に5行目にあなたのタグをコピペします。

上記コード内に2箇所ある【add_google_tagmanager_body】は、任意の文字列に変更しても構いません(必ず、同じ2箇所とも文字列にしてください)

キャラ右

編集したfunctions.phpファイルやhead.phpファイルを必ず、子テーマフォルダにアップロードしてくださいね!

これで、GTMの設置は完了です。続いて、GTM管理画面でGoogleアナリティクスの設定を行います。

GTMを使ってGoogleアナリティクスタグを追加する

Googleアナリティクスにログインしたら画面左下のGoogleアナリティクスの設定からアカウントの作成をクリックし下記の画面に必要事項を入力してトラッキングIDの取得を行います。

「Google アナリティクス利用規約」が表示されますので、よく読んで同意し、下記画面の「トラッキングID」のみコピーしてエクセルなどの、タグ管理シートに貼り付けておきます。

トラッキングIDのみをコピー

キャラ左

私たちは、親テーマを編集したり、アフィリエイト・コードなどは、エクセルで管理しています(個人的にはマックを使っているのでNumbersを使っています)。
編集記録や原稿の一元管理シート

次に、GTM(Googleタグマネージャー)に戻り、下記の画面を開きます。

GTMに新しいタグの追加

上図と同じ画面を開いたら、赤枠で囲った「新しいタグを追加」をクリック。

すると…

GTMにAnalyticsタグを追加

上の画面が開きますので、若干ポップアップしている「タグタイプを選択して設定を開始…」をクリックします。

GTM アナリティクスタグ追加 手順3

画像のように、最上部に「Googleアナリティクス – ユニバーサル アナリティクス」とあるので、ここをクリックして選択します。

キャラ右

手順3の画面にある通り、GTMを使うとGoogle広告(Googleアドワーズ)のコンバージョンタグを設置したり、カスタムHTMLを使って、サポートされていない解析タグを、サイトを編集せずに設置できるようになりますので、とても便利ですね!

「Googleアナリティクス – ユニバーサル アナリティクス」をクリックすると、下記の画面に進みますので、先ほど管理シートにコピーしておいたGoogleアナリティクスの「トラッキングID」をここにコピペします。

GTMにGAを設定:手順4

トラッキングID」をコピペしたら、上図下部のトリガーと書かれた「トリガーを選択してタグを配信…」をクリックして次の画面に進みます。

GTMにGA設置:手順5

「All Pages ページビュー」と書かれた項目が出てきますので、これを選択します。すると次の画面に移りますので、保存をクリックします。

GTMにGA設置:手順6

下記のように「タグ名の変更」を促されますので、名前をつけて保存します。

GTMにGA設置:手順7

GTMにGA設置:手順8

現在編集中ボックス内の赤枠「ワークスペースの変更」 – 【追加済みの数】が「1」になっていることを確認して、右上青枠の「プレビュー」をクリックします。

GTMにGA設置:手順9

GTMの管理画面が上図のように「プレビュー中のワークスペース」を表示したら、同じブラウザで新しいタブを開き、現在編集中のGTMを導入したサイトを開きます。

GTMにGA設置:手順10

サイトの表示下部に稼働中のタグが表示されれば成功です。

GTMに戻って「プレビューモードを終了」し「公開」をクリックして完了です。

注意

GTMはタグコードを設置しただけ、新しいタグやトリガーを設定しただけでは機能しません。必ず一連の作業を行なった後は「公開」をクリックしてタグを稼働させてください。

キャラ右

Googleアナリティクスを開いて、スマートフォンであなたのサイトにアクセスしてみましょう!

Analyticsの「リアルタイム」に、あなたのアクセス状況が反映されているはずです!もし、あなた自身のトラフィックをアクセスデータとして蓄積したくない場合は「Googleアナリティクス 自分のアクセスを除外」などで検索すると、その方法を見つけることができます。

私がやっている方法は、今後記事にします。

AdSenseへの登録と審査申請

キャラ左

アドセンスの審査は厳しくなっているので、早めに登録するのが肝心です!

GAの設定が終わったら、続けて解析系のGoogleサーチコンソールの設定やGAとの連携をやりたくなるところですが、AdSenseには広告を掲載するサイトの適性を審査する期間が必要になりますので、アドセンスへの登録を優先させます。

キャラ右

なんなら、GAの設定を行う前に、アドセンスへの登録を優先させても良いくらいです!

まずは、AdSenseにログインし、アドセンスのサイト管理をクリックして、登録サイトの管理画面を開きます。

アドセンスに新しいサイトを登録

次に画面右上のサイトを追加をクリックし次の画面に進みます。

サイトの追加とAdSenseコード

まずは、赤枠内のコードをコピーし、サイトに貼り付けます。貼り付ける位置は<head>タグと</head>の間ですので、GTM(Googleタグマネージャー)のコードをfunctions.phpで管理したコードが使えますAdSenseのコードを単独で管理する場合には下記のコードをコピペしてください。

上のコードをfunctions.phpにコピペし、コード内の5行目に、AdSense登録審査用のコードを貼り付けます。

キャラ左

AdSenseにサイトを登録する際に示される画像赤枠内のコードは、自動広告を掲載するコードと同じです。審査通過後、任意の場所に広告を掲載する場合は、自動広告のコードを削除するのを忘れずに!

functions.phpの編集が終わりFTPソフトなどでファイルをアップロードした後には、必ずサイトのソースをブラウザで確認し、正しくコードが掲載されているのかを確認してください。

サイトに正しく、AdSense登録用のコードが掲載できたら、AdSenseの管理画面に戻り、画面上部の「あなたのサイト」サイトのURLを入力します。

登録するサイトのURLを入力すると、画面下の「完了」ボタンが反転し、完了となるので、クリックすると完了です。

サイトを登録する画面(貼り付けるコードが記載された画面)では、「WordPressサイトにコードを挿入する方法」がリンクで紹介されています。

WordPressサイトにコードを挿入する方法

ご注意を!

残念なことに、これらのリンク先は全て英語で記載されています。興味のある方は、リンクが表示されている前の文章(例えば「Genesis のテーマ」)に「アドセンスの設定方法」などの語句をつけて検索すると解説した日本語のブログを見つけられると思います。

基本的に、ここでコピペするアドセンスへの登録用コード(自動広告コード)は、審査通過後、削除し任意で配置できるAdSenseのコードに切り替えるので、自動広告の設定方法などは、特に気にしなくて良いと思います。

AdSenseコードの設定方法などを紹介した上記ページのリンク先英字記事ですが、本記事で紹介しているfunctions.phpの編集を採用される場合は特に必要ありません。

数日から2週間程度で、特に問題がなければ、下記のようなメールが届き、AdSenseの掲載がスタートします。

AdSenseの審査通過通知

AdSenseの審査合格通知が来る前までに、以降の手順に従って、GAとAdSense、GAとサーチコンソールの連携をやってしまいましょう!

GAとアドセンスを結合する

GA(Googleアナリティクス)にログインしたらGA管理ボタンをクリックします。

GA AdSenseのリンク設定

赤枠内「AdSenseのリンク設定」をクリックします。

GA AdSenseプロパティの選択

AdSenseにログインした状態で、別タブでGAを開いていると画像のようにAdSenseのプロパティが表示されますので、プロパティ番号を確認し、その下にある「コンテンツ向けAdSense」にチェックを入れて続行をクリックします。

「AdSenseプロパティの選択」に完了マークが付き、リンクの設定(アナリティクスのビュー選択)に進みます。

アナリティクスのビューを選択

通常、GAには「すべてのウェブサイトのデータ」が食設定で準備されるビューとして存在し、リファラスパムなどを除外した「フィルタービュー」や、それぞれの解析目的に応じたビューを準備します。

下画像では「1個のビューがこのリンクを使用しています」となっていますが、必要に応じて選択すっるビューを増やしてください。

GA アドセンスとの結合完了

最後に完了をクリックして終了です。

アナリティクスでAdSense報酬を獲得しているコンテンツを特定する方法

GAでは、AdSenseの報酬が発生しているコンテンツを記事単位で見つけることができます。

GAのレポートを開いて【行動】→【サイト運営者】→【サイト運営者のページ】で確認できます。詳しい解析方法などは、別のコラムでまたお伝えしますがGAとAdSenseの結合を行う前では下図のような画面しか表示されません。

GAとAdSenseの未結合

この状態から、上記手順に従ってGAとAds(Googleアドセンス)の結合を完了し、データが蓄積され始めると、下図のようにページ単位での収益を確認できるようになります。

GAでAdsの詳細データを確認

キャラ右

この記事は、公開して間もない時期にアップしていますので「残念な数字」が並んでいますが、今後改善を加えて、成果の上がった方法に関しては、またご紹介いたします。

サイトをGoogleサーチコンソールに登録しGA(Googleアナリティクス)と連携する

アクセス解析の設定が完了したら、Googleサーチコンソールにサイトを登録し、サイトのエラーや改善提案をGoogleから受けられるようにします。

サーチコンソールは、2019年3月28日以降いくつかの古い機能が利用できなくなります。そのため、本記事では、新しくなったサーチコンソールの仕様に従って、Search Consoleへの登録方法とGAでの設定に関して解説します。

新しくなったGoogleサーチコンソールにサイトを登録する手順

まずは、Googleサーチコンソールにログインしてください。

Googleサーチコンソールにログインしたら、左上部のハンバーガーメニューから【+プロパティを追加】をクリックします。

サーチコンソールの設定

豆知識

下記画面のように、新しくなったGoogleサーチコンソールでは、2種類の所有権確認方法を選択できます。

しかし、例えば、ドメインをお名前.comで取得していた場合、右側の「ドメイン new」と書かれていた方法を用いるためには、GMOが提供しているサーバーをレンタルしていなければ、使うことができません。従来のサーチコンソールと同じように、GoogleアナリティクスのアカウントやGTMのタグを使って確認する場合は、右側を選択する必要があります。

新しいサーチコンソール

右側のボックスを選択し「URL プレフィックス」と書かれたBox内に該当のURLを入力し、続行をクリックすると自動的にプロパティの確認が始まります。

プロパティの確認

正しくGTMコードが記載され、GTMにGoogleアナリティクスのタグを設置していると「所有権を自動確認しました」のメッセージとともに確認方法としてGoogleタグマネージャーと表示されサーチコンソールの設定は完了です。

所有権の自動確認

画面の指示通りに【設定】→【所有権の確認】をチェックすると…

所有権の確認画面

“あなたは確認済みの所有者”ですと表示されます。

GA(Googleアナリティクス)からサーチコンソールの設定を行う

Googleアナリティクス(GA)にログインし、左下のGA管理ボタンから、下図赤枠で囲った「プロパティの設定」をクリックします。

GAでサーチコンソールの設定を行う:手順1

プロパティ設定画面を下までスクロールし、下図赤枠内のサーチコンソールを調整をクリックします。

プロパティの設定からサーチコンソールを調整をクリック

サーチコンソールの設定

追加」と書かれたテキストリンクをクリックすると、新しいタブでサーチコンソールの画面が開きますので、GAのプロパティと連携するサーチコンソールに登録した該当サイトのURLを選択し、分かりにくいですが、画面下部の「Search Consoleにサイトを追加」をクリックします。

サーチコンソール内でサイトを選択

サーチコンソールへのサイトの追加

「サーチコンソールへのサイトの追加」と書かれた確認メッセージが表示されますのでOKをクリックします。

GAに戻りページを更新し、下の画面のように切り替わっていれば完了です。

GAとサーチコンソールの連携完了

サイトにAMPを導入する手順:アクセス解析からAdSense自動広告の掲載まで

冒頭でお伝えの通り、AMPページは、Googleの検索エンジンに認識されて初めてアクセスされる機会を得ます。

AMPページは、Googleが推奨する「コンテンツを高速表示させるための機能」ですので、読み込みに時間のかかるページに関しては有効ですが、そもそも表示速度の速いページにも必要なのかと聞かれれば首をかしげざるを得ません。

確かに、本サイトでも採用している【賢威8】は、表示スピードも早くSEOにも配慮したWordPressのThemeとして有名ですが、コンテンツの内容次第では、通常ページとAMPページのGoogle pagespeed insightsの評価はここまで差が出ます。

キャラ左

賢威8は軽いと聞いていましたが、流石にここまで長いページで画像が多いと、通常ページのモバイル版ではこんな感じですね。

通常ページ【モバイル版】のGoogle pagespeed insightsの評価

キャラ右

PC用の判定では、84点。及第点かな?

そもそも、コピペ。コード付きの記事にモバイル用のAMPページが必要かどうかって話もありますけどね(笑)

通常ページ【PC版】のGoogle pagespeed insightsの評価

キャラ右

AMP版になると一気に数字が改善される!

ただ、この記事をスマホで読む?(汗)

AMPページ【モバイル版】のGoogle pagespeed insightsの評価

キャラ左

AMPページののPC版評価が必要だとは思いませんが…

AMPページ【PC版】のGoogle pagespeed insightsの評価

GTmetrixの判定は…

GTmetrixのコンテンツ評価

また、広告掲載位置の比較検討データを集めるためにも、私たちは、全てのサイトに、出来る限り早い段階で(だからと言って焦ることはない)AMP導入をオススメしています。

それでは、順を追ってAMP導入の手順をご紹介いたします。

AMPプラグイン有効化前に解析タグを設置する

AMPページのGoogleアナリティクスでの解析は、通常ページのプロパティとは別プロパティで管理することがGoogleより推奨されています。詳しくは『Googleデベロッパーズ AMP と非 AMP のトラフィック』を参照ください。

キャラ右

AMP導入にはWordPress公式プラグインのAMPを利用していますので、AMPプラグインを使って解説いたします。

WordPress公式AMPプラグイン

WordPress公式のAMPプラグイン

WordPressにログインしたら、【プラグイン】→【新規追加】と進み「キーワード」と書かれた横のBOX(未入力の場合は”プラグインの検索…”と表記されています)に「AMP」と入力します。すると上記のような検索結果が表示されますので、赤枠で囲んだ「AMP」をインストールします。

ここがポイント

この時、続けて有効化を押さないのがポイントです。

AMPプラグインを有効化するとすぐにAMPページを生成してしまいますので、カスタマイズ中の中途半端なデザインになったページにユーザーをアクセスさせてしまうかもしれません。

せっかく、AMPページが検索ランキングの上位に表示され、トラフィックを発生させたというのに、カスタマイズ中の中途半端なデザインに訪問したユーザーは、きっと【即離脱→検索結果に戻る】こととなるでしょう。

これでは、せっかく得た検索エンジンの評価を落としてしまいかねませんので、AMP化は、全てが整ってから有効化をクリックするようにしましょう。

AMPプラグインをインストールしたら【プラグイン】→【プラグインエディター(plugin editor)】に進み、”編集するプラグイン”の中からAMPを選択をクリックします。

プラグインファイル一覧が表示されますので、【template ▶︎】→【html-start.php】を選択します。

AMPプラグインにGTMを設置

通常ページにGTMタグを設置した際に登場した「do_action」が19行目にあります。

通常ページにGTMを追加した時と同じ方法でAMPページにもこれまで編集してきた子テーマフォルダに格納してあるfunctions.phpに書き加えることで設置できます。

だし、通常ページのGTMコードはここには挿入しないでください!。必ず、GTMで新しいコンテナを作成し下図のようにGTM AMP用タグを選択してコードを取得してください。

AMP用GTMコードを取得

作成をクリックすると、次の画面でAMP用GTMコードが表示されます。

AMP用GTMコード

画面上部のコードを下記functions.phpにコピペするコードの5行目に貼り付けます。

‘amp_post_template_head’は、AMPプラグイン・ファイルの「/template/html-start.php」19行目に記載のあった<?php do_action( ‘amp_post_template_head’, $this ); ?>と呼応していますので変更しないでください

2行目の後半に記述されている「‘add_google_Analytics_GTM’」は3行目の「function add_google_Analytics_GTM()」と呼応していますので、2行目の後半をお好きな文字列に変更したら、3行目も同じ文字列に変更してください。

AMP用GTMコードも<body>直後に挿入するコードがあります。しかし、AMPプラグイン・ファイルの「/template/html-start.php」の26行目「<body class=”<?php echo esc_attr( $this->get( ‘body_class’ ) ); ?>”>」の後には、何の記述もありません。

ちょっと専門的なお話

AMPページの構成は、「/template/html-start.php」が読み込まれた後に「templates/header.php」が読み込まれ、「templates/header.php」を読み込む最中に「templates/header-bar.php」読み込み、続いて「/template/single.php」(投稿のAMP)もしくは「/template/page.php」(固定ページのAMP)が読み込まれてコンテンツが表示されます。

この場合、「/template/html-start.php」の後に読み込まれるphpファイルの中からできるだけ早い位置に「do_action」の記述があれば、そのフック(<?php do_action( ‘amp_post_template_head’, $this ); ?>内の‘ ‘の中身)に呼応した「add_action」を追加すればいいのですが、AMPプラグインには、それが見つかりません。

そのため、通常ページにGTMの<body>用タグをfunctions.phpで設置した時同様「/template/html-start.php」にadd_actionの一文を加えて対処します。

AMPプラグインファイルの編集を最小限に抑える

通常ページにGTMコードを設置した際にも、出来る限り親テーマを編集したり、子テーマフォルダに移植して編集するのを避けるのと同様に、プラグイン・ファイルも出来る限り手を加えないのが理想です。

AMP導入当初は、AdSenseも自動広告を掲載させますが、AMPへのトラフィックを獲得できているのに、アドセンスの収益性が低い場合は、自動広告を任意配置の広告に切り替える必要が出てきます。

この場合に、AMP用AdSenseコードをプラグインファイルにひとつひとつ書き込んでいたのでは、プラグインがアップデートされた場合の修正作業が煩雑になってしまいまた、作業量も多くなってしまいません。そのため、下記のように必要最低限の箇所に限って「do_action」を追加し、後はfunction.phpから命令を出します。

do_acitonポイントを追加

amp/templates/html-start.php 27行目に追加するコード

functions.phpに追加するコードは下記の通りです。

AMPプラグインにGTMコードを設置できたら、GTMの通常ページ用コンテナでGoogleアナリティクスのタグを設置した手順と同じように、AMP用のGTMコンテナを新規作成し、AMP用のGAプロパティを新設通常ページとは別のトラッキングIDをAMP用のGTMコンテナに使用してください。

最終的にGTMアカウント内に、通常ページ用のコンテナとAMP用のコンテナ、GAに通常ページ用のプロパティとAMP用のプロパティが下図のようにできていれば正解です。

GTM-設定の最終確認

GA最終確認

キャラ右

AMP用のGTM設置の後は、「GTM公開の前」に任意のページURL末尾に「/amp/」を付けてGTMプレビューモードでの確認をお勧めいたします。

AMPページにAdSense自動広告コードをfunctions.phpで設置する

AMPページへのAdSense導入も通常ページと同じ手順で進めます。

解析コードを設置したら、通常ページのAdSense審査通過の是非に関わらずAMPページに自動広告のコードを設置します。

AdSenseのAMPコードも<head></head>間と<body>のなるべく上部に記載するコードの2種類があります。下図下段のコードが「<body>のなるべく上部に記載するコード」になります。

キャラ左

この時、AMPプラグインのamp/templates/html-start.php 27行目に追加した「<?php do_action( ‘amp_body_Immediately_afterwards’ ); ?>」が役に立ちます。

また、GTMコードとAdSense自動広告コードの設置位置は同じ場所なので、続けて記載しても問題ありません(詳しくは後述)。

AMP用AdSense自動広告用のタグは、AdSenseにログイン後【広告】→【自動広告】→【AMP自動広告】の順で進み下記画面で取得します。

AdSense AMP用自動広告タグ

まずは、一番上のボックス内オレンジで囲った部分を「ON」にします。

次に下記のコードをfunctions.phpに貼り付け、5行目に画面中断赤枠で囲った手順2のタグを5行目に貼り付けます。

functions.phpに追加するAMP用Ads【head】コピペ・コード

上記コードを、functions.phpにコピペしたら、下記のコードをfunctions.phpにコピペし、上図下段青枠で囲った手順3のタグを同じく5行目に貼り付けます。

functions.phpに追加するAMP用Ads【body】コピペ・コード

‘amp_body_Immediately_afterwards’に呼応する「<?php do_action( ‘amp_body_Immediately_afterwards’ ); ?>」は、既に「amp/templates/html-start.php」の27行目にAMP用GTM「body直下」用タグ設置の際に準備していますので、このフックに反応してAMP用自動広告タグがHTMLに反映される仕組みになっています。

ここまで準備が整って、AMPプラグインを有効化します。

AMPプラグインを有効にしたら、任意のページURLの末尾に「/amp/」を加え、AMPバージョンのページを確認します。

The AMP Validatorにアクセスし、/amp/付きのURLを下記のように入力してAMP-Validateをクリックして、画像のように「Validation Status: PASS」と表示されれば成功です。

AMP validator チェック

AMPページ専用のスタイルを設定する

AMPページのデザインは、AMP専用のスタイルを定義しなければなりません。

キャラ右

通常ページのスタイルを定義したCSSファイルの読み込みは行われないわけなんです。

AMPプラグインでは、ある程度のスタイル定義が提供されていますが、amp/templates/html-start.php 22行目の<?php do_action( ‘amp_post_template_css’, $this ); ?>を使ってfunctions.phpからオリジナルのスタイルを書き込むことができます。

下記のコード7行目に、通常ページのスタイルの定義を書き込めばAMPページでも同じようなデザインを再現することができます。

キャラ左

【賢威8】を使っている場合は、親Themeフォルダ内にある「base.css」の「/*キャラクター*/」から「/* キャラクター END */」までをコピペすれば、AMPページでも吹き出しを再現できます。