みらしん

読者の未来に、少しでも役立つネタを配信するブログ。

AFFINGER ブログをAMP対応する方法と注意点

更新日:


AFFINGERのAMP対応方法ブログ_導入画像

WordPressのAFFINGERテーマを使っていて、AMP対応を考えている方に、読んでほしいブログです。

モバイルページを高速化できるAMPですが、AFFINGERテーマを使っていれば簡単にAMP化することができます。

【参考】AMP化したページ
(モバイルで見てください。)

そこで今回は、AFFINGERテーマのブログをAMP化する方法と注意点について書いていきます。

スポンサーリンク

PC300×250




AMP化する前に知っておくべきこと

まずAMP化する前に、AMPの概要、メリット、デメリットは簡単に知っておきましょう。

AMPとは、モバイルでウェブページを高速化させる仕組みです。

ページをAMP化させると、通常のページとは別に、URLの異なるAMP用のページがもう1つ出来上がります。

なぜページが高速化するかというと、読み込みに時間がかかるJavaScriptを表示させないなど、ページを高速化させる仕様になるからです。

AMP化は今のところ直接的に検索のランキングに影響しませんが、ページの速度が上がる、離脱率が下がるなどして、間接的にページの評価が上がる可能性はあります。
(ページの速度自体はランキングに直接影響すると言われています。)

ただし高速化の代償として、AMP用の設定が必要になったり、JavaScriptで表示されていた画像や広告などが表示されなくなったり、導入にあたりデメリットも存在します。

AMP化する方法

AMPが理解できたところで、AFFINGERのブログをAMP化する方法を紹介していきます。
※私はAFFINGER4を使っており、別バージョンでは少し異なる可能性があります。

AMP化する方法は、AFFINGER作成者のブログを参考にしています。

【参考】AMP対応のWordPressテーマ「AFFINGER5」について

AMP用サイドバーメニューの設定

AMP化されたページは、サイドバーメニュー(三本線のメニュー)が表示されないので、AMP用のメニューを設定していきます。

「外観」にある「ウィジェット」をクリックします。

AFFINGERのAMP対応方法ブログ_画像1

「AMPサイドバーウィジェット」に「01_STINGERサイドバーメニュー」を挿入します。

AFFINGERのAMP対応方法ブログ_画像2

これで設定は完成です。

AMP用のグーグルアナリティクスの設定

AMP化されたページは、そのままだとグーグルアナリティクスで計測ができないため、AMP用の計測設定をしていきます。

「STRINGR PRO管理」をクリックします。

AFFINGERのAMP対応方法ブログ_画像3

「Google連携に関する設定」にある「アナリティクスコード(トラッキングID)※AMP用:UA-」という場所に、AMP用のページを計測するアナリティクスのコードを入力します。

AFFINGERのAMP対応方法ブログ_画像4

AMP用のページを計測するコードは、既に使っているコードと同じでも計測可能です。

一方で、AMP用のページを分けてトラッキングしたい方は、グーグルアナリティクスで新しいコードを発行し、入力する必要があります。

グーグルアナリティクスで歯車のアイコン(設定)をクリックします。

AFFINGERのAMP対応方法ブログ_画像5

「プロパティを作成」をクリックします。

AFFINGERのAMP対応方法ブログ_画像5.5

