Google Search Consoleの(AMP)「許可されていない属性または属性値がHTMLタグにあります」というエラーでお困りのあなた。
この記事では、私が経験したGoogle Search Consoleのこのエラーを解決した方法をご紹介しています。この記事を読むことで、Wordpressのプラグイン「Contact Form 7」のAMP対応状況と「AMP Test」の使い方が理解できます。
(AMP)「許可されていない属性または属性値がHTMLタグにあります」①のエラー状況の確認
「AMP」とはAccelerated Mobile Pagesの頭文字をとった略語で、モバイル・デバイス用のページ表示の高速化技術のことです。
Google Search Consoleの「AMP」からエラー内容の詳細を確認すると、「許可されていない属性が HTML タグ「FORM [method=POST]」にあります」となっている。
エラーが出ているウェブページは、「固定ページ」の「お問い合わせ」(日本語ページ)と「Contact」(英語ページ)です。
使用しているWordpressのテーマ「Cocoon」の「Cocoon設定」「AMP」で「AMP設定」があり、そこの「AMPの有効化」で「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ページを生成しない」にチェックします。
Google Search ConsoleのエラーはAMPに関するものなので、該当ページがAMP対応でなくなると、エラーの対象にはなりません。
(AMP)「許可されていない属性または属性値がHTMLタグにあります」①のエラー改善の検証
今回の問題はAMP対応の件なので、特定ページに「AMPページを生成しない」と設定したことで、AMPページと認識されていないかをウェブ・ベースのアプリケーション「AMP Test」でチェックします。
まず、 「AMP Test」 の下線部をクリックして、ウェブ・アプリケーションを立ち上げます。
- 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
- 「URLをテスト」をクリック
これで「Contact Form 7」を使っている「固定ページ」の「お問い合わせ」(日本語ページ)と「Contact」(英語ページ)について、両方ページともAMPページでない事が確認できました。
Google Search Consoleにログインして、エラーを指摘されたURLを「URL検査」にかけて、最終確認してもらいましょう。数日後、Google Search Consoleからこのエラーが消え、問題が解決されたことが確認できました。
まとめ
ワードプレスのテーマ「Cocoon」でAMP対応になっていて、プラグインの「Contact Form 7」がAMP対応になっていないことが原因のエラーでした。
エラーが「お問い合わせ」など「Contact Form 7」を使用したページをAMPページから外すことで、エラーを解決しました。