注目の記事 PICK UP

AMP for WPのイントールと詳細設定の方法

Last Updated 2021.02.02

AMP for WPのイントールと詳細設定の方法

12-wordpressfirst-header
WordPressをAMP対応のWEBサイトにする時、主に2つのプラグインでAMP対応することができます。一つはAMPプラグインです。このプラグインはGoogleも開発に携わっていてAMPプロジェクトの公式のプラグインとして認識されています。私も当初、このAMPプラグインをインストールしてみたのですが、いまいち設定方法がわかりづらく通常のWEBサイトとAMP対応サイトの共存ができているのか不明でしたので、こちらのAMP for WPプラグインを使用することにしました。こちらのAMP for WPプラグインは適切な設定をすると
https://あなたのドメイン/コンテンツ/amp/
以下にあなたのWEBサイトのコンテンツが、全て構築されます。これはモバイル端末であなたのWEBサイトにアクセスした時、AMP対応ページの時は/amp/以下のURLへアクセスすることでAMPのページへ、通常のモバイルサイトへアクセスする時はURLから/amp/を削除したURLへアクセスすることで通常のモバイルサイトへアクセスできるようになります。設定次第でAMP対応ページと非AMPモバイルページへのリンクも自動で付けることができます。これが大きなメリットだと考えています。そんな便利なプラグインAMP for WPの詳細設定について早速解説していきたいと思います。

AMP for WPのイントール

AMP for WPのプラグインのインストールです。管理画面左メニューの「プラグイン」→「新規作成」からプラグインの検索フォームに「AMP for WP」と入力します。AMP for WPプラグインが表示されたら、「インストール」ボタンを押してプラグインをインストールします。インストールが完了したら「有効化」ボタンを押してプラグインを有効化します。プラグインが有効になると管理画面左メニューにAMPという項目が追加されますので、AMPメニューをクリックします。

AMP for WPの詳細設定-Settings

AMP for WPプラグインの設定メニューが開いたら、「Advance Setup」のラジオボタンをクリックして「Advance Setup」の詳細設定に切り替えましょう。
そして「Settings」画面を開きます。

AMP for WPの詳細設定-General

12-wordpressfirst-01
WEBサイトのロゴをアップロードします。ロゴはPCサイト用のロゴ画像で問題ありません。「Resize」から「Fixed width」を選択すると自動で適切な画像サイズにリサイズしてくれます。

12-wordpressfirst-02
WordPressのWEBサイトでAMP化するコンテンツの種類を選択します。

Posts
Pages
Homepage
Archives [Category & Tags]
Category
Tags

当サイトでは、上記の項目をAMP化有効にしています。考え方としては、WEBサイト全体を/amp/をURLに付けることでAMP化されたページが表示されるというコンセプトです。AMPページへアクセスしてきたユーザーはAMP化されたコンテンツ内で回遊してモバイルユーザビリティを向上させたままWEBサイトを見てもらうという考え方です。
最後に「Save Changes」ボタンを押してセーブしておくことを忘れないようにしましょう。

AMP for WPの詳細設定-Advertisement

12-wordpressfirst-03
つぎはAMPページ内の広告の設定です。広告は2種類に対応していますが、日本ですとGoogleアドセンスだけということになります。
AD Typeを「Adsense」を選択します。すると

Data AD Client
Data AD Slot

を入力するフィールドが現れますので、それぞれデータを入力していきます。Data AD ClientとData AD Slotについては、Googleアドセンスの広告ユニットを作成した時の広告コードから抜き出します。詳しくは下記リンクで確認してください。

サイト運営者 ID は、お客様の AdSense アカウントに一意に割り当てられる識別子です。Google にお問い合わせいただく際は、アカウントのセキュリティ

12-wordpressfirst-04
当サイトでは、Above the Post Content(投稿ページの上側)とBelow the Post Content (Single Post)(投稿ページの下)だけにしています。
他の場所にもアドセンス広告を掲載できるのですが、当サイトはSite Kit By Googleで自動でアドセンス広告が挿入されるようになっているため、他の場所の広告は表示しないようにしています。Site Kit by Googleをインストールしていると自動でAMPコンテンツ内にアドセンス広告を配置してくれます。

