【解決】AMPエラー「許可されていない属性または属性値が HMTL タグにあります。」

この記事のURLとタイトルをコピーする
サーチコンソール

おっと!サーチコンソールの AMP「ステータスエラー」を、確認しました。今回のエラー表示は、こちら↓

この記事で解決できる AMP エラー
  • リンクされている AMP バージョンが無効です
  • 許可されていない属性または属性値が HMTL タグにあります。

ブログを AMP 化して、1年以上が経ちました。AMP といえば、ルールが厳格なこともあり、たびたびエラーに悩まされることもありました。ただ、最近は AMP のあつかいにもなれてきて、でてくるエラーもさほど致命的じゃなくなってきています。

今回の AMP エラーは、対応方法が簡単だったので、わかりやすく解決策をまとめておきます。どうやら、あるプラグインのありがたい機能と相性が悪かったみたいなんですよ...

というわけで今回は、「リンクされている AMP バージョンが無効です」というAMPエラーの「許可されていない属性または属性値が HMTL タグにあります。」を、解決していきます。

解決します!Accelerated Mobile Pages(AMP)エラー「許可されていない属性または属性値が HMTL タグにあります。」

「リンクされている AMP バージョンが無効です」というAMPエラーの「許可されていない属性または属性値が HMTL タグにあります。」の解決策を、わかりやすく解説します。

「エラーの解決策」「エラーの理由」「エラーの原因」「検証方法」「今後の対応」の5つで、あなたの AMP エラーを解消しましょう。

プラグインの設定を、いじる必要があります。WordPress ブログなどのバックをアップを忘れずに、自己責任にて実行してくださいね!

エラーの解決策

解決策の具体的

AMP

Accelerated Mobile Pages(AMP)

※ 見出しに入っている文字を、置き換える。

解決策は、見出しの AMP という文字を置き換えることです。

HTML の属性(id)の値に、つかえない値(今回は:AMP)がはいっていました。エラーの値をとりのぞけば、問題が解決します。

エラーの理由

Tukaenaimoji accelerated

エラーの理由は、AMP ページでつかってはいけない文字のせいでした。

AMP のエラーの名称が、「許可されていない属性または属性値が HMTL タグにあります。」でしたね。

これは HTML のタグに、固有の識別名(属性 id)に、AMP ページのルールでは使っちゃいけない文字が入っていますよ?って警告がはいってるってことなんですよ。

ちなみに、属性(id)がよくわからない場合は、「TAG index」さまの記事が参考になりますよ。

エラーの原因は?

エラーの原因まとめ
  • 見出しの「amp」という文字
  • わたしの環境では、目次プラグインが影響していた
  • 自動生成された見出しの「id」に、「amp」がはいりエラーとなった

エラーの原因は、見出しの属性に「AMP」が自動で入ってしまうプラグインでした。

わたしのブログ環境では、目次を自動で生成してくれる WordPress プラグイン「Table of Contents Plus」が、原因となる見出しの「amp」の属性をつくってしまいました。

もう長年つかっていて、たいへん重宝しています。ただ今回は、プラグインが原因というよりも、見出しのつけ方に問題があり、エラーとなってしまいました。だから、プラグインが問題なのではなく、見出しの名前をつけるときに気をつけようというのがこの原因部分の意味であることは、さきに申し上げさせていただきます。

さて、本題にはいていきましょう。今回、AMP のエラーがでた記事は、こちらです↓

【関連】AMPで画像が表示されない原因が、画像系プラグインだった話

AMP で、画像が表示されなくなっていた問題について、解決策をまとめた記事でした。じつはこの記事の見出し冒頭に「AMP」という文字をつけていたんです。

そうすると「Table of Contents Plus」が、自動で目次からリンクをとばせるように、属性をつけてくれます。その属性に、「amp」という文字が含まれてしまったんですよね。


それじゃあ、ぎゃくに!自分で見出しに属性をつけたら、「Table of Contents Plus」が自動生成しないんじゃないか?って思ったんですが...2重で属性がついてしまうようです。

結局は「解決策」のように、AMP という文字はつかわず、「Accelerated Mobile Pages(AMP)」という文字にしておかないとダメのようですね。

検証方法について

AMP チェックツール

エラーが解決されたのか検証するために、Chromeプラグイン・AMPテストのチェックをしておきましょう。

Chrome プラグイン「AMP Validator」を、Chrome に追加しておけば、閲覧している自分のサイトページに、AMP エラーがないかひとめでわかるので手軽ですよ!

手動かつこまかな HTML などをチェックしたい場合は、下記の AMP テストチェックツールからAMP エラーの出たページを検査してみましょう↓

今後の対応について

Tukaenaimoji accelerated2

今後の対応については、見出しの冒頭に「AMP」という文字がつかないように配慮していきます。

「AMP」という文字が、見出しの文章にはいることは問題ありません。そこに、自動で目次機能などのために、属性がついてしまうことが問題なわけです。

そのための解決策として、「Accelerated Mobile Pages(AMP)」とすれば OK なわけです。むしろ、正式名称と頭文字の両方がはいるから、わかりやすくてよくなったかもしれませんね。

今後も同様のエラーがでないように、対応してこうと思います。

作業が終わったら、サーチコンソールの検証を忘れずに!!

エラーの修正作業がおわったら、サーチコンソールの修正を検証をクリックすることを忘れずに!!

エラーが修正されれば、おそらく自動的にエラーの警告も解消されるかもしれません。ですが時間をかけてエラーを修正したんですから、しっかり報告までしちゃいましょうよ。

生に宿題をだしなさい!って言われたら、ちゃんと期日までにださないと気持ち悪いですからね。笑

あとがき

「リンクされている AMP バージョンが無効です」というAMPエラーの「許可されていない属性または属性値が HMTL タグにあります。」を、解決するための記事を書かせていただきました。まとめると、こんな感じ↓

まとめ
  • 「リンクされている AMP バージョンが無効です」の「許可されていない属性または属性値が HMTL タグにあります。」は、解決できる
  • エラーの解決策は、「AMP」の文字を見出しに使わず、「Accelerated Mobile Pages(AMP)」とすること
  • エラーの理由は、見出しの属性(id)に「amp」という文字を使ってはいけなかったから
  • エラーの原因は、プレグインの目次機能で、自動生成された属性(id)
  • エラーの検証方法は、「Chrome プラグイン「AMP Validator」・「AMP テスト - Google Search Console」でチェックする
  • 今後の対応は、「見出しの冒頭に「AMP」という文字がつかないように配慮する」

って感じでした。AMP のエラーにも慣れてきたので、しっかりひとつずつ起きたときに、対応していきたいと思います。また、あたらしいエラーが出たときには、解決策などまとめさせていただきますね!

正直なところでは、AMP のエラーがおきないことを祈るばかりなのですが...読者にとっても最速で記事をよめる最先端の技術なので、しっかり対応していきたいと思います。

それでは、今回はこの辺で!?記事の内容が、あなたのブログの悩みを解決することができていたら、うれしいです。

そのほか、ブログの悩みなどまとめた記事をご用意しました。あわせて、こちらもどうぞ↓

【関連】AMPで画像が表示されない原因が、画像系プラグインだった話

関連する記事

この記事のURLとタイトルをコピーする
記事へのお問い合わせ