AMP HTML タグの属性で指定されたレイアウトが無効です。が解決した!!

こんにちは。相変わらず迷走中のH.Tomです。

今回はブログ初心者がぶつかってどうしようもなくなる高い壁!

Google Search Console(通称サチコ)のエラーメッセージの一つ

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

について解決方法を紹介しようと思います。

他のケースが出てきたら随時追記していく予定です。

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

 

・・・そもそも言ってる意味が正確にわかりません(笑)

て感じだったので、それについて簡単に書いときます。
このエラーメッセージは、AMP(Accelerated Mobile Pages)対応にしている特定アドレスページにエラーが出てますよーってお知らせの1種です。
どこにエラーが出ているのかと言うと、中のHTMLで指定しているレイアウト(バナーや埋め込み等)がちゃんと表示されなくて無効になってますよ〜って事です。
AMP(Accelerated Mobile Pages)
モバイル端末で表示した時に従来の数倍の速度で表示されるシステムです。
突っ込んだ詳しい事はこの段階で迷子になってるような初心者にはまだ必要ありません。
そういうもんだと理解しましょう。
要はバナーのイメージのサイズとかプレイヤーや動画のサイズが合ってないてことです。

エラーの確認方法

写真は該当アドレスの詳細ページですね。
 
問題の件数の所の警告文をクリックすると画面右に詳細が表示されます。
  • 右上のインスタンスボックス内に実例とその数が表示されます。
  • 下のHTMLコードの中に該当箇所が表示されます。

そのコードの中をよく見てください。

バナーや画像イメージの場合imgの表記が入っているのですぐ分かります。

プレイヤーの場合引用元のサービス名が入ってるのでそこを確認しましょう。

そこが分かったら実際にページ上のどれにエラーが出ているのか特定できますね。

解決方法

私のとった解決方法は概ね3種類です

  1. AMP対応のコードが入ったものに差し替える
  2. 画像付きでないものに差し替える
  3. AMPページを生成しない

AMP対応のコードが入ったものに差し替える

バナー広告の場合はASPサイトなどで配布されている広告リンクにAMP対応のリンクコードがあるはずです。そちらで対応するようにしましょう。
そういうリンクがない場合もあるので、その場合は表示可能なサイズを選択するか、それ以外の下記の方法をとるかですね。

画像付きでないものに差し替える

いっそ文字リンクに変えてしまします。大体の場合画像が問題なのでいっそ文字だけにしてしまえば手っ取り早いですね。
それっぽい感じや見た目のわかりやすさは無くなっちゃいますけど、体感的にそれで何か派手に影響があるようには思えません。
手段の一つとしては良いんじゃないでしょうか?

AMPページを生成しない

どうしても使ってるツールを譲る気は無い!って時はそもそもAMPにしなくていいや!って手段を取るって方法もあります。

私の場合はAppleMusicのプレイヤーのレイアウトが引っかかってたみたいで、個人的にそこを譲る気は有りません。なのでAMPページを生成しない方法を取りました。
後々検索エンジンに弾かれる可能性があるので、よっぽどでない限りは、対応させる選択肢を選ぶのがいいかと思います。

私はテーマにcocoonを使っているので、エディターの文書のタブからワンタッチで切り替えができます。手返し早いので便利です。
気になる方は是非使ってみてください。

【外部リンク】Cocoonテーマのダウンロードページ



こんな感じです。プラグインを使ってやってる人はプラグインの設定を確認しましょう。

 

まとめ

私の解決方法はこんな感じです。

エラーに対するトラブルシューティングは本当に大変です。分かってしまえばなんて事はなかったり、これか〜〜〜〜!!って感じでスッキリするんですが、そこに至るまでに何度もめげそうになります。・・・というより毎回毎回そういうことの繰り返しで成長します。

始めた頃は文字を太文字にするだけで結構時間食ってたことを思い出してください!しつこくやってれば分かるようになってきます。解決するまでやりきることが肝心です。

お互い負けないで成長していきましょう〜。

 

コメント

タイトルとURLをコピーしました