[AMP] 「ドキュメント ヘッドの外側で、直接の子としてのみ許可されているタグが検出」【コピペでのmetaタグ挿入】

WordPressエディタでコピー・ペーストしたら、文字列前にmetaタグが付くようになっていました。放置すると、AMPエラーになるので、ご注意ください。

WordPress 5.8になって、エディタの挙動がちょっとおかしい気がします。

エディタのCSSも以前とちょっと違っているんですよね。

とはいえ、OSやブラウザの挙動の可能性もありますね。まだ、細かい検証できていません。

1. <meta charset=”utf-8″>タグが混ざっている

Google Search ConsoleからAMPのエラーの通知が届きました。

該当箇所を確認してみると、文中に「<meta charset=”utf-8″>」というタグが混ざっているようです。

AMP Validatorで確認してみても、エラーになります。

Validation Statusは、FAIL（失敗）です。

2. HTML表示にして不要なタグを削除する

metaタグは、ビジュアル編集では、表示されません。

「HTML として編集」にしてみます。

確かに、変な位置にmetaタグが入っているので、削除しました。

AMP Validatorで確認すると、今度は PASS（合格） になりました。

ということで、「修正を検証」して、おしまいです。

3. コピペでmetaタグが追加される

なぜ、勝手にmetaタグが追加されたのでしょうか？

これは、WordPressエディタ上でコピー・ペーストしたことが原因のようです。

コピーして、

一行下のブロックに貼り付けてみます。

上下２つのブロックをHTML表示にすると、あら不思議。

貼り付けられた文字列の前に <meta charset=”utf-8″>が追加されています。

問題が解消されるまで、WordPressのエディタの文章は、コピペしない方が良さそうです。

PHPコードでまとめて削除する方法をまとめました。

WordPressでのコピペに混ざる<meta charset=″utf-8″>をまとめて削除する【PHPコード】

MacでWordPressのエディタにコピペをすると、<meta charset="utf-8">というタグが追加されてしまうことがあります。 これを放置すると、Google Search Consoleで「AMPエラー」になってしまいます。 検索結果にAMPページが除外されてしまうので、「表示の遅いページ」という評価になってしまいます。 ビジュアルエディターでは見つけにくいエラーなので、いちいち コードエディタに切り替える必要があります。「utf」で検索して、ちまちま修正し...

chiilabo.com

4. GitHubでの報告

Mac OSでは、同様の報告があるようです。

WordPress version: 5.7、Gutenberg version: 11.1
Operating system: Mac OS、Browser: Brave

こちらもどうぞ。

AMPエラー HTML タグに必須属性がありません。- formとJavaScript

ブログ記事の中にフォームを入れていたら、AMPエラーになりました。 カスタムHTMLを使うとよくAMPエラーになりますね。 足りなかったのは、formタグのtarget属性でした。formタグの説明では特に見かけなかったんですが、必須属性なんですね。 今回のコードでは、javascriptの関数を動作させるためのボタンを配置するためにフォームを作りました。 特にデータをサーバーに送るものでもなかったので、formのプロパティを指定していなかったのが、よくなかったようです。 こ...

chiilabo.com

「URLはGoogleに登録されていますが問題があります」？ 【AMP動画の必須属性】

Googleの検索にブログのURLを登録しようとしたら、こんなエラーに遭遇しました。 動画を扱っているページだったので、動画のAMP対応をしました。 「URLはGoogleに登録されていますが問題があります」とは ブログ記事が出来上がって、Google Search Consoleで、URLをテストしました。 インデックス登録の仕方と意味についてはこちら。 すると、エラーメッセージが表示されました。 URLはGoogleに登録されていますが問題がありますAMP AMPページが...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。