お出かけ大好き!地域のことやグルメなど、何でもアリなレポ記事メインの雑記ブログです!

【WordPress】サーチコンソールのAMPエラー修正方法!

はてなブログから移行後、ブログの設定・リライトと大忙しだった毎日ですが、特に悩んだのがGoogle Search Consoleで起きたAMPエラーでした。

 

そもそもAMPというものをよく知らないで、テーマにもともと備わっている機能を設定したらエラーの続出だったので驚きました…

 

しかし、試行錯誤の結果、現在では結果AMPエラーはナシ!!

 

そこで今回は、私が経験したAMPエラーの修正方法をご紹介しますので、少しでも参考になれば嬉しいです。

 

とん
難しいことはわからないから、とにかく修正方法を知りたい!という方向けです。

 

エラーをサーチコンソールで見てみよう

 

まず、サーチコンソールにログインした後、左側のメニューの「拡張」というところに「AMP」という雷マークがついたところがあるのでクリック。

 

そうすると、AMP専用ページになり、いくつエラーが出ているか、有効ページはいくつあるかなどがわかりますね。

 

その下に、詳細という欄がありますが、ここでどのようなエラーが出ているか判断ができると思います。

 

私が出たエラーは以下のとおり。(既に修正済み)

 

AMP HTML タグの属性で指定されたレイアウトが無効です。
許可されていない属性または属性値が HMTL タグにあります。
HTMLタグに同じ属性が複数含まれています。

 

初見で見たらなんのこっちゃと思いますよね。

 

それでは、一つずつエラーの内容や修正方法を解説します。

 

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

 

サーチコンソールで問題のあるページを見ると、修正箇所が赤色に染まっています。

 

その上の「インスタンス」という修正内容に注目して見ていきましょう!

 

必須属性「height」がタグ「amp-img」にありません。

 

AMPエラー

 

これは、記事でいうと画像の部分にあたります。

 

はてなブログから移行したときの画像だったのでエラーが出たのだと思いました。

 

ちなみに、画像部分全てにおいてエラー。

 

いつかはてなブログを消すこともあり得ますし、いっそのことすべてアップロードして張替えを行うことに。

 

そのとき、「メディアを追加」からアップロードして更新ボタンを押すこと!

 

これによって、画像をきちんと記事内に反映させることができ、再び記事をAPMテストにかけるとエラーが消えていました。

 

修正方法

画像を「メディアを追加」からアップロードし直し、代替テキスト等を記入後「更新」を押して、一枚一枚張り替える。

 

 

許可されていない属性または属性値がHTMLにあります。

 

広告やプラグインを使用してのYouTubeの埋め込みをしていたらエラーが出ました。

 

AMPには使用できない言葉もあるみたいなので、それを取り除いてあげる必要があります。

 

タグ「amp-youtube」の属性「data-videoid」に無効な値「・・・・」が設定されています。

 

(「・・・・」の部分は、動画のID等が含まれます。)

 

AMPエラー

 

私は、たまにYouTube動画を記事に埋め込むことがあり、手軽さを求めて「YouTube」というプラグインを使っていました。

 

しかし、AMPと相性が悪かったのか、YouTubeを埋め込んだ場所全てに上記のようなエラーが…!

 

ザ・トールは、YouTubeの動画の埋め込みコードを直接テキストモードにコピペしてもレスポンシブになってくれるので、このようなプラグインは入れなくてもよかったですね。

 

なので、プラグインで入れていた動画部分をテキストモードで消して、YouTubeの動画サイトから埋め込みコードを入れると、エラーが消えていました。

 

修正方法

①記事に埋め込みたいYouTube動画画面から「共有」→「埋め込む」→「埋め込みオプション」にある2ヶ所にチェックを入れてコピー。

②投稿のテキストモードで任意の場所に貼り付ける

 

属性「border」はタグ「amp-img」で使用できません。

 

AMPエラー

 

A8.net などのアフィリエイトサイトを利用している方は、記事の中に広告バナーを挿入することもありますよね。

 

私もアフィリエイトサイトから貼り付けた広告は全てエラーが出ていました。

 

そこで、取り除くべき点は、「border=”0″」というタグです。

 

テキストモードで見たときに、広告バナー部分の後半にあると思うので、消去必須!

 

修正方法

テキストモードを開いて、広告バナーのところにある「border=”0″」を取り除く。

 



 

HTMLタグに同じ属性が複数含まれています。

 

これは、エラーというより警告にあたるみたいですが修正していきます。

 

まず、このエラーが起きていた場所は見出しの部分。

 

AMPエラー

 

画像のとおり、<h3 id=”見出しのタイトル”>見出しのタイトル</h3>と、見出しのタイトルが2ヶ所存在しています。

 

これがエラーの原因でした。

 

なので、すっきりとした見出しのHTMLに戻してあげるために、id=”見出しのタイトル”の部分を消してあげましょう。

 

修正方法

テキストモードの見出し部分で、「id〜”」の部分を消去し、<h○>〜</h○>の形に戻す。

 

 

最後に

 

今回は、WordPress(THE・THOR)のAMPエラーの修正方法について記事を書いて見ました。

 

エラーを経験してみて、やはり問題が検出されると焦りますし、検索結果に影響が出るかもしれないと思うとかなり不安でした。

 

そして、結局どうしたら良いのかという対処方法の記事が少ないこと・・・。

 

せっかく高速表示されるなら使っていきたいですし、エラーも解消できないものではないので、一つ一つクリアしていきましょう!

 

まだまだエラーの種類はありますし、私が経験したものは一例ですので、また何かあり次第追記していきたいと思います。

記事はいかがでしたか?

こちらには、記事を読んでくださった方にオススメな広告が表示されます。

<スポンサーリンク>




AMPエラー
☆とんの日常はこちらから☆