Emanon AMP

AMPとは、Accelerated Mobile Pagesの略語です。モバイル端末でWebページを高速表示するためのフレームワーク(AMP HTML)、またはGoogleとTwitterが共同開発しているプロジェクトの名称です。

AMPのフレームワークに沿って作成したWebページは、GoogleやTwitter側にキャッシュとして保存されます。その結果、モバイル端末での読み込み時間が短縮され、Webページが従来よりも瞬時に表示されます。

Webページの読み込みに3秒以上かかると40%の人がサイトの閲覧を諦めるという調査結果※もあり、Googleウェブマスター向け公式ブログでもWebページの読み込み速度の重要性について言及しています。

※引用元: How Loading Time Affects Your Bottom Line

プラグインの機能

Emanon AMPは、AMPプラグイン(Automattic社製)を親とする子テンプレート方式のプラグインです。Emanon AMPを利用することで、Emanonのテンプレートに近いAMPページにすることができます。

投稿ページがAMPページ化されます。AMP化されたページをご確認ください。

機能一覧

WordPressプラグインAMPの処理を継承
Googleアナリティクス対応
Googleタグマネージャー対応
Google Adsense AMP 広告ユニット対応
配色機能対応
SNSシェアボタン表示（はてなブックマーク・Pocketは非表示）
SNSフォローボタン表示
CTA表示
投稿者プロフィール表示
前の記事次の記事表示
関連記事表示
カスタムCSS設定の反映

プラグインの使い方

Emanon AMPをインストールし有効化します。AMPプラグイン(Automattic社製)がインストールされていない場合、下記アナウンスが表示されます。

AMPプラグイン(Automattic社製)を有効化しTemplate ModeをClassicにし、Supported Templatesを投稿に指定します。次にEmanon AMPの設定を行います。カスタマイズ > AMP設定をクリックすると次のメニューが表示されます。

AMP ロゴ設定

ロゴ画像のサイズは、200px × 50pxです。

AMP CTAの表示

AMP用のCTAを設定できます。画像サイズは800px 400px（２:１）を推奨します。

Googleトラッキングタグ

GoogleアナリティクストラッキングIDまたは、GoogleタグマネージャーコンテナIDのどちらかを入力することでAMPページのアクセス解析ができます。

Google Adsense AMP 広告ユニット

Google AdSenseの管理顔面にログインし、レスポンシブ広告ユニットを作成してから次の情報をコピーします。

サイト運営者 ID（data-ad-client）（例: ca-pub-1234567891234567）
広告ユニット ID（data-ad-slot）（例: 1234567890）

AMP対応の広告を設定するには、レスポンシブ広告ユニットのコードからこれらの2つの値が必要になります。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567891234567"
     data-ad-slot="1234567890"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-1234567891234567"

data-ad-slot="1234567890"

data-ad-format="auto"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

サイト運営者 ID（data-ad-client）と広告ユニット ID（data-ad-slot）をGoogleアドセンスタグ設定画面の該当箇所にそれぞれ反映します。以上でAMP対応のアドセンス広告が表示されるようになります。確認される際は、スマホのWEBブラウザから記事URLの末尾に/ampと入力して記事をご覧ください。広告の表示は記事本部の下となります。