WordPressをAMP対応し、nendのAMP対応広告を掲載する方法

WordPressをAMP対応し、nendのAMP対応広告を掲載する方法

アドネットワーク「nend」がついにAMP対応!

スマアフィを運営する株式会社ファンコミュニケーションズのスマホ専用アドネットワークサービス「nend」では、2016年6月15日に、AMP(Accelerated Mobile Pages)に対応した広告配信タグの提供を開始しました

アドネットワークnend

スマートフォン・アドネットワーク「nend」、AMP(Accelerated Mobile Pages)に対応した広告配信タグの提供を開始

AMPは主にGoogleによって進められてきたモバイルウェブを高速表示させるためのプロジェクトで、今年の2月に、AMP対応のモバイルサイトはGoogleのモバイル検索結果に特別な枠で表示されるようになり、大きく注目されることとなりました。各アドネットワークサービスも、この動きに追従する形で、以下のようにAMPの対応を進めてきています。

AMP(Accelerated Mobile Pages)とは何か?

それでは、一体このAMPとは何なのか、AMP対応にすると何がよいのかなどAMPについて簡単に説明します。

AMPは、表示が遅くフラストレーションがたまりやすいモバイルウェブを高速化させることを目的として主にGoogleによって進められているプロジェクトです。(あくまでもモバイルウェブのみの話となります。)

Accelerated Mobile Pages Project

AMP HTML

AMP HTMLというフレームワークがオープンソースとして公開されており、その仕様に沿ってモバイルページを作成することによって表示の高速化が実現できるようになっています。AMP HTMLの仕様はとても厳格で、ページの表示を遅くする原因となるJavaScriptや特定のHTMLタグなどの使用が禁止されています。仕様については以下のサイトをご参照ください。

Google ウェブマスター向け公式ブログ: Accelerated Mobile Pages プロジェクトについて — 導入ガイド日本語版を本日公開しました
AMP HTML Specification

各アドネットワークサービスがAMP対応を推し進めるのも、広告タグがこの厳格なAMP HTMLの仕様に沿っていないと広告を掲載したページがAMP対応ページとして認められなくなってしまうからです。

AMP対応すると何がよいのか

モバイルサイトをAMPの仕様に沿って構築することによって高速化を実現することが可能となりますが、さらにAMP対応にすることで様々な恩恵が受けられるようになります。例えばGoogle検索では、AMP対応したページをGoogleのAMPキャッシュに保存し、これまで以上に高速に表示するようにしています

AMP ページの Google 検索ガイドライン – Search Console ヘルプ

以下のようにAMP対応したページは別枠で表示されるようになり、SEO的にも効果が期待できます。試しにGoogleのスマホ版で「産経ニュース」と検索して、実際にページを表示させてみてください。その表示速度の速さに驚くと思います。

Google検索でAMP対応ページを表示
「産経ニュース」で検索

Google検索以外にも、AMP形式のページは幅広いプラットフォームでサポートされており、Twitterにおいてもツイートの中にAMP対応したページのリンクが含まれていた場合、そのページはGoogle検索と同様即座に表示されるようになっています

Accelerated Mobile Pages (AMP) のご紹介 | Twitter Blogs

WordPressをAMP対応させるには

ここからが本題となります。WordPressをAMP対応させる方法をご紹介します。

既存のページを独自にAMP対応させるのは正直とても難しいですが、WordPressには有効化するだけでAMP対応を実現するプラグインがすでに公開されています。その名も「AMP」というプラグインです。まずはこの「AMP」の導入方法についてご紹介していきます。

WPプラグイン「AMP」を導入する

WordPress ampプラグイン
AMP

WordPressのダッシュボードのプラグインの新規登録のページから「AMP」と検索し、インストールします。インストールしたらプラグインを「有効化」してください。これでAMP対応は完了です

試しに投稿ページを開き、URLの最後に「amp/」とつけて再度ページを表示させてみてください。例えば、当ブログの場合「http://smaafi.net/notice/3984/amp/」を表示すると、以下のようにすべてAMP HTMLに変換されたAMP対応ページが表示されるようになります。

