アフィンガー5AMP設定 初心者は慎重に行うのが無難です

2020年3月26日

アフィンガー5のAMP設定
ぽん助です。

 

 

AMPとはAccelerated Mobile Pagesの略語です。

Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である

引用:ウィキペディア

https://ja.wikipedia.org/wiki/Accelerated_Mobile_Pages

 

 

アフィンガー5ではAMPが簡単に設定が出来ますが、少し面倒な場合もあります。

 

過去に別の運営サイトを一括AMP設定した所、広告エラーに悩まされて全てAMP化の設定を解除し、大変な目に合った経験があります。

 

安全に無難にAMP設定を行う方法を解説します。

アフィンガー5のAMP化

AMP化の前にサイトのバックアップは、必ず忘れずに行なって下さい。

UpdraftPlus
WordPressバックアッププラグイン「UpdraftPlus - Backup/Restore」設定方法

続きを見る

 

さっそくアフィンガー5のサイトAMP化設定を、まずはやってしまいましょう。

まずは、GoogleAnalytics (アナリティクス)とGoogleAdSense(アドセンス)広告AMP設定の順に説明します。

 

GoogleAnalytics (アナリティクス)AMP設定

 

step
1

  1. Googleアナリティクスサイトを開きます。
  2. 新規でAMPサイトプロパティを作成します。
アフィンガー5のAMP設定

 

 

 

step
2

  1. ウェブサイトの名前:AMPサイトと分かる様に「AMP」は入力しましょう。
  2. サイトドメインを入力します。
  3. 職業:該当するものを選択
  4. レポートタイム:日本を選択
  5. 最後に「作成」をクリックします。
GoogleアナリティクスのAMP設定

 

 

step
3

トラッキングID UA-を除く数字のみをコピーします。

GoogleアナリティクスのAMP設定

 

 

step
4

  1. WordPressの「AFFINGER5管理」画面から「Google連携/広告」を選択します。
  2. 「UA-」を入れない数字のみを入力します。
GoogleアナリティクスのAMP設定
GoogleアナリティクスのAMP設定

 

 

Googleアナリティクスの設定はここまでで完了です。

 

GoogleAdSense(アドセンス)広告/AMP設定

 

 

step
1

  1. Googleアドセンスサイトから左側サイド項目から「広告」をクリックします。
  2. 「サマリ」を選択します。
  3. 「広告ユニットごと」を選択します。
  4. ディスプレイ広告」を選択します。
アドセンス広告のAMP設定

 

 

 

step
2

  1. ユニット名:AMP専用の広告を決めますので、AMPと分かればOKです(今後、復数のサイトごとに決める事はしません。AMPを設定する場合は、このコードを使用する)
  2. 「レスポンシブル」である事を確認します。
  3. 「作成」をクリックします。
1,アドセンス広告のAMP設定
2,アドセンス広告のAMP設定
3,

 

 

 

step
3

  1. 上部の項目「AMP」を選択します。
  2. 「2」番の数字のみをコピーしてアフィンガー5「AMP用のアドセンスコード」に貼り付けます。
アドセンス広告のAMP設定

 

3,「3」番の数字のみをコピーしてアフィンガー5の、AMP設定項目「data-ad-slot」へ貼り付けて「保存」をクリックしてアドセンスの設定は完了になります。

 

 

step
4

ver20200414最新版のAFFINGER5では、AMP設定の場所が「投稿・固定記事」から「Google連携/広告」に移りました

WordPressの「AFFINGER5管理」から下記の「投稿・固定記事」を選択します。

  1. WordPressの「AFFINGER5管理」画面から「Google連携/広告」を選択します。
  2. 下にスクロールして、項目「AMP対応」の場所に移動します。

AMPの設定では、ここが一番注意が必要な設定です。

 

個人的な意見を言うと、1つ目だけにチェックをすると、サイトの記事全部がAMP化されて、今まで投稿した記事が全てがAMP化されるので簡単なんですが、アフィリエイト広告が設置してある記事がエラーを発生する場合が多くあります。(過去にこの設定をして大変な目にあいました。)

 

アフィリエイト広告は一切、設置しないと言うなら一番上だけでOKです。

 

ここ重要

僕が推奨する無難な設定は、2つ目の「 AMPが有効化されている場合にAMPページに向けてrel="alternate"を挿入する」にチェックを入れる事をおすすめします。

 

 

この設定を行うと、記事ごとの項目に「AMP設定・AMPに対応する(β)」とあります全てここでチェックを入れる事になります。

 

面倒ですがこの方法をおすすめします。

既存の記事がある場合も、後でAMP化する記事のみに、チェックを入れて修正します。

 

注意するのはアフィリエイト広告を設置した記事は、ASP広告の修正を行うまで「チェック」を入れないことです。

 

アフィリエイト広告を設置した記事は、ASPからAMP対応のコードを貼り直して修正し、AMP設定にチェックを入れます。

 

僕みたいな面倒くさがりさんは、本当に注意して下さいね。

本当に、後で大変なことになりますからね。(経験済み)

 

補足・新規サイトなら「全ての投稿ページを一気にAMP対応にする」?

新規サイトなら「全ての投稿ページをAMP対応にする」にチェックするのが良いのか?と疑問が浮かんできますよね。

アフィリエイトASPの広告のAMP対応されてるなら問題がないのですが、Amazonの広告にはAMP対応されてないのでエラーが出たりします。

これについてAmazon広告をAMP対応させる参考サイトがあります。
https://nelog.jp/amazon-associate-link-to-amp

 

AMPテスト

AMP化されてるかを下記のURL先でチェックしてみましょう。

AMP設定が非対応の場合下記のように表示されます。

 

AMPチェック

https://search.google.com/test/amp

 

  • チェック方法は、AMP化されてる記事URLの末尾に「amp/」を付け加えてテストを行なって下さい。

 

 トラブル例と解決方法

僕が実際に体験したトラブル例と解決方法を説明します。

Googleの機能拡張「AMP Validator」

■ Googleの機能拡張に「AMP Validator」を入れると、Googleサーチコンソールで記事URLのインデックス登録を行うと、登録出来ない不具合が発生する。

一度機能拡張からoffにしてクロームを終了させる。クロームを再度起ち上げてると登録される。

 

最後に

GoogleはAMPを推奨してるので、AMP化にするには出来るだけ早い段階で、サイトを対応させると面倒な事も少ないと思います。

 

SSL設定をしたのに「保護されてない通信」 表示される
参考SSL設定をしたのに「保護されていない通信」と表示がでる原因と解決方法【AFFINGER5】

続きを見る

 

AFFINGER5(アフィンガー5)のすべて

 

-アフィンガー5
-, , ,

© 2020 副業ブログ運営