AMP対応でグーグルからエラー修正の警告!対処方法を検証してみた

 

現在Googleが推し進めているWEBサイトのAMP(Accelerated Mobile Pages)への対応について書いていきます。

AMPについては、以前にも下記の記事でご紹介してきました。

 

 

WordPressを利用している場合には、プラグイン「AMP」をインストール&有効化することで対応できます。

しかし、多くの人がGoogleからのエラー修正メッセージを受け、その対処方法に悩んでいるようです。

 

このメッセージはGoogleアカウントのGmailと、SearchConsole(ウェブマスターツール)内のメッセージとして届きます。

 

そこで、このメッセージを受け取った際の対処方法について、僕のケースに基づいてお話ししておこうと思います。

 

SearchConsole内のメッセージから対処する

ある日、GoogleのSearchConsoleを開いてみると、ダッシュボード左上の「メッセージ」のところに、メッセージが届いていることを表す数字が表示されていました。

 

それが「AMP ページのエラーを修正してください」というものでした。

 

「詳細を表示」⇒「AMP エラーを確認する」と進むと、次のようなページが開きます。

 

 

問題の項目と、それに抵触しているコンテンツ(記事)の数が表示されています。

「重大度」の欄に「致命的」などと表示されていて、さすがにドキッとしますね。

 

そこで、上から順に右端の「>>」をクリックしてみます。

 

 

上図のように、問題のあるコンテンツの一覧が表示されます。

 

そこで、さらに「>>」をクリックしてみると、下図のようにそのページの何が問題なのかを指摘しています。

 

 

『属性「type」はタグ「ul」で使用できません。』と書かれているので、WordPressのエディター(テキスト表示)から問題の記事を確認してみました。

 

すると、箇条書きのためのタグ内に、表示を指定する「type」タグが仕込まれていることが判りました。

これが禁止されているということなので、下記のように修正します。

 

<ul type=”disc”> ⇒ <ul>

 

続いて、上図の「AMP ページをテスト」欄の右にある「ページをテスト」をクリックします。

すると下図のように表示されました。

 

 

これでこの記事については問題ない・・・と思ったのですが・・・。

1つの記事内に複数の問題を指摘されている!?

問題の項目を1つずつ確認していくと、1つのコンテンツ内に複数の問題点が指摘されているケースが多いことに気づきました。

 

その内容には次のように書かれています。

 

  • 属性「type」はタグ「ul」で使用できません。
  • タグ「html for top-level html」の親タグは「$root」ですが、「!doctype」のみ使用できます。
  • タグ「link rel=」の属性「rel」に無効な値「canonical」が設定されています。
  • タグ「style amp-custom」の親タグは「body」ですが、「head」のみ使用できます。
  • タグ「link rel=」の属性「rel」に無効な値「stylesheet」が設定されています。
  • 属性「charset」はタグ「meta name= and content=」で使用できません。
  • タグ「script」は特定の形式以外は許可されていません。

 

『属性「type」はタグ「ul」で使用できません。」については、先ほど対処したからOKですね。

しかし、それ以外の指摘については、僕の知識では意味も判らず対処のしようがありません。

 

しかし、問題は指摘されているものの、先ほどの「AMPテスト」では「有効なAMPページです」という結果が出ています。

 

では、これらの残された問題点については放置して良いものなのか・・・? という疑問が残ります。

「構造化データ」に関する指摘は無視してもOK?

AMP対応の必要性がささやかれるようになって1年くらいになるでしょうか?

その仕様についても少しづつ変更が生じているようです。

 

以前チェックした情報によれば、次のようなことが書かれていました。

 

以前はエラーに抵触していた「構造化データ」については、推奨レベルとなり、必須事項ではなくなりました。

 

「構造化データ」とは次のようなものを言うそうです。

 

構造化データとは、HTMLで書かれた情報が何を意味するのかを、検索エンジンやその他のクローラーに理解できるようタグ付けしたものです。
人間ならばWebページを見れば、その文字列が会社の名前であるとか、お問い合わせ電話番号であるとかがわかりますが、ロボットには理解することは困難です。
そこで、あらかじめ決められたフォーマットをもとに、そのような文字データ(data)をロボットにも理解できるよう構造化して(structured)記述したものが構造化データ(structured data)です。

引用元:brain-solution.net

 

そこで僕は、先ほどの残された問題点について、「構造化データ」に関するエラー表示なのではないか・・・? と想像しました。

 

でも、自分で判断ができるほど知識がないので、「Googleウェブマスターヘルプフォーラム」に質問してみることにしたんです。

 

それが次のような内容です。

 

「AMP対応についてのSearchConsoleのエラー修正メッセージについて」

SearchConsoleの「Accelerated Mobile Pages」に、AMPの該当する問題を修正するように警告されました。

しかし、AMPテストツールにかけると「有効なAMPページです」との結果が出ます。

以前は必須とされた「構造化データ」が、推奨レベルになったと聞きました。

それによるものでしょうか?

だとすれば、AMPテストツールの結果が「有効」であれば、SearchConsoleで問題とされる修正課題は、当面スルーして大丈夫なのでしょうか?

 

これに対して有識者の方が回答してくださったのですが、それがおおよそ次のような内容でした。

 

AMPテストツールの結果が「有効」で、モバイル検索した際にAMPマークが表示されていれば問題なし。

「構造化データ」はカルーセルに表示する時のみ必要。

カルーセルの導入を考えていないのであれば、このエラーに限り無視しても問題無い。

 

「カルーセル」とは、次のようなものを指します。

 

カルーセルとは
カルーセル[carousel]とは、メリーゴーランドや空港の回転コンベアーなど、くるくると回るものを指し、WEBデザインにおいては、横に自動でスクロールするスライドギャラリーの様なもののことを指す。単純にスライドショーと表現する事もある。

引用元:design-gallery.biz

 

このアドバイザーによれば、AMPの本来のパフォーマンスはカルーセルでも発揮されるそうで、現在はニュースサイト以外でも多く用いられているそうです。

 

なので、サイトによっては「構造化データ」のマークアップも検討してみては? ということでした。

 

また、修正を施したコンテンツがチェックツールに反映されるには時間がかかるそうなので、「修正したのにエラー表示する」という場合は、少し時間を空けて確認すると良いそうです。

 

【まとめ】AMPエラー対応で判ったこと

SearchConsole内のメッセージに見られる問題点のうち、「構造化データ」に関連するエラーは推奨レベルであり、必須ではない。

なので、以下の方法で確認し、パスすれば現状は問題ないと判断。

 

1)SearchConsoleのメッセージからAMPテストツールをチェック

「有効なAMPページです」と表示されればOK。

ちなみに「無効なAMPページです」の場合は次のような表示です。

 

 

下記のURLからもチェックできるので試してみてください。

https://search.google.com/search-console/amp

 

2)下記のページからURLを入力してチェック

https://validator.ampproject.org/

PASSすればAMPページとして表示されるはずですが、英語なので判りづらいです。

 

3)モバイル検索してみる

実際に自分の書いた記事をモバイル検索して、表示された検索結果にAMPマーク(カミナリみたいなマーク)が表示されていればOK。

 


こんなマークの表示です。

 

ちなみに、僕のブログ内で具体的な修正が必要なエラー項目は、現時点では『属性「type」はタグ「ul」で使用できません。』というものだけでした。

 

3つのブログにAMPを適用していますが、いずれのエラーもこれでした。

 

モバイル検索結果の画面にはAMPマークが表示されており、実際の閲覧にも問題はないようです。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は読めませんのでブロック対象となります。ご注意ください。