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

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

プラグインの機能

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

機能一覧

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

プラグインの使い方

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

AMPプラグイン(Automattic社製)を有効化しテンプレートモードをリーダーに指定します。対応テンプレートは、投稿のみにチェックを入れます。

次にEmanon AMPの設定を行います。外観 > カスタマイズ > AMP設定をクリックします。

AMP ロゴ設定

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

AMP CTAの表示

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

Googleトラッキングタグ

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

Googleアドセンスタグ

AMP対応広告設定

Google AdSenseを表示するには、サイト運営者IDと広告ユニットIDが必要です。

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

Google AdSenseの管理顔面にログインし、レスポンシブ広告ユニットを作成しサイト運営者IDと広告ユニットIDをコピーします。

<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>

Googleアドセンス AMP自動広告

AMP自動広告とは、ページのどの位置に広告を掲載すれば良いか最適化が自動的に行われる広告ユニットです。

Google AdSenseの管理顔面にログインし、AMP自動広告ユニットを作成してからサイト運営者 ID（data-ad-client）（例: ca-pub-1234567891234567）の情報をコピーします。

アドセンス広告は表示されるまで時間がかかりますのでご注意ください。

その他設定

配色やSNSシェアボタン、投稿者プロフィール、前の記事 次の記事、関連記事の表示については、カスタマイズ設定の内容がAMPページにも適用されます。また、投稿ページ単位のCSS設定（カスタムCSS設定）も同様にAMPページにも適用されます。

ページ単位でAMPを無効にする

Emanon AMPを有効化すると、全投稿ページがAMP化します。AMPを無効にしたいページは、投稿ページの編集画面より「AMPを無効にする」にチェックを入れて保存してください。

AMPページのインデックス

AMPページがGoogleにインデックスされると、検索結果にAMPと表示されるようになります。クリックすると、ページの表示速度が格段に早いことが実感できます。

AMPページの確認方法

Emanon AMPを有効後、ブラウザでURL末尾に/ampと入力することで、AMPページを確認することができます。

  • 元 https://wp-emanon.jp/emanon-pro/front-page/
  • AMP https://wp-emanon.jp/emanon-pro/front-page/amp

Googleが提供するAMPテストにURLを入れることで、AMPページのエラーをチェックできます。

動作環境

［注意］Emanon AMPは、Emanon Premiumで使用できません。

  • AMPプラグイン(Automattic社製)の有効化
  • Emanon Free ver 1.2.3 以降
  • Emanon Pro ver 1.3.1 以降
  • Emanon Business ver 1.2.4 以降

利用条件

プラグイン1個の購入で複数のサイトにご利用いただけます。

商品の購入方法

カード決済（PayPal)でご購入いただけます。決済後すぐにご登録メールアドレスに商品を自動送付します。

2,980円 – カード決済で購入