htmlの強調タグ(bold,strong,em,i)の意味とSEO効果について、太字にするならどれが良いか考える
これまで、SEO効果を最大限活かして文章の内容を効果的に強調したいと考えるウェブサイト運営者は非常に多かったです。
SEO業者の間でももちろんこの部分については議論が活発になされ、見出しタグがどうとかhtmlの構造についての議論を読んでいました。
しかし、実情から言うと皆「経験ベースで言っているだけで、測定データがある訳でも何でもない」というのがあります。
つまり、自身の持っているサイト上で強調タグの使用方法について改修を加えた際にどのような順位変動が起こるかという、個人の経験ベースで話していることがまことしやかに言われているだけです。
本ページでは、htmlで文字を太字にするための強調タグの具体的な使い方とbold,strong,em,iそれぞれのタグの意味、さらにはそのSEO効果について、決着を付けたいと思います。
https://reviewlog.info/html-htag/強調タグ(bold,strong,em,i)のhtml文法上の書き方(意味)について
以下のサンプルコードを適当な.htmlファイルに貼り付けてブラウザから開いてみてください。
<b>好きな文を入れてみましょう</b> <strong>好きな文を入れてみましょう</strong> <em>好きな文を入れてみましょう</em> <i>好きな文を入れてみましょう</i>
いかがですか？
上2つが太字になっているのに対して、下2つで全く違いはありません。(ただし、ここでの文字の表示については全く意味がありません。)
ちなみに、htmlのタグはそれぞれ英語の頭文字 or 略語であると覚えて頂ければ、よりコードを頭に入れやすいと思います。
強調タグの場合、bはbold(太い)、emはemphasize(強調する)、iはitalic(イタリック体)です。
<b>と<strong>、<em>と<i>は同じ文字が出力される
ですが、注意してもらいたいのが上記コードはそれぞれ別々の意味を持っており、検索エンジンからも別々の評価を受けます。
では、これらにどのような違いがあるのでしょうか？
強調タグ(bold,strong,em,i)にSEO効果はほとんど無い！？
ここまでコードを書いた際の見え方の違いについて説明してきました。
果たしてこれらのコードはどれほどのSEO効果があるのでしょうか。
<strong>と<b>の違いは<strong>の方が検索エンジンからの評価が若干強い
<em>と<i>では<em>の方がSEO効果は若干高い
これだけ覚えておきましょう。
検索エンジンからの評価はもう片方に比べて高いという程度で、<strong>や<em>の強調タグを多用したからといって検索順位が上がるということはまずありません。
むしろ同じコードを乱用することにより、検索エンジンにスパムと捉えられて評価が下がるケースもよくあります。
Googleがページを判断する基準にしているのは、クローリングしてきたHTMLのコードです。
そのため、コンテンツの使い回し等よりも厳しい評価を受けてしまうのです。
強調タグ(bold,strong,em,i)はSEOのために利用するのではなく、装飾として利用するのも手(非推奨)←CSSで太字にすることが可能
文章中に強調したい単語があった場合、その単語のみを装飾したいケースがあると思います。
その時は、それぞれのタグ毎にCSSを書いてやることで変化させることができます。
strong {
font-weight: bold;
font-color: #FFF;
}
em {
font-size: 14px;
}
i {
font-style: normal;
}
b {
...
}
htmlタグでなくても、CSSで「font-weight: bold;」と記述すれば太字にできる！
上記コードの内容を説明すると、<strong>に関しては太字にして色を指定、<em>に関してはフォントサイズを指定しています。
<i>のように、文字に装飾を無しにすることもできます。
強調タグに関してはSEOに利用するために使うのではなく、文章中で強調したい単語がある時にだけ、このタグを利用して装飾を施すくらいの気持ちで使うのが大事です。
正直強調タグそれぞれの意味はSEO的にはあまり重要ではありませんが、CSSにより見栄えはいくらでも変えられます。
結局、文字の装飾で一番使われるhtmlタグは<span></span>
ここまでつらつら書いてきましたが、文字を装飾するのによく用いられるのは<span>タグです。
こちらは装飾を専門とするタグであり、<span>タグを置いただけでは何も効果はありませんが、idやclassを追加することで文字に装飾を施すことができます。(詳しい使い方については別途ご紹介します。)
先ほどの強調タグのCSSを書き換えて装飾を行うのも良いですが、蛍光ペンで塗ったような背景色を付け足すとかそう言った用途として使うのが適切かなとは思います。
結局はページの内容を濃いものにしていくことが、強調タグを利用した形だけのSEOを行うよりもいいのです。
