SEOが重要なら #(ハッシュ)を URL に含めてはいけない

[レベル: 中級]

Google にインデックスさせたい URL に「#」(ハッシュ/フラグメント)を含めることは推奨されません。
# よりもあとの部分を削除した URL を Google(および、ほかの検索エンジン)はインデックスするからです。

代わりに History API を用いて一意の URL を各コンテンツに割り当てる構成が推奨されます。

ページ内移動の # はインデックスに問題なし

ページ内の特定の場所にジャンプさせる name 属性または id 属性として # を利用するのであれば、インデックスに問題はおきません。

たとえば末尾に #f4 が付いている次の URL をクリック/タップすると、ページの途中に移動した状態で表示されます。

https://webtan.impress.co.jp/e/2014/05/09/17440/page/1#f4

Google のヘルプ記事ページは各見出しに id 属性を振っていることが多く、リンクを貼るときに当該の場所に直接連れていくのに便利です。

基本的に、検索エンジンは、# 以下を取り去った URL をクロール、インデックスの対象にします。
上の例でいうと、https://webtan.impress.co.jp/e/2014/05/09/17440/page/1 です。

# で指定された特定の場所までジャンプさせるのは、ブラウザの機能によるものです。
検索エンジンとは関係ありません。

# があろうがなかろうが、検索エンジンがインデックス対象にするのは、# を含まない URL です。
ブラウザによって連れて行かれたページ内の場所がどこであれ、そのページ全体は同じですからインデックスさせるコンテンツには差異は生まれません。
つまり、ページ内移動を目的とした # 付き URL の利用は SEO にはまったく問題ありません。

コンテンツを変化させる # は SEO に問題あり

# を含む URL が SEO で問題になってくるのは # によってコンテンツが変化する場合です。

たとえば、パラメータの ? の代わりに # を使うケースが挙げられます。
ほかには今なら、SPA や PWA のサイトにおいて # でコンテンツが変化する構成は珍しくありません。

コンテンツが変化するのに URL に # が付いていたらどうなるでしょうか?

  1. https://example.com/ <= トップページ
  2. https://exmaple.com/#funnycontent <= 笑えるコンテンツのページ

先ほども説明したように、# 以下を取り去った URL を Google はインデックスします。
したがって、2つ目の URL は https://example.com/ になってしまい、トップページと同じになってしまいます。
どんなにたくさんのページを公開していても、このサイトでインデックスされるのはトップページだけです。😨

知っている人には当たり前のことのように思えますが、SEO に無関心だと笑うに笑えないケースが実際に発生してしまいます。

対処方法

では、どうすればいいのかを最後に説明します。

パラメータには # ではなく ? を用います。
SPA や PWA では History API を使い、一般的に用いられている URL を割り当てるのが現在の推奨です。

https://exmaple.com/#funnycontent ではなく、
たとえば https://exmaple.com/funnycontent/ にします。

以前は #! (ハッシュ バン)形式が推奨されていましたが、Google は現在はインデックスしないようになっているとのことです。

# 付きの URL をそのままインデックスする場合もあるそうですがそれは極めて稀で、長年の経験から学んで処理する例外中の例外だそうです。

確実にインデックスさせたいのであれば、各コンテンツには # を用いない一意の URL を割り当てるようにしてください。

なお、この記事で僕が説明したことを Google の公式な情報として入手したい方は、公式ブログ記事Google I/O 2018 のセッション動画で復習できます。