見出し画像

【SEO】headタグの失敗事例｜要素を無視されHTMLが破損する意外な落とし穴とは？

村田　泰基

PHPによる手作りのサイトを運営していますが、headタグ内の記述ミスでGoogleに要素を無視されている事態が発覚しました。具体的にどんなミスを犯し、どんな修正を行ったか解説します。


まずは結論

headタグを編集する際は、次のことに注意しましょう。

  • 外部ファイルを利用する場合、エンコードは「BOM無し」で統一する

  • 無駄なスペースが入っていないか確認する

  • bodyに記述するべきタグや文字がheadに入っていないか確認する

エンコードは「BOM無し」で統一する

BOMとは「unicodeの種類」を表す符号をファイル冒頭に付与する機能で、「BOM付き」の場合は中身の先頭に3バイトのデータが勝手につきます。ですが、ウェブサイトはこの情報を必要としていません。

これが問題になるのはPHPサイトの場合で、「BOM」を正しく処理できず、本来なくしてしまうべきこの3バイトのデータをブラウザに伝えてしまうのです。

ゆえに、すべてのPHPファイルを「BOM無し」で統一しましょう。

UTF-8-BOMが原因

これに関しては「UTF-8のBOM付き・BOM無しの違いと確認方法｜UX MILK」の解説がわかりやすいかと思います。

無駄なスペースが入っていないか確認する

headタグ内は厳格に記述しないとGoogleが読んでくれません。例えば「imgタグやiframeタグを入れてはいけない」とよく説明されますが、上記「BOM」や「スペース」さえ入れてはいけません。

よくheadにテンプレートをコピペして使う人がいますが、コピペするとスペースが混入する場合があるため、注意しましょう。そう、コピペして失敗したのは私です。

発生した失敗事例

弊サイトでは「重複コンテンツの大量発生」という問題が発生しており、その関連で複数のページについて、サーチコンソールのURL検査をかけてみました。

ちなみに、重複コンテンツの問題については次の記事で解説しています。

BOMでHTMLが破損した例

「URL検査」「クロール済みのページを表示」「HTML」の順に開いてみると、Googleに保存されているデータを見ることができます。すると、意図しないところでheadタグが閉じられ、bodyタグが始まっているのです。具体的には、headタグの中身がカラになっており、代わりに「赤い点」が入っていました。

意図しない</head><body>その1

弊サイトの場合、titleタグだけ無事でしたが、残りのhead要素がすべてbody内に勝手に移されていたのです。この「赤い点」が何なのか調べたところ、上述の「BOMの見えない3バイトのデータ」でした。

つまり、Googlebotは「BOM」という「head要素ではないもの」を検出したため、それ以降の要素を読み込まないどころか「勝手にheadを終わらせてbodyタグを挿入する」という余計なお世話を働いてくれたのです。

canonicalが動作しない

canonicalタグがbody内に移されてしまったことで、正常に機能していませんでした。ちゃんと記述している上にソースコードにも異常はなくブラウザでもページは正常に表示されるのですが、「見えない3バイトのBOM」でGoogleのデータベース上のHTMLが破壊されてしまったのです。

ちなみに、弊サイトで「赤い点」が入ったのは「BOMつきの外部ファイルを読み込んだ部分」でした。head内のtitleタグ以下は、全ページで共通だったため外部PHPファイルで一括記述し、読み込ませる形をとっていたのです。そこで外部PHPファイルを「UTF-8」で保存しなおしたところ、この問題は解消されました。

スペースでHTMLが破損した例

実はBOMの問題については、「ブラウザ上で謎の改行が入る」ことで、原因が「BOM」にあることに気づいており、すでに修正対応した新しいheadに交換していました。

ですが、対応済みの比較的新しいページもやはり、意図しない箇所でheadが閉じられbodyが始まっていたのです。

意図しない</head><body>その2

今度は「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を生成されて低品質コンテンツ扱いされるという災難について、次の関連記事で解説しています。


この記事が気に入ったらサポートをしてみませんか？