Google Search Consoleのエラーの対処法
こんにちは、オサカナです。
「Google Search Console(サチコ)」から「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました。」とエラーの通知が来ました。
今回は、このエラーが出た時の対処法を解説します。
ドキュメント ヘッドの外側って・・・
対処法：ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました。
結論を言えば、
<head>タグ内でしか使用できないタグを<body>タグ内から消す
です。
では、具体的に何をすれば良いか、を明確にするため、原因を調査します。
エラーの原因調査
思い当たる節もなくなぜこのエラーが？という状態でしたが、Google Search Consoleの機能ですぐに原因が分かりました。
AMPページのソースを確認する
Google Search Consoleで問題となったページの内容を確認します。
- ①画面下の「例」にあるURLをクリック
- ②ウィンドウ右に情報が表示される
- ③赤マーカの始まりが問題箇所と特定できる
ということで、なぜか本文に<head>タグでしか使えない<meta>タグがあることがわかりました。
<meta charser="utf-8">ページによっては大量にあってびっくりした。
なんで？
<meta>タグの理由は？
どうもブロックエディターで文章をコピーして貼り付けると設定されることがわかりました。
実際見てみると・・・
ブロックエディター内で文章を選択しコピーする
コピーした文章を貼り付けする
「HTMLとして編集」でタグを見ると
なぜか入っておる・・・
少し前までは入ることはなかったので、何か不具合がありそうです。
WordPressの更新？プラグインの問題？
(2021/9/24追記)発生原因が特定できました。
Chrome(バージョン: 93.0.4577.82（Official Build） （x86_64）)で発生することに気づきました。Safariでは発生しません。
原因はわかっても対策の仕方がよく分からない
記事の問題箇所を修正する
- ①問題のある記事の編集画面で「コードエディターを開く」
- ②<meta charser=”utf-8″>タグを削除する
①問題のある記事の編集画面で「コードエディターを開く」
右上の「…」を縦にしたアイコンを押して
「コードエディターを開く」を選択します。
②<meta charser=”utf-8″>タグを削除する
Ctrl+Fでブラウザの検索で<meta charset=”utf-8″>を検索するとすぐ見つかるので消します。
数が多い時は、外部テキストエディターなどに貼り付けし、一括置換して貼り直すのが楽ですね。
Google Search Consoleで修正を検証
↑の問題を修正し「Google Search Console(サチコ)」を開きます。
「修正を検証」をクリックします
初期検証中が表示されるので待つ
検証が開始されました
いけた！
（数日後）検証が終了し「合格」します
(2021/9/1追記)ようやく合格しました。
まとめ：やはりブロガーにサチコは必須
今回は「Google Search Console(サチコ)」で「ドキュメント ヘッドの外側で、ドキュメント ヘッドの直接の子としてのみ許可されているタグが検出されました。」とエラーになったときの対処法について解説しました。
こうやって問題を指摘してくれないと気づきませんから
ブロガーに「Google Search Console（通称:サチコ）」は必須ツールですね。
Googleの検索順位の評価にも、こういったページの問題が悪影響がないとも言えないので、できる限り早く修正した方が無難。
マッハで直す
Google Search Consoleのエラー・警告一覧
本ブログ運営にあたり、今まで発生してきたエラーや警告の一覧です。
コメント
こちらの記事のおかげで、しばらく困っていたAMPエラーを解消できました！！
ありがとうございました〜！！
解決して良かったです！
Googleさんの指摘にはシビアに対応しないとですね。