【LION MEDIA】AMP関連の問題が検出?サーチコンソールに届いた警告に対処した件

AMP関連の問題が検出?サーチコンソールに届いた警告に対処した件

ある日、サーチコンソールに「AMPページのエラーを修正してください」というメッセージが!

「AMPってなに?」「どうやって対処するの?」

と思った方は多いはず!

 

この記事では、AMP関連の問題について、対処方法をお伝えします。

avatar

山根ただし

サイトに訪問いただきありがとうございます。
このブログの管理人、山根(@Hackagogo)です。
40歳からのパラレルワーカー目指して、ブログを始めました。
ブログを始めると難しい専門用語によく出くわします。「AMP」はその一つですね。

 

 



 

 

 

サーチコンソールに届いたAMPエラーのメッセージ

 

ある日、サーチコンソールに「AMPページのエラーを修正してください」というメッセージが届きました。

 

「何事?」と思ってメッセージを読んでみると、「AMP関連の問題が新たに検出されたので、問題を修正してください」という内容でした。

 

▲Googleから届いたAMPエラーのメッセージ

 

いままで、最近WordPressのテーマを変更したので、そのタイミングで検出されたのかも……。

 

エラーが出たままにしておくと、Googleの検索結果から除外される場合もあるようです!

さっそく対応することにしました。

 

AMPって何? メリットは?

 

AMP(Accelerated Mobile Pages)とは、簡単に言うと「モバイルページを高速に表示させるための手法」のこと。

モバイルユーザーの体験向上を目的としてGoogleとTwitterが協同して開発を進めた技術です。

 

AMPに対応したサイトは、下図のように検索結果画面でコンテンツがリッチな感じで表示されます。

 

AMPが表示された検索結果
▲AMPが表示された検索結果

 

検索結果画面でこのように表示されたら思わずクリックしたくなりますね!

AMPは今後ますます重要な技術になっていくと思います。

 

ちなみにAMPに対応しているページには⚡マークが表示されます。

 

AMP対応のサイト
▲AMP対応のサイトにはカミナリマークが表示される。

 

 

[adchord]

 

AMPエラーの対処はそれほど難しくない!

 

それでは、さっそくエラー解消の作業を開始します。

僕は2時間程度の作業で対処することができました。

 

AMPに対応しているかどうかは、Googleが無料で提供している AMPテストツール を使います。

有効なAMPページの場合、下図のように表示されます。

 

有効な AMP ページです
▲AMP対応されていると「有効なAMPページです」と表示される。

 

ブログ内の各ページがこのように表示されるようにしましょう!

ちなみに今回の記事では、僕が使っている無料テーマ「LION MEDIA」でAMPエラーが出た場合の対処法を詳細にお伝えしています。

ただし、AMPに対応しているテーマであれば、対処の仕方にそれほど相違はないと思います。
ですからLION MEDIAを使ってないよ~という方でも参考になるはずです!

 

\ あわせて読みたい! /
→ WordPressの無料テーマLION MEDIAがスゴイ理由!

 

 

AMPエラーの内容

 

今回、検出されたエラーの内容は下のようなものでした。

  • 許可されていない属性がHTMLタグ「amp-iframe」にあります
  • タグ「amp-iframe」に属性「sandbox」が複数含まれています。
  • カスタム JavaScript は使用できません。
  • 必須属性「height」がタグ「amp-img」にありません。
  • 許可されていない属性がHTMLタグ「amp-img」にあります。

これだけ見てもよくわからないので、サーチコンソールにアクセスして、詳細を確認してみます。

 

AMPエラーが出たら、サーチコンソールで詳細をみてみよう

 

Googleサーチコンソールとは?
検索結果でのサイトのパフォーマンスを監視・管理できるGoogleの無料サービス。自分のサイトがGoogleにどのように認識されているのかわかる便利なツールです。

 

 

Googleサーチコンソールのメニュー
▲Googleサーチコンソールにアクセスして、左メニューから「Accelerated Mobile Pages」をクリック。

 

 

Accelerated Mobile Pagesのページ
▲サーチコンソールのAccelerated Mobile Pagesの画面。

 

サーチコンソールの「Accelerated Mobile Pages」では、AMPとしてインデックスされたページと、エラーとなったページがわかります。

 

エラー内容が書かれた項目をクリックすると、エラーが出ているページがわかります。

 

AMPエラーの項目をクリック
▲AMPエラーの項目をクリック。

 

 

エラーが出ているページを特定
▲エラーが出ているページを特定できます。

 

AMPテストツールを活用しよう

 

次にGoogleが提供する「AMPテストツール」を見てみましょう。

 

このAMPテストツールは、AMPを正しく設定できているかどうかを検証するためのツールです。

こちらもGoogleが提供しているツール。

 

AMPテストツール
▲AMPテストツールにエラーが発生しているページのURLを入力しよう。

 

サーチコンソールで調べたAMPエラーページのURLを入力してください。

AMPテストツール分析中▲入力したURLのAMPページを分析中。

 

