【WordPress】AMP導入からAnalytics、Adsense導入まで実は超簡単

      2017/03/21

AMPとは

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。

通常、ウェブページにアクセスするとき、リンクをクリックしてからHTMLを読み込み、ページを表示するため、その分時間がかかってしまいます。一方AMPでは、ウェブページのHTMLをあらかじめGoogleあるいはTwitter側でキャッシュすることで、読み込む分の時間を大幅に削減する仕組みとなっています。

要約:モバイル限定でページをシンプル表示に、読み込み速度を短縮、高速表示させる

AMP導入のメリット、デメリット

AMPのメリット

・ページの高速表示
・カルーセル表示により、記事を読まれる確率が上がる
・検索結果での上位表示される可能性が高くなる

主なメリットは検索上位に表示される可能性が上がり、PV数の上昇に繋がります。

カルーセル表示とは

カルーセル表示とは、Webデザインの一種で、画像などのコンテンツをスムーズに横にスライドさせる表示方法のことである。
カルーセル表示を利用することで、狭いエリアに複数のコンテンツを表示させることができる。主にJavaScriptとCSSの組み合わせてなどによって実現される。

AMP導入のデメリット

・ページデザインが崩れる
通常のHTMLと違いAMPは専用のテンプレートで表示されます。そのため、作成しページのデザインが崩れる可能性がある

・AMP対応前と対応後でデザインやコンテンツをうまく表現できない可能性がある
javaScriptを多用している場合、表示できないコンテンツが出てくる可能性がある

・HTMLとAMPにアクセスが分散する
HTMLとAMPではテンプレートが違いアフィリエイトの収益への影響が出てしまう可能性がある

・一部の広告タグしか利用できない
アフィリエイトなど、広告は現状一部のみしか対応しておらず、上手く表示されない可能性がある

WordPressへのAMP導入方法

Wordpresを使用している場合、AMPの導入は簡単です。
プラグインを導入するだけで、導入は終了します。

AMP — WordPress Plugins←こちらからダウンロードするか、Wordpress管理画面から新規プラグインでAMPをダウンロードしましょう。

AMPの導入自体はこのプラグインを有効化した時点で自動でAMP用のページが生成されます。
AMPページを確認したい場合は、URLの最後に「/amp」を付けることでPCでもAMPページの確認を行うことが出来ます。
特殊なスクリプトなどを使用している場合は一度確認を行いましょう。

AMPにAnalytics、Adsenseを導入する前の注意事項

AMPにAnalytics、Adsenseを簡単に導入できるプラグインとして「Facebook Instant Articles & Google AMP Pages by PageFrog 」というプラグインが紹介されているのをよく見かけます。
実際このプラグインは非常に簡単にAnalytics、Adsenseを実装することは出来ますが、Adsense広告が1か所しか表示されなかったり、位置を選択することが出来なかったりと不便な部分もあります。
snapcrab_noname_2016-12-14_4-55-56_no-00

上記プラグインをすでに実装している場合は、下記の方法は行うことが出来ません。
AMPのテンプレートを書き換えても、上記のプラグインが優先されてしまうため、書き換えても意味がありません。
下記方法を行う時は上記プラグインを停止してから行ってください。

AMPテンプレートへのAnalytics導入方法

AMPテンプレートにAnalyticsのコードを実装します。

WordPressの管理画面→プラグイン→プラグインの編集
編集するプラグインを選択→AMPを選択します。
20161202212553

編集するテンプレートは「amp/templates/single.php」だけです。
Analyticsコードとスクリプトを埋め込みます。

「amp/templates/single.php」のhead>と/head>の間に下記のスクリプトをコピペしましょう。

続いてAnalyticsコードの埋め込みですが、/head>の下に下記のコードをコピペしましょう。
コピペ後"UA-XXXXX-Y"の部分を自身のコードに書き換えてください。

これでAnalyticsの導入は終了です。
ブログのURLに「/amp」を付けアクセスを行い確認してください。

AMPテンプレートへのAdsense導入方法

AdsenseもAnalyticsと同様にスクリプトとコードを埋め込みます。

スクリプトを埋め込む場所はAnalyticsと同じです。
「amp/templates/single.php」のhead>と/head>の間に下記のスクリプトをコピペしましょう。

続いてアドセンスコードを埋め込みます。
下のように埋め込みましょう。ここでは「タイトル上」「本文下」にアドセンスを埋め込んでいます。
こちらもコピペで構いませんが、アドセンスコードと広告サイズを書き換えるのを忘れないようにしてください。

これでAnalyticsとAdsenseの導入は完了です。
最後にブログのURLに「/amp」を付けアクセスを行い確認してください。
「amp/templates/single.php」がAMPページのテンプレートです、間違った埋め込みを行ってしまった場合上手く機能しない場合があります。
もう上手く機能していなく、元のテンプレートに戻すことが出来ない場合は、一度プラグインを削除し、再度プラグインを導入するようにしましょう。

 - ブログSEO

ブログランキング・にほんブログ村へ
にほんブログ村
人気ブログランキングへ