【AFFINGER 5】AMP対応の手順。どうせやるなら早めにやっといた方がいいよ。

AFFINGER ブログ運営

【AFFINGER 5】AMP対応の手順。どうせやるなら早めにやっといた方がいいよ。

投稿日:

ども、とんじるです。ぶっひん。

このブログを始めて、もうすぐ1年になるのですが、「最初からやっときゃよかったかな?」と思いつつ今までほったらかしていた「AMP対応」を今回やってみました。ブログ初心者にはハードル高いかもしれないですが、AFFINGERなら最初から AMP対応なので簡単。どうせやることになるなら最初からやっといたほうがいいかも?

AMPって何?

そもそもAMPってなんでしょう?最近見なくなったコンビニのことでしょうか(違います)。

AMPというのはAccelerated Mobile Pagesの略で、直訳すると「高速化されたモバイルページ」ってかんじですかね? モバイル用にページを高速化させる「お約束事」のようなものだそうです。

これに対応したページは表示が爆速になるので、読み込みが遅いがゆえに途中離脱されてしまうということが少なくなり、ページ滞在時間や回遊率が上がるなどの効果が期待されるらしいです。

そんなにいいのなら、みんなAMP対応にしちゃえばいいのに、って思いがちですが、AMPは表示を高速化させることを優先しているので仕様にかなりの縛りがあって、サイトによっては表示やデザインが大きく崩れてしまうこともあるんだそうです。

そんなわけで今まで気になりつつもほったらかしにしていたのですが、このブログもモバイルユーザーさんの方が多いので、どこかでやっとかないとなあ、と思っていた次第であります。

Google Adsenseからオススメされた

ある日、いつものようにGoogle Adsenseをチェックすると「改善のお知らせ」とAMP化を勧める表示が出てきました。

AMPによる最適化の提案

なんとなく気になっていろいろサイトをみて調べてみると、とんじるが使っている「AFFINGER 5」は最初からAMP対応になっているらしいじゃないですか?

「じゃあいいやそのうちやろ」と一旦は棚上げしつつも、やっぱり気になるのでまずは現状把握からと「PageSpeed Insights」というGoogleさんのページで表示速度について調べてみました。なんでも70点以上ならまあまあOKらしいっす。

まずはPCでの表示について。

PageSpeed Insightsによる診断_PC

74点。まあまあなんでしょうかね?では次にモバイルでは?

PageSpeed Insightsによる診断_mobile

じ、13点???

これはまずい!職員室に呼び出されるレベルです!!「お前このままじゃ卒業できんぞ?」と。

ということで、早速対策です!

 

AFFIGER 5でのAMP対応までの下準備

まずは何より、作業前にはデータのバックアップをしておきましょう。とんじるは「UpdraftPlus」という無料のプラグインを使っています。

バックアップができたらWordPressの「ダッシュボード→設定→パーマリンク設定」へ進み、なにもせずに「変更を保存」をポチりとやります。

これ、大事らしいです。これやっとかないとAMPページが404エラーになっちゃうこともあるみたい。

これで下準備はOK。

AFFIGER 5でのAMP設定

それでは早速AMP対応のための各種設定を開始します。ここからは管理画面と他のページを行ったり来たりしますので、右クリック(Macの場合はControl+クリック)で別タブ表示したほうがわかりやすいですね。

Googleアナリティクスのトラッキングコード

まずはAMP専用にGoogleアナリティクスのトラッキングコードを取得します。

Googleアナリティクスにログインして、画面左下の「管理(歯車アイコン)」をクリック。

真ん中のコラムにある「プロパティ」のタイトル右にある「+プロパティを作成」をクリックします。

すると下のような入力画面が出てきますので必要事項を入力していきます。

「ウェブサイトの名前」欄は区別がつきやすいようにしておきましょう。とんじるは「merumae-AMP」にしました。

URLを入力して業種は「その他(適合するものがあればそれ)」、レポートのタイムゾーンは「日本」を選択。

すると下に「このアカウントにはプロパティが1つ(複数の場合はその数)あります。」と出ますが、1つのサイトで50個までプロパティ作成は可能ですので無問題。

入力内容をもう一度確認して「トラッキングIDを取得」をポチり。

すると初心者には「うっ」とくるようなコードが表示され「このコードをコピーして、トラッキングするすべてのウェブページの <HEAD> 内の最初の要素として…」と脅すようなことばが書いてありますが、ここで必要なのは「UA-」で始まる数字の部分だけです。

これをAFFIGER 5の「ダッシュボード→AFFIGER 5管理」の「Google連携に関する設定」「アナリティクスコード(トラッキングID)※AMP用:UA-」欄にコピペします。

AMP用のアドセンスコード

今度はAMP用のアドセンスコードを取得します。

まずGoogle AdsenseでAMP用の広告ユニットを作成しましょう。左のメニューから「広告→広告ユニット」を選択。「+新しい広告ユニット」をクリックします。

広告の種類は「テキストとディプレイ広告」、広告サイズは「レスポンシブ」とします。「AMPレスポンシブ」とか適当な名前をつけて「保存してコードを取得」をポチり。

AFFIGER 5管理画面に戻って「AMPアドセンスコード」欄に取得したコードから「data-ad-client(ca-pub-以降の数字)(①)」と「data-ad-slotの数字部分のみ(②)」をコピペします。

ここまででAFFINGER 5の管理画面の入力は完了です。最終的には下記のように入力できていればOKです。

AFFINGER 5のAMP設定画面

AMP化は「ページ単位」で

これでAMPの設定は完了です。でもまだサイトがAMP化されているわけではないですよ。

これから投稿ページをAMP対応にしていくわけですが、いちいち1ページずつやっていくのは大変ですよね。

AFFIGER 5では、「ダッシュボード→AFFIGER 5管理→投稿・固定記事」に「AMP対応」という欄があり、ここの「全ての投稿ページをAMP対応にする」にチェックを入れるだけで、すべてのページが一気にAMP対応になります。

AMP対応

でもここはあえて、各ページ単位での対応をおすすめします。

AMP化というのは、あくまでモバイルでの表示を速くするためのものなのでいろいろと技術的な制限があります。たとえば今回はアドセンス広告については設定しましたが、ASP経由で貼っているアフィリエイトリンクはAMP専用のものが用意されていることがほとんどなので、リンクをすべて貼り直さなければなりません。

何も考えずにAMP化すると大事な広告が表示されなくなってしまうことも。広告が表示されなくなって収入が減っては意味ないですからね。

AFFINGER 5ではこの辺よく考えられていて、AMPの設定とページへの反映は別となっています。
記事を書いていて気づいている方も多いと思いますが、各記事の投稿ページ右コラムに「AMP設定」という欄があり、ここにチェックを入れることでページごとに個別に設定が可能です。

今回ご紹介した基本設定までやっておいて、各ページの対応はじっくりやられてもいいかと思いますよ(とんじるもそうします)。

というわけでAMP化、初心者にはちょっとハードル高いかもしれませんが、AFFINGER 5ならとっても簡単です。ブログを始めて記事が多くなればなるほど面倒臭くなることうけあいですので、どうせやるならAdsenseの審査が通ったら設定してしまってもいいかもしれませんね。

ユーザーフレンドリーなサイトを作って、収益化を目指していきましょうね。

そんじゃまた。ぶっひん。

この記事が気に入ったら
いいね ! しよう

-AFFINGER, ブログ運営

Copyright© merumae〈めるまえ通信〉 , 2019 All Rights Reserved Powered by AFFINGER5.