はてなブログから移行後、ブログの設定・リライトと大忙しだった毎日ですが、特に悩んだのがGoogle Search Consoleで起きたAMPエラーでした。
そもそもAMPというものをよく知らないで、テーマにもともと備わっている機能を設定したらエラーの続出だったので驚きました…
しかし、試行錯誤の結果、現在では結果AMPエラーはナシ！！
そこで今回は、私が経験したAMPエラーの修正方法をご紹介しますので、少しでも参考になれば嬉しいです。
エラーをサーチコンソールで見てみよう
まず、サーチコンソールにログインした後、左側のメニューの「拡張」というところに「AMP」という雷マークがついたところがあるのでクリック。
そうすると、AMP専用ページになり、いくつエラーが出ているか、有効ページはいくつあるかなどがわかりますね。
その下に、詳細という欄がありますが、ここでどのようなエラーが出ているか判断ができると思います。
私が出たエラーは以下のとおり。（既に修正済み）
初見で見たらなんのこっちゃと思いますよね。
それでは、一つずつエラーの内容や修正方法を解説します。
AMP HTML タグの属性で指定されたレイアウトが無効です。
サーチコンソールで問題のあるページを見ると、修正箇所が赤色に染まっています。
その上の「インスタンス」という修正内容に注目して見ていきましょう！
必須属性「height」がタグ「amp-img」にありません。
これは、記事でいうと画像の部分にあたります。
はてなブログから移行したときの画像だったのでエラーが出たのだと思いました。
ちなみに、画像部分全てにおいてエラー。
いつかはてなブログを消すこともあり得ますし、いっそのことすべてアップロードして張替えを行うことに。
そのとき、「メディアを追加」からアップロードして更新ボタンを押すこと！
これによって、画像をきちんと記事内に反映させることができ、再び記事をAPMテストにかけるとエラーが消えていました。
修正方法
画像を「メディアを追加」からアップロードし直し、代替テキスト等を記入後「更新」を押して、一枚一枚張り替える。
許可されていない属性または属性値がHTMLにあります。
広告やプラグインを使用してのYouTubeの埋め込みをしていたらエラーが出ました。
AMPには使用できない言葉もあるみたいなので、それを取り除いてあげる必要があります。
タグ「amp-youtube」の属性「data-videoid」に無効な値「・・・・」が設定されています。
（「・・・・」の部分は、動画のID等が含まれます。）
私は、たまにYouTube動画を記事に埋め込むことがあり、手軽さを求めて「YouTube」というプラグインを使っていました。
しかし、AMPと相性が悪かったのか、YouTubeを埋め込んだ場所全てに上記のようなエラーが…！
ザ・トールは、YouTubeの動画の埋め込みコードを直接テキストモードにコピペしてもレスポンシブになってくれるので、このようなプラグインは入れなくてもよかったですね。
なので、プラグインで入れていた動画部分をテキストモードで消して、YouTubeの動画サイトから埋め込みコードを入れると、エラーが消えていました。
修正方法
①記事に埋め込みたいYouTube動画画面から「共有」→「埋め込む」→「埋め込みオプション」にある2ヶ所にチェックを入れてコピー。
②投稿のテキストモードで任意の場所に貼り付ける
属性「border」はタグ「amp-img」で使用できません。
A8.net などのアフィリエイトサイトを利用している方は、記事の中に広告バナーを挿入することもありますよね。
私もアフィリエイトサイトから貼り付けた広告は全てエラーが出ていました。
そこで、取り除くべき点は、「border=”0″」というタグです。
テキストモードで見たときに、広告バナー部分の後半にあると思うので、消去必須！
修正方法
テキストモードを開いて、広告バナーのところにある「border=”0″」を取り除く。
HTMLタグに同じ属性が複数含まれています。
これは、エラーというより警告にあたるみたいですが修正していきます。
まず、このエラーが起きていた場所は見出しの部分。
画像のとおり、<h3 id=”見出しのタイトル”>見出しのタイトル</h3>と、見出しのタイトルが2ヶ所存在しています。
これがエラーの原因でした。
なので、すっきりとした見出しのHTMLに戻してあげるために、id=”見出しのタイトル”の部分を消してあげましょう。
修正方法
テキストモードの見出し部分で、「id〜”」の部分を消去し、<h○>〜</h○>の形に戻す。
今まで数回、ザ・トールのボックスについてブログを書いてきました。 このテーマのボックスの良いところは、自分でパーツをカスタマイズできたり、色を変更できたりするところです。 しかし、ザ・トー[…]
はてなブログからWordPressへ移行して2週間ほど経ちましたが、ようやくブログの設定やリライトが落ち着いたところです！ 「いや、移行は羽田空港サーバー様にお願いしたから大変なことはなかったでしょ？」 &n[…]
最後に
今回は、WordPress（THE・THOR）のAMPエラーの修正方法について記事を書いて見ました。
エラーを経験してみて、やはり問題が検出されると焦りますし、検索結果に影響が出るかもしれないと思うとかなり不安でした。
そして、結局どうしたら良いのかという対処方法の記事が少ないこと・・・。
せっかく高速表示されるなら使っていきたいですし、エラーも解消できないものではないので、一つ一つクリアしていきましょう！
まだまだエラーの種類はありますし、私が経験したものは一例ですので、また何かあり次第追記していきたいと思います。