【AMPの問題解決わかりやすく】ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました 「ワードプレス内コピペNG!?」

AMP問題ドキュメントヘッドの外側で
この記事は約6分で読めます。
PR
  1. 「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」と、 サーチコンソールからメールが!
  2. 「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」どういうこと?エラーの原因を確認する
  3. 「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」問題解決!WordPressで、指摘されたページをチェック・修正する
  4. 「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」問題解決!「meta charset=” UTF-8″」 いつものエディターで検証してみる
  5. 「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」問題解決!ナゾが解けた?WordPressのエディター内で コピペするとmeta・・が文章の頭に付く?!
  6. 「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」問題解決!修正したら、サーチコンソールへgo!「修正を検証」クリック
  7. 【AMPの問題解決わかりやすく】ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました 「ワードプレス内コピペNG!?」まとめ
  8. おつかれさまです!息抜きによろしければRelax with the video

「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」と、 サーチコンソールからメールが!

サーチコンソールからAMPの問題メールが送られてきた画像

先日、やっとエラーが解決したなと思ったら・・・

上画像のように またまたサーチコンソールからご指摘が!

届いたメールの「AMPの問題を解決する」をクリックして「サーチコンソール」を確認すると、下画像のようになっていました

サーチコンソールの画面

1個だけでよかったね♪

una
una

だよねー

「noindexタグ」事件は大量だったからねー

「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」どういうこと?エラーの原因を確認する

サーチコンソールで、エラーの原因を確認しましょう

サーチコンソールでエラーを表示させる

サーチコンソールで指摘されている URL (上画像グレー部分)をクリックすると、右サイドに問題箇所が出てきます

具体的な問題インスタンス表示画面

上画像のように 問題になっている実際のページが表示されて「ココらへんが変だよ」と、赤色で教えてくれています

  • タグ「meta charset=” UTF-8″」の親タグは「p」ですが、「head」のみ使用できます。

どうやら「head」だけに使える「meta charset=” UTF-8″」を、そうではないところに使っているから修正しなさい・・のようです

まちがってつけている「meta charset=” UTF-8″」を削除しなさいってことですね

 

「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」問題解決!WordPressで、指摘されたページをチェック・修正する

【1】WordPress「ビジュアルエディター」から「コードエディター」にする

普段、ブログを書くのに使っているのは「ビジュアルエディター」です 指摘された「meta charset=” UTF-8″」を削除するため、「コードエディター」にします

ワードプレス上でビジュアルエディタからコーディネーターにする画面

右上端にある「縦の三点リーダー」をクリックすると、上画像のように表示されるので「コードエディター」をクリックします

すると、下画像のように「コードエディター」になりま

ワードプレス「コードエディター」画像

【2】コードエディターで、「meta charset=” UTF-8″」をあぶり出す

ページ内のエラーが1カ所とは限りません コードエディターの中で「meta charset=” UTF-8″」をピックアップするために下記をキーボードで打ち込みましょう

  • Macは「⌘command」+F
  • Windowsは「Ctrl」+F

すると、下画像のように①検索ボックスが出てくるので ②この検索ボックスに文字を入力すると③いくつあるのか?④どこなのか?がわかります

エラー箇所の探し方画像

上訂正:③metaだけ入力した場合、④「<」部分の色は変わりません

ちなみに<meta・・・utf-8″>までガッツリ入力すると、その部分が色表示されるので、削除部分がよりわかりやすいです

なるほど♪

これならラクに修正できるね

MEMO
  • 「meta charset=” UTF-8″」とは HTML5で使われる文字コードのことです

【3】「meta charset=” UTF-8″」エラー発見したら、「削除」して解決☆

修正が必要な コードエディター画面
una
una

あったよ!「meta charset=” UTF-8″」エラーが

でも、なんでこんなところに??

削除する場所

上画像の赤線部分を削除すれば解決です♪

 

「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」問題解決!「meta charset=” UTF-8″」 いつものエディターで検証してみる

正確には削除する部分meta・・は、<から始まるんだけど、

エラーにつながるといけないので「」で書いてます

しかし、ちょっと試してみようと思いました もう一度、あたらしく同じ文字を入力してみるのです それでも同じように「meta charset=” UTF-8″」が入ってしまうのなら何か対策が必要です

下画像は、 いつもの「ビジュアルエディター」の画面で入力したところです エラーの出た上に まったく同じ文字を入力しました

コードエディター画面で、エラー指摘のあった文と全く同じ文を新たに文字入力してみる

このまま「コードエディター」画面にしてみると・・下画像のように「meta charset=” UTF-8″」はありませんでした

コードエディターで エラーなしを確認

なぜ過去記述したものに「meta charset=” UTF-8″」が入ったのかナゾです

「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」問題解決!ナゾが解けた?WordPressのエディター内で コピペするとmeta・・が文章の頭に付く?!

wordPressのエディターで コピペするとmeta・・が文章の頭に付くから注意との記事がいくつかあったので試してみました

ワードプレスのエディターでコピペ検証

このページ(上画像)で試してみます この画面を「コードエディター」にすると、下画像のように異常なし◯です

コードエディター画面
文をコピーして下の行に貼り付けたビジュアルエディタ画面

いつもの「ビジュアルエディター」で、上の文章をそのままコピーして下の行に貼り付けました

このページを「コードエディター」にしてみると・・・

コードエディターで確認できた勝手に エラータグがついていた画面
una
una

なんでやねーーーん!

手品みたいだねー

そんなのんきなこと言ってられないわ!!

コピペできないじゃん

ほんとにmeta・・・がくっついてます みなさんのはどうなんでしょう??うかつに WordPress内ではコピペできませんね ビックリしました

ところが、翌日同じことをやってみたところmeta・・はくっついていませんでした 日によるんですかね??

記事を書く前に、meta・・がくっつかないのか一度コピペして確認するといいですね♪(めんどくさいけど) 大丈夫だったら 安心してバンバンコピぺできますね☆苦笑

WordPressのエディター内でのコピペはNG!のときもある

PR

「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました」問題解決!修正したら、サーチコンソールへgo!「修正を検証」クリック

サーチコンソールの「修正を検証」クリック画面

さて、気を取り直して・・修正したので「修正を検証」をクリックして サーチコンソールで検査してもらいましょう

「AMP有効」サーチコンソール画面

解決!おつかれさまでしたー☆

ちなみに、「meta・・・」を削除して修正したのに サーチコンソールで「修正を検証」クリック後、あいかわらずエラー表示になることがあります

そのようなときは、翌日・数日後、時間をあけて再度「修正を検証」してみてください

PR

【AMPの問題解決わかりやすく】ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました 「ワードプレス内コピペNG!?」まとめ

  • サーチコンソールでエラーページの確認をする
  • 原因:タグ「meta・・」の親タグは「P」ですが、「head」のみ使用できます
  • ワードプレス「コードエディタ」で「meta・・」をすべて削除して、更新
  • サーチコンソールで「修正を検証」をクリック
  • 修正が合格していれば「AMPページは有効です」と表示される(修正後、すぐに反映されないことがある)
  • 【注】ワードプレス内でコピペすると、タグ「meta・・」が、文の頭につくことがある

おつかれさまです!息抜きによろしければRelax with the video

タイトルとURLをコピーしました