Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法1

SEO界隈の話でAMP(Accelerated Mobile Pages)について、よく聞くようになってきました。

wordpressをAMP化するプラグインも出ていますが、今回は公式プラグインでAMP化した後に一緒に追加したい『Facebook Instant Articles & Google AMP Pages by PageFrog』というプラグインの使い方と設定方法を紹介したいと思います。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法

1.Facebook Instant Articles & Google AMP Pages by PageFrogのインストール

導入したいワードプレスの管理画面でインストールします。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-1

例の如く、プラグインの管理画面にて検索窓に『Facebook Instant Articles & Google AMP Pages by PageFrog』と入力して検索します。

上記画像のプラグインが表示されたら『今すぐインストール』をクリックします。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-2

インストールが完了したら『プラグインを有効化』をクリックします。

インストールはこれで完了です。

2.Facebook Instant Articles & Google AMP Pages by PageFrogの初期設定

2-1.Wordpress公式AMPプラグインがない場合はインストールする

プラグインを有効化すると、自動的にFacebook Instant Articles & Google AMP Pages by PageFrogの管理画面に移動します。

wordpress公式のAMPプラグインをインストールしていないと下記のような画面になります。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-3

Google AMP HTMLの枠内にある『Begin Setup』をクリックするとポップアップが立ち上がります。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-4

ステップ1 Download plugin for AMP support on your articles内の『Download Now』をクリックします。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-5

別タブが開いて公式のAMPプラグインのページに行くので、そのままの勢いでこちらもインストールします。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-6

インストールが完了したら有効化します。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-7

AMPプラグインが有効化されていると、左側のメニューに『Mobile Formats』が追加されているはずなので、その下の階層の『Setup』をクリックしてみましょう。

下記のように、Google AMP HTML枠内にReadyと表示されていればOKです。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-8

2-2.Stylingの設定

デザインの設定になります。

基本的にはロゴの設定くらいしか使わないでしょうか。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-9

2-3.Analyticsの設定

アクセス解析などの設定になります。

自分はGoogleAnalyticsを利用しているので、左上のGoogleAnalyticsをクリックします。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-10

ポップアップが表示されるので、Googleにログインして連携しましょう。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-11

その後、プロファイルを選択する画面になるので、該当するプロパティを選択します。

※通常とAMP対応のページを分けて分析するには、事前に別のプロファイルを作っておくと良いようです。

Googleアナリティクスは、事前にAMPページのためのプロパティを新たに作成しておいてください。
今使っているGoogleアナリティクスのプロパティとは分けます。
一緒にすることはできますが、分析がややこしくなります。

GoogleAnalyticsと連携したら、『Enable Integration』をクリックして有効化してください。

2-4.Adsの設定

基本的に使うのはGoogleAdsenseの設定になります。

左下のボタンからGoogleAdsenseと連携します。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-12

AdSenseも事前に、AMPページ用の広告ユニットを作成しておいてください。
設定プロセスで選べます。
フォーマットは任意です。

これもしっかりと分析したい場合は、広告ユニットを別にしたほうが良いようです。

ちなみに僕はAnalytics・Adsense共に分けませんでした。

理由は仕事とは違うので、そこまで細かい分析をすることはないかなーと・・・。

2-5.settingの設定

settingページの項目ですが、こちらもGoogleの箇所だけ設定しました。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-13

投稿 0 of 81 enabled
固定ページ 0 of 1 enabled
共通コンテンツ一覧 0 of 0 enabled
ランディングページ一覧 0 of 0 enabled

上記のように表示されていますが、これはまだ設定の反映されたページが0ページということです。

ページの分類ごとに、細かく設定することができます。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-14

今回はすべてのページを対応したかったので、『Select All』をチェックした後に『Enable AMP』をクリックして有効化しました。

Facebook Instant Articles & Google AMP Pages by PageFrogの使い方と設定方法-15

今後の新しいページも自動的に対応させたいので、『Default setting for new posts:』の項目も『Enabled』を選択して保存しました。

Facebook Instant Articles & Google AMP Pages by PageFrogのまとめ

まず、公式のAMPプラグインをインストールしていることが前提となります。

後は日本語対応していないものの、シンプルな設定なので英語がわからなくても対応できるんじゃないかなと思います。

対応直後はSearch Consoleにも反映されていませんでしたが、2-3日すれば反映されるんじゃないかと期待しています。

AMPが今後検索順位にも影響するような話になっていますが、なんだかんだモバイルフレンドリーの時のように、すぐに大きな変動があるわけではなく、ジワジワと変化が出てくるんじゃないかなと思っています。

そのあたりも気にしながら見守っていこうと思います。