WordPressにGoogleのSite Kit by Googleという公式プラグインが発表されました。このプラグインはGoogleのサーチコンソール・アドセンス・アナリティクスなどSEOやWEBマーケティングに必要なツールと連携することができます。

そのためにはSite Kit by Googleプラグインのインストールの他、AMPページ用アドセンス呼び出し用HTMLコードの入力が必要です。AMP用アドセンス自動挿入HTMLコードは下記リンクを参照の上、後述するAMP for WP設定から設定することができます。

AMP 自動広告を使うと、AMP ページに AdSense 自動広告が自動的に配信されるようになります。AMP 自動スクリプトと広告コードを追
AMP for WPの詳細設定-アナリティクス

12-wordpressfirst-05
アナリティクスの設定です。AMP for WPでは色々なアクセス解析を設定できますが、ここではGoogleアナリティクスについての設定を解説します。GoogleアナリティクスをONにすると「Tracking ID」を入力できますので、Site Kit By Googleで設定したアナリティクスプロパティを入力します。UA-から始まる文字列になります。現在のところGoogleアナリティクスの最新解析「Google Analytics 4」には対応していません。しかし、今後のアップデートでGoogle Analytics 4に対応することは濃厚だと考えています。それはこのAMP for WPプラグインが企業によって開発されていて、有償バージョンもリリースしているため最新の技術にはいち早く対応してくるだろうと考えられるからです。

AMP for WPの詳細設定-Notice Bar&GDPR

12-wordpressfirst-06
Cookieのユーザー受け入れ承認画面とEU圏のためのGDPRの承認ページの表示の有無です。Cookieのユーザー受け入れ承認画面は問題なく動作するのですが、Notice BarとGDPR画面は同時には使用できません。どちらか一つ選択することになります。現時点でEU圏ユーザーへのアプローチはありませんのでGDPR画面は使用していません。今後英語ページも整備し始めたら、GDPR画面に切り替える予定です。

AMP for WPの詳細設定-Advance settings

12-wordpressfirst-07
次は少し飛んでAdvance settingsです。この項目で設定するのは以下になります。

Search Result Page in AMP
Category Description
Enter HTML in Head
Enter HTML in Footer
Auto Add AMP in Menu URL

Advance settingsでポイントとなるのは、Enter HTML in HeadとEnter HTML in Footerの項目です。このフォームにHTMLコードを入力することで、Googleアドセンスの自動広告が可能になります。

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

1行目はGoogleアドセンスを使用する時に必要になるコードで、Enter HTML in Headに入力します。
2行目はNotice Bar&GDPRのNotice Barを使用する時に必要になるコードです。これも同じくEnter HTML in Headに入力します。

12-wordpressfirst-08
Enter HTML in Footerのフォームには以下のコードを入力します。

<amp-auto-ads type="adsense" data-ad-client="ca-pub-4997344186044584"></amp-auto-ads>

上記のコードはEnter HTML in Headで入力したamp-auto-adsのコードとセットになるコードです。
Enter HTML in Headでamp-auto-adsタグを定義して、Enter HTML in Footerで実際にbodyタグ内に出力して使用している処理になります。このコードはAMP化されたページ内にのみ出力され、非AMPページに遷移すると出力しません。なお上記のコードは例で、ca-pub-4997344186044584は当サイトのGoogleアドセンスIDになります。Googleアドセンスを取得するとこのようなIDが付与されます。AMP化されたページに自動広告を掲載する方法の詳細については下記のGoogleヘルプをご参照ください。

AMP 自動広告を使うと、AMP ページに AdSense 自動広告が自動的に配信されるようになります。AMP 自動スクリプトと広告コードを追

Auto Add AMP in Menu URLはメニュー設定に作用します。「外観」→「メニュー」で設定したメニューに全てAMP対応ページへリンクするように、URLに自動で/amp/を追加してくます。この設定項目を有効にすることで、AMPコンテンツ内の回遊率が上がる可能性が高まります。テーマにもよりますが、ページ上部のグローバルヘッダーメニューとページ下部のフッターメニューがAMPのURLに変化してくれることでユーザビリティも向上し、AMPコンテンツからAMPコンテンツへリンクできることによりモバイルフレンドリーにもなります。
次回はAMP for WPの詳細設定-Designの設定方法を解説していきます。