AMP対応ページの例

いかがでしょうか。たったこれだけでAMP対応が実現します。AMP HTMLがどのようになっているか興味のある方は、ソースを開いて確認してみるとよいでしょう。

Google AnalyticsやGoogle AdSenseに対応させるWPプラグイン

AMP対応させるだけであれば、「AMP」プラグインだけでOKです。ただ、先にも述べた通り、AMP HTMLではJavaScriptが使えません。そのため、JavaScriptで実現していたGoogle AnalyticsやGoogle AdSenseなどはAMP対応ページから排除されてしまっています

そこでこれらに対応させるために、別のプラグイン「Facebook Instant Articles & Google AMP Pages by PageFrog」を使用します。

Facebook Instant Articles & Google AMP Pages by PageFrog
Facebook Instant Articles & Google AMP Pages by PageFrog

このプラグインは、AMP対応のページにGoogle Analyticsのような分析ツールやGoogle AdSenseのような広告を対応させるためのプラグインとなります。その他に、ちょっとしたページのロゴやテキストの色やフォントを変更できたりします。ちなみにプラグイン名からもわかるようにFacebookのInstant Articlesにも対応しています。

以下よりこのFacebook Instant Articles & Google AMP Pages by PageFrogの使い方を説明します。

なお、こちらのプラグインは記事の執筆の際にもプレビュー機能が働くようになっており、WordPressの自動保存機能と相性が悪いのかサーバーに相当な負荷をかけることがあります。ご使用の際はご注意ください。

インストールする

WordPressのダッシュボードのプラグインの新規登録のページから「Facebook Instant Articles & Google AMP Pages by PageFrog」と検索し、インストールしてください。インストール後、プラグインを「有効化」するとダッシュボードの左メニューに当プラグインのメニューが追加されます。

pagefrogをインストールする

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

インストールが完了したら、まずはAMP対応ページのスタイルから変更してみましょう。追加されたメニューから「styling」をクリックします。以下のような画面が表示されます。プレビュー画面も表示されるので、確認しながらいろいろと画面のスタイルを調整してみてください。基本的にはテキストの色やフォントの種類を変更するだけとなります。

pagefrogでAMPページのスタイルを調整する

Google Analyticsを設定する

次にGoogle Analyticsを設定してみましょう。

WordPressのダッシュボードの左メニューから「Analytics」をクリックし、表示されたページ上の「GOOGLE ANALYTICS」をクリックします。

PageFrogでGoogle Analyticsを設定する ステップ1

表示されたページ上の「Sign in with Google」をクリックします。ログインを促されるので、Google Analyticsを利用しているGoogleアカウントでサインインします。

PageFrogでGoogle Analyticsを設定する ステップ2

利用したいGoogle Analyticsのコードを選択します。

PageFrogでGoogle Analyticsを設定する ステップ3

Google Analyticsを適用させるために「Enable Integration」をクリックします。

PageFrogでGoogle Analyticsを設定する ステップ4

「GOOGLE ANALYTICS」の部分が「Enabled」となり、選択したAnalyticsコードが適用されます。

PageFrogでGoogle Analyticsを設定する ステップ5

Google AdSenseを設定する

次にGoogle AdSenseを設定してみましょう。

WordPressのダッシュボードの左メニューから「Ads」をクリックし、表示されたページ上の「Sign in with Google」をクリックします。ログインを促されるので、Google AdSenseを利用しているGoogleアカウントでサインインします。

PageFrogでGoogle AdSenseを設定する ステップ1

Google AdSenseを利用しているアカウントを選択します。

PageFrogでGoogle AdSenseを設定する ステップ2

表示させたいGoogle AdSenseの広告ユニットを選択します。

PageFrogでGoogle AdSenseを設定する ステップ3

最後に広告の表示設定を行います。「Enable Google AdSense for AMP HTML Pages」にチェックを入れ、何文字ごとに広告を表示させるか数字を入力して、「Save All Settings」を押して保存します。ここの数字の部分は、「〇Words」となっていますが、段落単位の数値となります(いろいろお試しください)。広告は1ページに3つまで表示されます。

