CSSコーディングの際よく利用されるタグの中に<div>と<span>があります。
<div>はその場限りの領域をお手軽に作れるブロックレベル要素、
<span>はその部分にのみCSSを適用できるインライン要素であり、共に重宝している人は多いと思います。
しかしこのタグは使い方を間違うとSEO上マイナスの効果を生みます。というと誤解が生まれますね。
厳密には「プラスの効果を生みません（本来プラスにできるはずの評価を逃します）」。
ご存知でしたか？
幅広いシーンで使える汎用目的のタグ
<div>も<span>もあらゆるページ上で見ることができるほど広く活用されているタグです。
記事を書いてて、ちょっとこの部分だけ加工したいなと思った時すぐに使える手軽さがウリのこのタグは、検索エンジンのクローラにとってどのように見えているでしょう？
答えは「何でもない」です。
太くしても赤くしても「強調」にならない
たとえば、
あいうえお<span style="font-weight:bold;color:red;">かきくけこ</span>さしすせそという文章を作ったとします。
ブラウザを通して我々人間の目で見ると、
あいうえおかきくけこさしすせそ
となり、「かきくけこ」部分が強調されます。
しかしspanタグは意味を持たないため、検索エンジンのクローラはこの部分を「強調」とは認識しません。ただ単に「太く、赤くなっている」と認識するだけです。
強調部分を伝えるタグは<strong>です。これを使えば検索エンジンは「この部分が重要なんだ」と認識します。
記事の要点を伝える際、見た目が同じでもクローラーの認識が異なるため、使うタグは正確に選ぶ必要があります。
意味のあるタグも多用しすぎるとペナルティ
強調を意味する<strong>タグですが、ここも大事、あそこも大事となってきて、1つの記事の中で10回も20回も使用してしまうと、検索エンジンに一種のスパムと認識される危険があります。
ちょっと違うケースですが似たような用法として、昔のウェブサイトには記事の末尾に、記事と関係のないキーワードを大量に散りばめたものがありました。こうすることで少しでも多く検索結果に出そうと目論んだのでしょうが、現在こうした行為はスパムとしてペナルティを受ける対象になっています。
余談ですがこのような手法を「キーワードスタッフィング」といいます。
これと同じように<strong>などの意味のある（＝クローラが理解できる）タグを多用しすぎると、「この記事は内容が薄く、ただ単に検索順位を上げるためにキーワードを散りばめただけの低品質なものだ」と判断される可能性があります。
それを避けるため、太くしたい箇所が多い時は意味のない<span>タグを併用します。
特に重要で強調したい場所を数か所にしぼり、そこに<strong>タグを使用。
太字や赤文字、下線などで装飾したいけど「強調」ではない部分には<span>タグを使用。
このように使い分けることで、人間の目にもクローラーにも正しい構成で記事を読んでもらえるようになります。
div、spanタグの用途は本来の意味での「装飾」
今までの説明だけだと、意味を持たない<div>、<span>タグは利用価値がないと思ってしまうかもしれません。
しかし、たとえばホームページの各種パーツ（ヘッダーに置くサイトタイトルやサイドバーに置くボタンなど）を作る時、「文字を太くしたい」と思ったとして、そこに<strong>タグを使うとどうなるでしょうか。
全てのページに一定数の<strong>タグがデフォルトで存在することになってしまいます。ページ数によってはそれだけでクローラに不審がられてしまうかもしれませんよね。
まして作成したものがボタンなら、その部分は「太字」であって「強調」ではないはずです。ここでもクローラにあらぬ誤解を与えかねません。
このように、「意味を持たせたくないけど装飾はしたい」場所に使えるのも<div>と<span>タグの魅力です。
追記：意味のある強調の書き方
コメント