【SEO】headタグの失敗事例|要素を無視されHTMLが破損する意外な落とし穴とは?
PHPによる手作りのサイトを運営していますが、headタグ内の記述ミスでGoogleに要素を無視されている事態が発覚しました。具体的にどんなミスを犯し、どんな修正を行ったか解説します。
まずは結論
headタグを編集する際は、次のことに注意しましょう。
外部ファイルを利用する場合、エンコードは「BOM無し」で統一する
無駄なスペースが入っていないか確認する
bodyに記述するべきタグや文字がheadに入っていないか確認する
エンコードは「BOM無し」で統一する
BOMとは「unicodeの種類」を表す符号をファイル冒頭に付与する機能で、「BOM付き」の場合は中身の先頭に3バイトのデータが勝手につきます。ですが、ウェブサイトはこの情報を必要としていません。
これが問題になるのはPHPサイトの場合で、「BOM」を正しく処理できず、本来なくしてしまうべきこの3バイトのデータをブラウザに伝えてしまうのです。
ゆえに、すべてのPHPファイルを「BOM無し」で統一しましょう。
これに関しては「UTF-8のBOM付き・BOM無しの違いと確認方法|UX MILK」の解説がわかりやすいかと思います。
無駄なスペースが入っていないか確認する
headタグ内は厳格に記述しないとGoogleが読んでくれません。例えば「imgタグやiframeタグを入れてはいけない」とよく説明されますが、上記「BOM」や「スペース」さえ入れてはいけません。
よくheadにテンプレートをコピペして使う人がいますが、コピペするとスペースが混入する場合があるため、注意しましょう。そう、コピペして失敗したのは私です。
発生した失敗事例
弊サイトでは「重複コンテンツの大量発生」という問題が発生しており、その関連で複数のページについて、サーチコンソールのURL検査をかけてみました。
ちなみに、重複コンテンツの問題については次の記事で解説しています。
BOMでHTMLが破損した例
「URL検査」「クロール済みのページを表示」「HTML」の順に開いてみると、Googleに保存されているデータを見ることができます。すると、意図しないところでheadタグが閉じられ、bodyタグが始まっているのです。具体的には、headタグの中身がカラになっており、代わりに「赤い点」が入っていました。
弊サイトの場合、titleタグだけ無事でしたが、残りのhead要素がすべてbody内に勝手に移されていたのです。この「赤い点」が何なのか調べたところ、上述の「BOMの見えない3バイトのデータ」でした。
つまり、Googlebotは「BOM」という「head要素ではないもの」を検出したため、それ以降の要素を読み込まないどころか「勝手にheadを終わらせてbodyタグを挿入する」という余計なお世話を働いてくれたのです。
canonicalタグがbody内に移されてしまったことで、正常に機能していませんでした。ちゃんと記述している上にソースコードにも異常はなくブラウザでもページは正常に表示されるのですが、「見えない3バイトのBOM」でGoogleのデータベース上のHTMLが破壊されてしまったのです。
ちなみに、弊サイトで「赤い点」が入ったのは「BOMつきの外部ファイルを読み込んだ部分」でした。head内のtitleタグ以下は、全ページで共通だったため外部PHPファイルで一括記述し、読み込ませる形をとっていたのです。そこで外部PHPファイルを「UTF-8」で保存しなおしたところ、この問題は解消されました。
スペースでHTMLが破損した例
実はBOMの問題については、「ブラウザ上で謎の改行が入る」ことで、原因が「BOM」にあることに気づいており、すでに修正対応した新しいheadに交換していました。
ですが、対応済みの比較的新しいページもやはり、意図しない箇所でheadが閉じられbodyが始まっていたのです。
今度は「BOM」の問題を解消済みですから、別の問題が発生しているわけです。そこで弊サイトのheadを出力している外部ファイルを確認してみました。すると、「Googleによって</head><body>が挿入される位置」に全角スペースが見つかったのです。
「ツイッターカード」を表示させるためにメタタグを追加していたのですが、コピペした際に全角スペースが混ざり込んでいたようです。Googlebotはこの全角スペースを検出し、またしても「勝手にheadを終わらせてbodyタグを挿入する」という余計なお世話を働いてくれたのです(テンプレートをコピペした私が悪いのですが)。
SEO上の問題は?
実は、弊サイトでは奇跡的にSEO上の問題が生じていなかったと考えています。なぜなら、canonicalタグの記述を間違えていた上に、メタディスクリプションも当時は記述していなかったからです。要は、HTMLが破損して助かっていた面もあるわけです。
ですが、body内にmetaタグやlinkタグが移ってしまった以上、HTML記述にミスがある状況を生んでしまったのは確かです。
BOMやスペースの位置によってはSEO上重要な「タイトルタグ」「メタディスクリプション」を読み込ませなくする場合もありますから、必ずチェックしておきましょう。
Googleが保存するHTMLを必ずチェックしよう
Googleはインデックス登録する際に、HTMLをデータベースに保存しています。「クロール済みのページを表示」「HTML」の順に開くとそのデータを見ることができます。
このデータはGoogleがプレビュー表示するためamp化され、preconnectなどのタグが追加されて見にくくなっていますが、「</head><body>」が意図しない位置に挿入されている場合、headの要素に問題があるということです。
「公開URLをテスト」でも同様に「Googleが改変したHTML」が見られますから、headタグを編集する際はここで誤りを発見することができます。
Googleに焼かれた余計なお世話の第二弾が発覚しました。勝手にURLを生成されて低品質コンテンツ扱いされるという災難について、次の関連記事で解説しています。