強調タグ（bタグ、emタグ、strongタグ）のルールと使用する際のポイント

記事コンテンツを作成する際には、下記がポイントになります。

• ターゲットユーザーの基本情報をまとめるペルソナ設計
• ユーザーが検索するであろうキーワードのニーズ調査
• ニーズのあるキーワードを含めたTitleの設計
• 作成したタイトルに基づいたオリジナルの記事本文の企画と作成

さらに、本文中において、特にユーザーにアピールしたい、見て欲しい文章には、文字装飾を活用します。

文字装飾は、太字や色の変更、マーカーといった様々な種類が存在します。そのように該当箇所をHTML内でページとして強調する場合は、強調タグを使用します。

強調タグは、それぞれに役割があり、ページとして表示された際の見え方だけでなく検索エンジンの評価も変わってきます。

そこで、今回は強調タグにはどんな種類があり、それぞれがどんな役割をもつのか、また、検索エンジンがどのように評価するのかについて紹介していきます。

強調タグってそもそもなに？

通常ワードやエクセル、パワーポイントで太字にする際は、既に各ソフトに入っている機能を利用しますが、ウェブ上でページとして表示する際には、HTML内で該当する文章を強調タグで囲むことで、太字にするなどの装飾ができます。

また、ユーザー目線で文字を強調するだけでなく、検索エンジンに対しても該当の文章を強調したり、重要度を伝えたりすることができます。

ただし、強調タグは、HTML5とそれ以前のバージョンで使用方法と役割が異なります。そのため、今回はこれまでの使用方法と役割だけでなく、HTML5ではどのように使用方法と役割が変化するのかについてもまとめていきます。

bタグ<b>ってなに？

ワードやエクセルのフォント変換機能にもあるように、太字に装飾ができます。主な使用方法としては、該当する文章を<b>で囲みます。

すると、ページで表示された際にはその文章が太字で表示されます。ここまではユーザー目線で見るbタグの特徴です。

一方で検索エンジンに対してですが、bタグページ上で太字になるのみで、検索エンジンに対し重要性をアピールする役割はありません。

ここまでが従来の使用方法と役割です。

一方、HTML5にアップデートされた後は、本文中における他の文言、単語と区別することで注意を引きたいテキストに対して使用するものになりました。

例えば、特に重要となるキーワード、レビューや感想における商品名が該当されます。

bタグの使用方法

従来の場合

HTML5からの場合

strongタグ<strong>ってなに？

bタグと同様に該当の文章を囲むと太字に変換することができます。

ではｂタグと何が違うのか。

strongタグを使用することで、該当の文章は太字に変換されるだけでなく、検索エンジンに対し、そのテキストは特に重要なものだと強調し、アピールすることができます。

従来、strongタグは一つの文章につき、一つしか使用することはできませんでしたが、HTML5以降は該当する文章内でも、特に重要度が高い単語やテキストに対して重ねて使用することができます。

strongタグの使用方法

従来の場合

HTML5からの場合

bタグとstrongタグの違いってなに？

上記にもまとめましたが、bタグとstrongタグは両方とも、強調したいテキストに使用することで太字に変換することができます。

ただし、bタグは検索エンジンに該当のテキストが重要であることを強調できません。

一方、strongタグは検索エンジンにも該当の文章を強調しアピールすることができます。しかし、多様しすぎるとペナルティを受ける可能性がありますので、注意が必要です。

このように、ユーザー目線で見ると両方とも太字へ変換できるという点は変わりませんが、検索エンジン側に強調できるという点で役割が異なります。

iタグ<i>ってなに？

<i>で囲んだ該当文章はイタリック体で右斜めに傾いた書体に変換されます。

この際、指定するフォントの中にイタリック体が存在しまない場合は斜体に変換されます。もし、斜体もイタリック体も両方共存在しない場合は、標準のフォントがそのまま斜めに傾きます。

通常、日本語のフォントの場合はイタリック体や斜体が用意されているケースがほとんどないため、多くの場合、標準のフォントがそのまま斜めに傾きます。

iタグはbタグと同様に見た目は斜めに変換されますが、検索エンジンに対しては、重要性をアピールできません。

HTML5以降は、他と区別したい声や感情を表すテキストや、技術的な言葉などの専門用語、日本語以外の慣用句などを表すタグとなりました。

更に、これまでは斜体にしたいというだけであればiタグのみを使用すればよかったのですが、HTML5以降はスタイルシートの表記で代用できるようになり、基本的にはスタイルシートの使用が推奨されています。

iタグの使用方法

従来の場合

HTML5からの場合

emタグ<em>ってなに？

emタグで囲んだテキストは斜めに変換されます。
ここまではiタグと同様です。ただし、emタグは該当のテキストを強調する役割をもちます。

ただし、あくまで強調されるのみで、strongタグのように重要性を伝えることはできません。そのため、重要性をアピールしたい場合はstrongタグを使用することになります。

HTML5の場合は該当のテキスト中で、使用する場所ごとに、ニュアンスが変わります。

emタグの使用方法

従来の場合

HTML5からの場合

HTML5では、使用される場所ごととニュアンスが変わります。

そのままの意味を伝えるケース

「仕事していたのはAさんである」と伝えるケース

「PCを使用していた」と伝えるケース

「仕事をしていたことに驚いた」ことをと伝えるケース

iタグとemタグの違いってなに？

iタグにより、該当のテキストを斜体に変換できますが、検索エンジン側へ強調する役割はありません。

一方でemタグは斜体に変換するだけでなく、該当の文章を強調することができます。

表示はどちらも変わりませんが、強調したいという場合は、emタグを使用しましょう。

ただ、先にもまとめたようにemタグには重要性を検索エンジン側に伝える役割を持ちません。ここで、重要性を伝えるstrongタグとの違いを見ていきます。

strongタグとemタグの違いってなに？

この2つのタグはそれぞれページ上での出力結果が異なります。strongタグは太字で、emタグは斜体に変換されます。

更に、それぞれ強調の役割がありますが、strongタグは該当のテキストが特に重要であると検索エンジン側に伝えることができ、emタグはニュアンスを変えて伝えることができます。

emタグの役割は、あくまでニュアンスを変更することなので、単語自体を強調する役割はありません。

そのため、ページ内において特に重要なキーワードを検索エンジンに対しアピールしたいという場合にはstrongタグが使用することになります。

強調タグを使用する際の注意点

乱用を避ける

強調タグの中でも検索エンジン側に対し、特に重要であることを強調するstrongタグですが、strongタグはページ内でも乱用するとスパム行為とみなされる可能性があります。

例えば、、、

というHTMLソースコードを記載すれば、テキスト内の多くが強調されることになり、最終的にどこが一番重要なのかわからなくなってしまいます。

このように、ページ内において乱用することで、スパム行為と認定されてしまうケースがあり、検索結果の順位にも影響を及ぼす可能性があるため、使用はなるべく控えましょう。

見出しタグ内で併用しない

特に見出しタグ内で、strong タグを使用するのは不適切と言われています。

例えば、、、

上記のように、見出しhタグの中での併用は避けましょう。

見出し部分はページ内でも既に重要であることを示している部分なので、その中で更にstrongタグを使用してしまうとスパム行為とみなされてしまいます。

おわりに

これまで紹介してきた強調タグはそれぞれ役割を持ちますが、検索エンジンからの評価はどれも変わらないと名言されています。
また、文字装飾を行う際や、重要である箇所をアピールする際にはスタイルシートや見出しタグなどで代用もできるため、今回紹介した役割と使用方法をよく理解していただき、必要最低限にとどめて使用いただければと思います。