AMPという用語をご存知でしょうか?AMPとはモバイル端末でのWEBサイトの表示を高速化させるプロジェクトで、Google等が中心となって推進されています。Googleが関係してますのでSEO・WEBマーケティングにも当然効果があります。


WordPressはプラグインをインストールして設定するだけで誰でも簡単にAMP化できます。AMP for WPプラグインをインストールして詳細設定をしてWEBサイトをAMP対応する方法のDesign(デザイン)を解説します。

関連記事

  1. 28-consumerbehavior-header

    消費者行動モデル-AIDMA・AISAS・VISAS複雑化するコミュニケーション経路

  2. 24-polylang-header

    PolylangとLingotek Translationで自動翻訳した多言語サイトを構築する

  3. 07-wordpressfirst-aicache

    新しいブロックエディターが使いづらい。そんな時はClassic Editor

  4. 19-chromedev-header

    ChromeでPCからモバイル端末をエミュレートして表示する方法

  5. 10-wordpressfirst-header

    Jetpackプラグイン-Facebook・Twitter連携WEB高速化多機能プラグイン

  6. 15-wordpress-aicache

    投稿記事のリビジョンをスケジュールに沿って削除する-WP Optimize

  7. WordPressをインストールして最初にやる設定-一般設定

  8. 26-gdpr-header

    GDPRに対応して個人情報保護法やEU圏のユーザー個人情報を保護する

  9. 25-marketing-header

    4C分析とクロスSWOT分析-マーケティングの分析フレームワーク

特集記事

  1. 05-wordpressfirst-aicache WordPressをインストールして最初にやる設定-パーマリンク設定
  2. 19-chromedev-header ChromeでPCからモバイル端末をエミュレートして表示する方法
  3. 26-gdpr-header GDPRに対応して個人情報保護法やEU圏のユーザー個人情報を保護する
  4. 21-marketing-header マーケティング調査・戦略・プログラム立案・実行・管理の流れ
  5. 34-bigdata-header GDPR対応について-WordPressをGDPR&CCPAに対応する
  6. 03-wordpressfirst-aicache WordPressをインストールして最初にやる設定-表示設定
  7. 22-recaptcha-header スパムコメントをシャットアウトreCAPTCHAサービスとInvisible r…
  8. 04-wordpressfirst-aicache WordPressをインストールして最初にやる設定-ディスカッション設定
  9. WordPressをインストールして最初にやる設定-一般設定
  10. 28-consumerbehavior-header 消費者行動モデル-AIDMA・AISAS・VISAS複雑化するコミュニケーション…

PICK UP記事

  1. 06-wordpressfirst-header SiteGuard WP PluginでWordPressの不正ログインを防止す…
  2. 22-recaptcha-header スパムコメントをシャットアウトreCAPTCHAサービスとInvisible r…
  3. 19-chromedev-header ChromeでPCからモバイル端末をエミュレートして表示する方法
  4. 16-onamae-header お名前.comのドメインのDNS設定をする-コアサーバー連携
  5. 10-wordpressfirst-header Jetpackプラグイン-Facebook・Twitter連携WEB高速化多機能…
  6. 08-wordpress-head WordPressの簡単セットアップ方法-コアサーバー(CORESERVER)
  7. 12-wordpressfirst-header AMP for WPのイントールと詳細設定の方法
  8. 15-wordpress-aicache 投稿記事のリビジョンをスケジュールに沿って削除する-WP Optimize
  9. 18-resetcss-header リセットCSSとは何か-WEB制作の基礎
  10. 03-wordpressfirst-aicache WordPressをインストールして最初にやる設定-表示設定

Twitter

最近の記事

  1. 30-wpsitemap-header
  2. 28-consumerbehavior-header
  3. 34-bigdata-header
  4. 26-gdpr-header
  5. 25-marketing-header
  6. 24-polylang-header
  7. 23-revealids-header
  8. 22-recaptcha-header
  9. 21-marketing-header
  10. 20-marketing-header

おすすめ記事

  1. 20-marketing-header
  2. 07-wordpressfirst-aicache
  3. 30-wpsitemap-header
  4. 09-wordpressfirst-aicache
  5. 26-gdpr-header
  6. 04-wordpressfirst-aicache
  7. 34-bigdata-header
  8. 23-revealids-header
  9. 13-wordpressfirst-aicache
  10. 28-consumerbehavior-header
PAGE TOP