PageFrogでGoogle AdSenseを設定する ステップ4

設定が完了すると、以下のようにGoogle AdSenseの広告が表示されます。

AMPページの広告表示例

nendのAMP対応広告をWordPressに掲載するには

上記の「Facebook Instant Articles & Google AMP Pages by PageFrog」では、Google AdSense以外の広告には対応していなかったので、nendの広告を掲載することはできませんでした。

そこで「nend」などGoogle AdSense以外の広告を対応させるために、別のプラグイン「Custom AMP」を使用します。

custom amp project
「Custom AMP」

このプラグインも上記の「Facebook Instant Articles & Google AMP Pages by PageFrog」と同様、AMP対応ページをカスタマイズするためのプラグインとなります。

以下よりこの「Custom AMP」を使ってnendのAMP対応広告タグを掲載する方法を説明します。

インストールする

WordPressのダッシュボードのプラグインの新規登録のページから「Custom AMP」と検索し、インストールしてください。インストール後、プラグインを「有効化」するとダッシュボードの左メニューに当プラグインのメニューが追加されます。

custom amp panelメニュー

nendのAMP対応広告を掲載する

nendの管理画面よりAMP対応広告タグ(amp-adタグ)をコピーします。

nendの管理画面からAMP対応広告タグ(amp-adタグ)をコピー

WordPressのダッシュボードの左メニューから「Custom AMP Panel」をクリックし、表示されたページ上の「Do you want to add html Code to Footer」の部分にコピーしたnendのAMP対応広告タグ(amp-adタグ)を貼り付けて、保存します。

Custom AMPにnendのAMP対応広告タグをペースト

設定が完了すると、以下のようにnendの広告が表示されます。

nendのAMP対応広告の表示例

まとめ

紹介してきたように、AMP対応は独自で行うと大変難しいものがありますが、WordPressの場合プラグインを使うことで思った以上に簡単に対応可能です。まずはお試しに「AMP」プラグインをインストールして、AMP対応とはどんなものか確認してみるとよいでしょう。

なお、フロントエンドエンジニアとしてAMPを見た場合、個人的にはAMPが今後流行るかどうかは、もうしばらく様子を見て見極める必要があるかなと思っています。正直AMPに対応させるのはかなり難しいです。JavaScriptが使えない、決められたHTMLタグしか使えないなど成約があまりにも多く、すでにJavaSriptでガリガリUIを書いているサイトなどは、AMP対応させるのは容易ではありません。かといってそれなりの労力を使ってAMP対応させたとしても、メリットがどれだけあるのかもまだわかりません。AMP対応できる人が増えない限り、なかなか普及はしないんじゃないかなと見ています。それから、最適化が大変なところがガラケー時代を思い出させ、何か逃げたくなりますね…。

ただ、GoogleやTwitter以外にも大きなプラットフォームでAMP対応が進んでいけば、自ずとAMP対応は必須になっていくと思うので、出遅れないためにもAMPについてある程度知っておいて損はないと思います。やはりあの表示速度は魅力的です。今回紹介したプラグインもまだまだ発展途上だと思うので、今後より高機能になることを期待したいと思います。

「AMP」プラグインでAMP対応についてお試しいただいて、nendのAMP対応広告の掲載方法を確かめていただければと思います。

最後に、実はimgタグもAMP HTMLでは使用できません。JavaScriptタグでない通常のimgタグを使った広告を掲載する場合もAMP対応が必要になります。Moba8.netでも対応を検討中です。

この記事を書いた人

Takanori Maeda
エンジニアやデザイナーだった経験を活かして、スマアフィではアフィリエイトを絡めた技術系の記事をメインに書いています。価格比較サイトでのディレクター経験もあり、アフィリエイトにはなんだかんだで10年以上関わっています。現代音楽の作品で受賞歴もある元ニート作曲家。
スポンサーリンク