スポンサーリンク
スポンサーリンク

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

ニッチな話題ホームページ運用

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

ポイント
  • WordPressの段落内に不要なmetaタグが混ざってAMPエラーになっていた。
  • WordPressエディタでコピー・ペーストすると、文字列前にmetaタグが付くようになっているので注意。
環境

WordPress 5.8、Cocoonバージョン: 2.3.2
Mac OS Big Sur 11.5、
Chrome バージョン: 92.0.4515.107(Official Build) (x86_64)

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

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

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

スポンサーリンク

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

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

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

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

Validation Statusは、FAIL(失敗)です。

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

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

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

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

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

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

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

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

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

コピーして、

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

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

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

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

GitHubでの報告

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

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

出典:A meta tag is inserted when copy pasting a link · Issue #33585 · WordPress/gutenberg · GitHub

QRコードを読み込むと、関連記事を確認できます。
[AMP] 「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」【コピペでのmetaタグ挿入】
タイトルとURLをコピーしました