プロパティの設定で、「ウェブサイトの名前」は好きな名前、「ウェブサイトのURL」はサイトのURL(//以下)をそのまま入力し、作成します。

AFFINGERのAMP対応方法ブログ_画像6

設定画面のトップで、プロパティの「▼」をクリックすると新しいプロパティが確認できるので、新しいプロパティをクリックします。

AFFINGERのAMP対応方法ブログ_画像7

トラッキングIDの場所にあるUA-以下をコピーします。

AFFINGERのAMP対応方法ブログ_画像8

「アナリティクスコード(トラッキングID)※AMP用:UA-」に貼り付けます。

AFFINGERのAMP対応方法ブログ_画像9

あとは設定を保存して、設定の完成です。

AMP用のアドセンスの設定

AMP化されたページは、そのままではアドセンスが表示されないので、AMP用のアドセンスを設定していきます。

先ほどのアナリティクスコードの下に「AMP用のアドセンスコード」とあり、「data-ad-client(ca-pub-以降の数字)」「data-ad-slot」の場所にアドセンスのコードを入力します。

AFFINGERのAMP対応方法ブログ_画像10

アドセンスのコードは、既に設定してある場所から「data-ad-client」「data-ad-slot」を見つけて、数字をコピーします。
(「data-ad-client」はca-pub-以降の数字)

AFFINGERのAMP対応方法ブログ_画像11

「data-ad-client(ca-pub-以降の数字)」「data-ad-slot」の場所に貼り付けます。

AFFINGERのAMP対応方法ブログ_画像12

あとは設定を保存して、設定の完成です。

AMP化したいページでAMP化の設定

AFFINGERテーマでは、AMP化したいページごとにAMP化の設定をしていきます。

AMP化したいページの設定画面で、「AMP設定」をクリックして開き、「AMPに対応する」にチェックを入れます。

AFFINGERのAMP対応方法ブログ_画像13

ページを更新すれば、対象のページのAMP化が完了しています。

AMP化されたページの表示を確認

AMP化の設定が完了したら、AMP化されたページの表示を確認していきます。

AMP化されたページは、URLの最後に「amp」を付けると確認ができます。

AFFINGERのAMP対応方法ブログ_画像14

AMP化されたページが開きました。

AFFINGERのAMP対応方法ブログ_画像15

AFFINGERのAMP対応方法ブログ_画像16

見てのとおり、背景色がAFFINGERのデフォルト色(灰色)になっているなど、通常のページとデザインが異なっていることがわかります。

ただし、ページの表示速度はめちゃくちゃ速いです。

他にも「AMPテスト」のサイトで、AMP用のURLを入れることで、ページの有効性をテストすることができます。

AFFINGERのAMP対応方法ブログ_画像17

AFFINGERのAMP対応方法ブログ_画像18

他、AMP対応でやったこと

AMP対応は一応完了しましたが、背景色が灰色のままだったので、背景色を白にする設定をしました。

「外観」にある「テーマエディター」をクリックします。

AFFINGERのAMP対応方法ブログ_画像19

「st-amp-css.php」をクリックして、ファイルを開きます。

AFFINGERのAMP対応方法ブログ_画像20

コードのなかから「body」を探し、「background-color: #f2f2f2;」(灰色)を「background-color: #FFFFFF;」(白)に書き換えます。

AFFINGERのAMP対応方法ブログ_画像21

AMP化されたページの背景色が白に変わりました。

AFFINGERのAMP対応方法ブログ_画像22

他にも、広告枠広げる、Google+ボタンを削除、グーグルの関連コンテンツを表示させる…など作業は残っているのですが、今回はここまでにしておきます。

AMP化の注意点

最後に、AFFINGERをAMP化したあとに気づいた注意点をまとめておきます。

AMP用のデザインは、別で設定する必要がある

先ほどの背景色もそうですが、見出しのデザイン、シェアボタン、広告の大きさなど、AMP用のページではデザインが反映できていませんでした。

AFFINGERではAMP用にファイルが分かれているので、そこでコードを設定し直す必要があります。

プラグインがほぼ機能しない

通常のページではプラグインを使って記事上部にシェアボタンを表示しているのですが、AMP用のページでは表示されていませんでした。

このようにAMP用のページでは、プラグインがほぼ機能しないようなので、プラグインを使っている方は注意が必要です。

amazonのアフィリエイトなどが表示されない

今回のページにはないですが、amazonのアフィリエイトが貼ってあるページをAMP化したときに、amazonのアフィリエイトが完全に表示されなくなっていました。

amazonのアフィリエイトは、AMPに対応するコーディングを別途しないと表示ができないようです。

amazonだけでなく、A8もバナーのみAMP化されたコードで表示可能など、アフィリエイト各社でAMPの制約があるようなので、注意が必要です。

以上、AFFINGERテーマで、ブログをAMP化する方法と注意点でした。

今後、AMPはますます普及してくると思うので、今のうちに準備しておいたほうが良いと思います。

お付き合い頂き、ありがとうございました!
何かあれば、ツイッターメールまで。

PC300×250




PC300×250




-ブログ運営

Copyright© みらしん , 2019 All Rights Reserved.