サイトでAMPの「問題」が新たに検出されましたの簡易対処法／Google Search Console

SHARE

突然ですがこのようなメールを受け取ったことありませんか？

どうやら私のサイトでAMPの「問題」が検出されたようなのですが，AMP自体ちんぷんかんぷんなので，この記事では

  • AMPとは
  • 今回検出された「問題」の簡単な対処法

を紹介したいと思います。

AMPで「問題」が検出される原因

AMPとは

楽器のアンプか何かですかい？

Isamu

AMPとは「Accelerated Mobile Pages」の略で，Googleが推奨するモバイルページを高速に表示する手法のことです。

AMP（アンプと読む）対応しているサイトは検索エンジンで検索した際，カルーセル表示されたり，雷のマークがついています。

AMPを実装すると

AMP実装による効果
モバイルページの表示速度の高速化や通信データ量の低減を図ることができる！
 
つまり，ユーザにとってストレスなくページを閲覧することができる環境ということですね。
じゃあAMP対応していないと検索に引っかからないのか？
 
答えはNo！「AMP対応していなかったがために検索順位が落ちた！」なんてことはありません。
 
ありませんが…
 
モバイル対応していなかったために検索順位を落とすことは十分あり得ます。
 
スマホを含むモバイル機器を持つ人が大半となった昨今，モバイル最適化（＝AMP対応）はやっておいて損はないかと思いますね。

今回検出されたAMPの「問題」について

今回，私がGoogle Search Consoleからのメールに書いてあったAMPの「問題」を以下に列挙していきます。

  1. AMP HTML タグの属性で指定されたレイアウトが無効です
  2. 許可されていない属性または属性値が HMTL タグにあります
  3. 指定できるのは、amp-boilerplate と amp-custom の「style」タグのみです（ドキュメント ヘッドにのみ指定できます）。
何が書かれているのかさっぱり分かりませんでした。
 
が，調べていくうちに分かったのことは「AMP対応するためにルールはしっかり守りましょう」ということです。
 
次に今挙げた３つの問題についてその対処法を詳しく書いていきたいと思います。

検出された「問題」を対処していく

記事の中の「問題」箇所の特定

まずはGoogle Search Consoleを開いて，検出された問題箇所はどこなのか特定しましょう。

Google Search Consoleを開いて左側の項目欄に「拡張」があると思います。

その中に例の”雷”マークとAMPと書いているのでそこをクリックしましょう。※上の写真が参考

”AMP”をクリックすると上のような画面が現れます。

エラーが出ていることが確認できますね。ここから下にスクロールしていくと，それぞれの記事のURL付きでそのエラーが個々にリスト化されています。

どれでもいいので１つ選んでみましょう。

記事URLをクリックすると，右に新しくウィンドウが開き，問題箇所を表示してくれます。

「問題」の箇所はピンクになっているのでそこを解決してあげればいいのです！

あとはそれぞれの「問題」に対して対処していくだけです。

①AMP HTML タグの属性で指定されたレイアウトが無効です

４つの記事でこのエラーを確認しました。

そして「問題」としてピンクで塗られている部分はどうやらGoogleMapを埋め込んでいる箇所のようです。

そういえばGoogleMapを埋め込む時にアレンジした箇所が１箇所あったな。横幅を決めるWidthの値を100%に変更したな…

Isamu

 

GoogleMapを埋め込んでモバイル表示させたときに，画面から地図がはみ出していたため実施したアレンジです。

Widthを100%にするとモバイル表示でも画面からはみ出さなくなるのですが，これがAMPの「問題」を招いていたとは…

ネット記事を参考にして実装したアレンジですが，なんでもかんでも100%にしてはいけないってことですね。

Widthは100%から数値に戻しておいたよ！

Isamu

ここまで終わったらAMP対応しているかテストする必要がありますね。
 
Google Search Consoleの中にAMPテストというツールがあるのでそれを活用しましょう。
>>>AMPテスト
 
記事URL（最後に”?type=AMP”をつける）を入力してテスト開始。しばらくすると結果がでます。

どうやら「問題」は無事解消されたようです。

こうやって「問題」箇所をコツコツ直していきましょう。

骨が折れますけど，知らなかったとはいえルールを守らなかった私のせいでもあるので我慢してなおしますよっと_(┐「ε:)_

②許可されていない属性または属性値が HMTL タグにあります

この問題は３つの記事で検出されていました。

先程と同じ様に，問題となっている箇所をGoogle Search Consoleで調べてみると２つの記事では「カスタムHTMLに貼り付けたA8.netの広告リンク」が原因のようでした。

　A8.netのサイトで広告リンクの種類を確かめる

A8.netで広告リンクを貼る
>>>アフィリエイトA8.net

参加中のプログラムから広告リンクを開いてみると「AMP対応リンク」と書かれた広告リンクがありました。

どうやら「通常の広告リンク」を記事内に貼り付けていたので「問題」として検出されたみたいです。

広告リンクを貼るときもその広告がAMP対応であるかチェックする必要があるんだね

Isamu

残り１つの記事で検出された「問題」の原因はプラグインが関係しているようでした。

この問題はプラグイン箇所をどう修正していいかわからなかったので，記事からプラグイン箇所を削除，その後プラグインを停止させています。

対象記事が1つで良かった〜。たくさんあると修正が大変だったね。

Isamu

　画像比較用プラグイン「Ultimate Before After Image Slider – BEAF」
プラグイン機能で画像を表示するため記事に埋め込んだショートコードが原因のようでした。
 
もともとTheThorはショートコード系プラグインが得意ではないので，いずれにせよショートコードで記事を装飾する系は使用不可なのかもしれませんね。
 
 
機会があればTheThorの得意・不得意プラグインについて私の経験談も兼ねて紹介したいと思います。
>>>記事作成中もう少し待ってね

③指定できるのは、amp-boilerplate と amp-custom の「style」タグのみです（ドキュメント ヘッドにのみ指定できます）。

この「問題」は１つの記事でのみ検出されました。

しかし，なぜこの問題が起きたのか原因を突き止めることが出来ませんでした。

先に紹介した画像比較用プラグイン「Ultimate Before After Image Slider – BEAF」のショートコードを削除したらこの「問題」も同時に解決してしまいました。

ひょっとしたら画像比較用プラグインが２つの「問題」を引き起こしていたのかもしれないですね。

さいごに

AMP対応するためには「問題」が生じないようにルールを守って記事を書く必要があります。

Google Search ConsoleからAMPで検出された「問題」があります。とメールが来たらこの記事が役に立てればいいと思っています。

最後まで読んでくれて，ありがとうございました。

WordPress有料テーマ「TheThor」ならAMP対応も簡単な設定で可能です！
>>>集客・収益に徹底的にこだわった結果へ導く次世代WordPressテーマ「ザ・トール」

前の記事

Sony ILCE-6000（α6000）購入！初サブ機・使い…

次の記事

北海道函館市のエゾリスと野鳥たち・香雪園（見晴公園）
サムネ・白銀の世界とエゾリス