Search Consoleエラー解決法「許可されていない属性または属性値がHTMLタグにあります」(AMP)①

鳥が着地点を探している様子 ウェブサイト運営の知恵

Google Search Consoleの(AMP)「許可されていない属性または属性値がHTMLタグにあります」というエラーでお困りのあなた。

この記事では、私が経験したGoogle Search Consoleのこのエラーを解決した方法をご紹介しています。この記事を読むことで、Wordpressのプラグイン「Contact Form 7」のAMP対応状況と「AMP Test」の使い方が理解できます。

スポンサーリンク (Sponsored Links)

(AMP)「許可されていない属性または属性値がHTMLタグにあります」①のエラー状況の確認

「AMP」とはAccelerated Mobile Pagesの頭文字をとった略語で、モバイル・デバイス用のページ表示の高速化技術のことです。

Google Search Consoleの「AMP」からエラー内容の詳細を確認すると、「許可されていない属性が HTML タグ「FORM [method=POST]」にあります」となっている。

エラーが出ているウェブページは、「固定ページ」の「お問い合わせ」(日本語ページ)と「Contact」(英語ページ)です。

使用しているWordpressのテーマ「Cocoon」の「Cocoon設定」「AMP」で「AMP設定」があり、そこの「AMPの有効化」で「AMP機能を有効化する」にチェックが入っています。

CocoonのAMP設定画面
CocoonのAMP設定画面

この「AMP機能を有効化する」にチェックが入っていることで、投稿ページ、および、固定ページがAMP対応になっています。

(AMP)「許可されていない属性または属性値がHTMLタグにあります」①のエラー原因の解析

エラーが出ている「固定ページ」の「お問い合わせ」(日本語ページ)と「Contact」(英語ページ)の共通点は、両方とも「Contact Form 7」を使っていることです。

使用しているWordpressのテーマ「Cocoon」(無料)はAMP対応の設定になっていて、投稿ページ、および、固定ページがAMP対応になっています。ところが、Wordpressのプラグイン「Contact Form 7」(無料)がAMP対応になっていません。「Contact Form 7」をベースに作った固定ページの「お問い合わせ」(日本語ページ)と「Contact」(英語ページ)の記述内容は「Contact Form 7」の使用方法に合わせたもので、エラーは「Contact Form 7」のコードが起因していて、別のプラグインを使う以外にAMP対応する方法がありません。

「Contact Form 7」とは別に「Contact Form 7 for AMP」というプラグインがありますが、これは1年間のアップデートとサポートがセットで39.99ドルと有料になっています。このような費用が毎年かかるのは避けたいので、このプラグインを使うという方法は採用しませんでした。

(AMP)「許可されていない属性または属性値がHTMLタグにあります」①のエラー改善の行動

根本的な解決法にはなりませんが、一番、簡単なエラーの回避法は「Contact Form 7」の機能を使っている「お問い合わせ」と「Contact」のページをAMP対応から外すことです。

WordPressnoテーマ「Coccon」の機能を使って、投稿記事やその他の固定ページがAMP対応になっているので、サイト訪問者の「お問い合わせ」の利用が、投稿ページの閲覧よりも限定的なことを考えると、エラーの該当ページのみをAMP対応ページから外す方法が他への影響を少なくしてエラーを解決できます。

AMP対応ページから特定ページを外すために、「Contact Form 7」を使っている「固定ページ」の「お問い合わせ」(日本語ページ)と「Contact」(英語ページ)について、「Cocoon」をテーマとして使用したワードプレスの各記事のAMP設定から「AMPページを生成しない」にチェックします。 

WordpressのAMP設定画面
WordPressのAMP設定画面

Google Search ConsoleのエラーはAMPに関するものなので、該当ページがAMP対応でなくなると、エラーの対象にはなりません。

(AMP)「許可されていない属性または属性値がHTMLタグにあります」①のエラー改善の検証

今回の問題はAMP対応の件なので、特定ページに「AMPページを生成しない」と設定したことで、AMPページと認識されていないかをウェブ・ベースのアプリケーション「AMP Test」でチェックします。

まず、 「AMP Test」 の下線部をクリックして、ウェブ・アプリケーションを立ち上げます。

  1. AMP対応URLを入力 (非AMPページのURLに「?amp=1」を追加します)
    • 例1) https://dan-chan.com/contact-ja/?amp=1
    • 例2)https://dan-chan.com/en/contact-en/?amp=1
  2. 「URLをテスト」をクリック

AMP Testの入力画面
AMP Testの入力画面
AMP Testの出力画面
AMP Testの出力画面

これで「Contact Form 7」を使っている「固定ページ」の「お問い合わせ」(日本語ページ)と「Contact」(英語ページ)について、両方ページともAMPページでない事が確認できました。

Google Search Consoleにログインして、エラーを指摘されたURLを「URL検査」にかけて、最終確認してもらいましょう。数日後、Google Search Consoleからこのエラーが消え、問題が解決されたことが確認できました。

まとめ

ワードプレスのテーマ「Cocoon」でAMP対応になっていて、プラグインの「Contact Form 7」がAMP対応になっていないことが原因のエラーでした。

エラーが「お問い合わせ」など「Contact Form 7」を使用したページをAMPページから外すことで、エラーを解決しました。

関連記事「Google Search Consoleのエラー解決法」で、(AMP)「許可されていない属性または属性値がHTMLタグにあります」①をはじめとして、それ以外の問題解決法のリンクを「Google Search Consoleの解決済みエラーの一覧表」に出しています。 それぞれの個別エラーの具体的な対処法、または、解決法についての詳細は、一覧表の下線があるエラー項目をクリックして、リンクから個別の記事をご覧ください。