すると、エラーの原因となっている項目が表示されます。

その項目をクリックすると、アコーディオンメニューが開きます。

 

開いたメニューの項目をクリックすると、原因となっているソースコードが表示さるので、そこからエラーとなっている箇所を見つけます。

AMPテストツールでエラーの原因を突きとめる
▲AMPテストツールでエラーの原因を突きとめる。

 

 

[adchord]

 

AMPエラーの解消方法

 

今回対処したAMPエラーの解消方法をひとつずつ見てみましょう!

今回は無料テーマ「LION MEDIA」を使っている人に向けたAMPエラーの解消方法となります。

テーマやプラグインによって、解消方法は少し違ってくると思います。

ですが、対処方法として参考になるものもあると思いますので、ぜひ読んでおいてください!

 

「AMPマークアップがない、または正しくない」という場合のAMPエラー解消方法

このエラーが出た場合の原因は、そもそもAMPが有効になっていない場合に出るようです。

 

LION MEDIAではAMP機能を有効化するだけで簡単にAMPに対応することができます。

WordPress管理画面の「外観」→「カスタマイズ」→「AMP設定」から「有効化」を選択してください。

AMP設定を有効化
▲AMP設定を「有効化」する

 

LION MEDIAには投稿本文をAMPに対応するために、自動的に置き換えと削除をする設定があります。

 

AMP用Script設定
▲AMP用Script設定にチェックを入れておこう。

 

Twitterをamp-twitterに置換
Instagramをamp-instagramに置換
YouTubeをamp-youtubeに置換
iframeをamp-iframeに置換
imgをamp-imgに置換
scriptを削除
style属性を削除
onclick属性を削除
fontタグを削除

 

以上の設定をすれば、「AMPマークアップがない、または正しくない」という場合のAMPエラーは解消できます。

「HTMLタグの禁止された用法、無効な用法」という場合のAMPエラー解消方法

ここでエラーの原因となっているのは、アフィリエイトの広告リンクと他のサイトから画像を読み込むとき。

アフィリエイトの広告リンクは↓のようになっています。

<a href=”https://px.a8.net/svt/ejp?a8mat=××××××××××” target=”_blank” rel=”nofollow noopener”>Xserver Business</a>
<img src=”https://www11.a8.net/0.gif?a8mat=2ZER82+68GFUA+CO4+6B70I” alt=”” width=”1″ height=”1″ border=”0″ />

 

imgにあるborder=”0″がエラーの原因となるタグです。
ですから、この部分は削除してしまいましょう。

アフィリエイトの広告リンクのimgタグとは?
アフィリエイトの広告では、このimgタグを使ってインプレションの測定をしています。
つまり、どれだけ広告が露出したかを測っています。

 

「AMPタグに無効なレイアウトプロパティがある」という場合のAMPエラー解消方法

 

さて、今回一番やっかいだったのが、このAMPエラーでした。
どうやら、吹き出しの会話を表示させるプラグイン「Speech Bubble」がエラーとなっているようです。

プラグイン「Speech Bubble」
▲プラグイン「Speech Bubble」で表示させている吹き出し。

 

この「Speech Bubble」ですが、とても使い勝手が良いプラグインなのですが、どうやらAMP対応していないようです。

アップデートも3年前を最後に止まっていて、WordPressの最新バージョンにも対応していないようなので、この機会に別の吹き出しプラグインに乗り換えることにしました。

 

おすすめは、AMP対応していて「Speech Bubble」同様、コードを貼り付けるだけで使えるWP-Speech-Balloon。

 

プラグインWP-Speech-Balloonの詳細はこちらからご覧ください。
→ https://tips4life.me/wp-speech-balloon-install

 

 

AMPエラーもすぐわかる! Googleサーチコンソール利用のすすめ

 

無事、AMPエラーに対応できました。

 

今回のように、原因を一つひとつ調べて対応してく方法が、結果として一番早いと思います。

 

今回、GoogleサーチコンソールのおかげでAMPエラーに気づくことができました。
Googleサーチコンソールは、サイトを運営するうえで必須のツールなので、導入して上手く活用しましょう。

 

avatar

山根ただし

AMPエラーに対応したら、「XMLサイトマップの再送信」もしくは「Fetch as Google」をお忘れなく!

 

 

  • AMPにはきっちり対応すべし!
  • Googleサーチコンソールは検索エンジン対策には必須!
  • AMP対応の吹き出し会話のプラグインWP-Speech-Ballonを使うべし!

 

 

\ WordPressのテーマ選びに迷ってるなら…… /
→ WordPressの無料テーマLION MEDIAがスゴイ理由!

 

 

広告
>【LCH式】ブログ改善コンサルティング

【LCH式】ブログ改善コンサルティング

勘や経験に頼らないデータドリブンで、Webサイト・ブログを改善します!

特徴1:
Googleアナリティクスを利用した改善提案

特徴2:
データドリブンマーケティング

特徴3:
ご依頼主に合わせた改善提案

CTR IMG