素人がブログをAMP＆広告の自動挿入に対応させてみました

皆さんはAMP(Accelerated Mobile Pages)をご存知でしょうか。

AMPとはGoogleが推進するプロジェクトで簡単に言えばモバイル環境でのページの読み込みが4倍ぐらい速くなるというもの。

本ブログでもAMPを一時導入していたのですがその後訳あってもとに戻していたのですが、この度再度導入という流れになりました。

本記事ではAMPを導入した流れなどを紹介します。

AMP導入のメリット

やはりメリットがなければわざわざ導入しませんのでAMPを導入することのメリットを紹介しますと

• モバイル環境でのページの読み込み速度が向上することによるユーザー満足度の向上
• 検索キーワードと関連したコンテンツはGoogleの検索結果上位に表示されやすい(SEO面でのメリット)

というところ。

実際本ブログのPVは検索流入が多くを占めていますのでPVを増やすことを狙った場合、検索結果上位に表示されやすいというのは大きなメリットです。

ここだけ見れば、AMPを導入しない手はないのですが、デメリットも存在します。

AMP導入のデメリット

前項ではメリットを紹介しましたが今度は逆にデメリットを紹介します。

まず大きなデメリットとしてデザインが大きく崩れます。

本ブログの記事の一般的なページとAMPで表示されるページをそれぞれ紹介します。

こちらが通常表示されるページ

続いてこちらがAMPで表示されたページ

このようにデザインが大きく崩れてしまいます。1万円ぐらいだして購入したテーマなのですがAMPでは無慈悲にも一切反映されません。

また、モバイルページの場合は記事下にPCのサイドバーに挿入されているウィジェットが表示されますがAMPの場合はこちらも一切非表示に。

基本的には記事の内容のみ表示されるといった感じです。

そしてもう一つのデメリットが広告の自動挿入ができなかったという点。

本ブログでは採用しているテーマ「Stork」のウィジェット機能を用いてタイトル下、記事下にそれぞれadsenseの自動挿入とfunctions.phpをいじることでmoreタグをadsenseに置き換える形で記事本文中にadsenseを挿入しています。

これらの設定もAMP向けのページでは一切反映されません。

このあたりの事情から一度AMPを導入した後に元に戻していたのですが、解決方法が見つかったので今回再度導入しました。(方法は後述)

導入の流れ

本ブログではWordpressを使用していますのでこの内容はあくまでもwordpress向けのものになります。

まずAMPを導入する場合、Wordpressのプラグイン「AMP」を導入します。

これを有効化するだけでAMPの導入は完了します。

この段階では前述の通り広告の自動挿入ができないので今回は別のプラグイン「AMP for WP – Accelerated Mobile Pages」を導入しました。

このプラグインのいいところはいくつかあるのですが

• adsenseの記事上・記事下の自動挿入に対応
• 記事下に関連記事を表示できる

といったところ。特に関連記事の表示はユーザーあたりのPVを増やせるので大きなメリットです。

導入した2つのプラグインを両方有効化した状態でadsenseの自動挿入の設定を行います。

まずはじめにプラグインの一覧から先ほど導入したAMP for WPのsettingsを選択

次に左サイドバーのAdvertisementを選択します。

記事に表示させたい場合はAD #3とAD #4を設定します。

大きさの指定とdata-ad-client、data-ad-slotを指定します。

data-ad-clientとdata-ad-slotはご自身のadsenseのコードから引っ張ってきていただく流れになります。

参考になる記事はこちら

一応これでAMPと広告の自動挿入に対応していることが確認できました。

一応導入から24時間ぐらい経過しているのですがAMP向けのページにもそれなりにアクセスはあるので導入した効果はありと言って問題なさそうです。

以上簡単なAMP導入の流れと広告自動挿入の方法の紹介でした。

一応記事URLの末尾に/ampを付与すれば強制的に表示できるはずなのでどんなものか見てみたい方は是非やってみてください。

いかんせん素人なので内容に間違いなどあるかもしれませんが、分かり次第修正していきたいと思います。