テキストを強調するstrongタグの使い方と注意点を解説

ブログを書いていると、要点やポイントを強調することは多いですよね。WordPressユーザーならstrongタグやbタグなどを使ってテキストを太字にすることがあると思います。

ただし、場所によっては使わない方が良かったり、別の方法が推奨されているケースも存在します。

そこで今回はstrongタグの使い方や本来の役割、使用時の注意点などを一から解説していきたいと思います。

strongタグとは

その名の通り、テキストを強調（太字に）する役割を持つHTMLタグです。

<strong>太字にしたいテキスト</strong>

見た目を太字にするだけでなく、その意味を強調する場合に使うタグです。デザインや視認性の観点からテキストを太字にする場合は使いません。

strongタグとbタグとの違いは？

よく比較されるbタグでもテキストを太くできますが、bタグはただ文字を太くするだけで、strongタグは意味を強調するというように覚えておけば大丈夫です。

bタグには、検索エンジンに重要性を伝える役割はありません。むしろ太字にしたいだけであれば、style属性やCSSで対応する方が望ましいです。HTMLがテキスト（文章）の構造や意味付けに使われ、CSSはその見た目を調整するためにあるからです。→CSSで太くする方法はこちら

strongタグの使い方

strongタグは、<strong></strong>で対象のテキストを囲んで使います。2つの例で解説いたします。

最も重要なのは、<strong>高品質なコンテンツを発信し続けること</strong>です。

これは使い方としていい例で、文中で最も重要な部分が強調されているのがわかります。前後に文章があったとしても、ここがポイントであることが伝わりますよね。

一方、下記はあまり良くない例です。

<strong>ドメイン</strong>：サイトの住所
<strong>サーバー</strong>：サイトをつくるための土地
<strong>WordPress</strong>：サイトをつくる道具

文脈上強調しているわけではなく、単に視認性のみで太字にしています。箇条書きの単語とその説明を文字の太さで区別しているだけです。

このようなケースの場合は、strongタグを使わずにCSSで対応した方がベターです。太字にする理由に論理的な意味はなく、見た目だけの問題だからです。

strongタグを使う際の注意点

実際にstrongタグを使う際はいくつか注意点があります。それぞれ解説いたします。

• 装飾だけの場合は使わない
• 複数使いすぎない
• 見出しには使わない

装飾だけの場合は使わない

表やテーブル、箇条書きの見出しを太くしたい場合など。デザイン的に太字にしたいだけの時は使わないようにしましょう。人にとってはデザインが変化するだけですが、検索エンジンにはすべてが重要なキーワードかのように伝わってしまいます。

複数使いすぎない

意味を強調したいキーワードにだけにstrongタグを使う場合でも、使い過ぎには注意しましょう。その記事でどの部分が重要なのか逆にわかりにくくなりますよね。強調されている部分が多すぎると読みにくく、検索エンジン（SEO的）にも好ましくありません。

見出しには使わない

見出し（hタグ）がすでに強調させる役割を持っているため、ここにstrongタグを使うと二重で強調することになります。デザイン的に太くしたい場合は必ずCSSで対応するようにしましょう。

strongタグはSEOに関係あるの？

実はSEOに与える直接的な影響はありません。strongタグを使った途端に順位が劇的に上がるようなことはないわけです。Google公式の見解でも、文字を太くするだけのbタグとSEO面での差は無いと述べています。

しかし、HTMLの仕様上、検索エンジンにキーワードの意味を強調できるのはstrongタグです。

的確な箇所で正しく使うことで、読者に要点が伝わるのも事実です。読み手にとってわかりやすいコンテンツは、結果的に順位を上げることにも繋がりますし、検索エンジンに重要なキーワードを伝えておいて損はありません。

検索エンジンを神経質に気にする必要はありませんが、ユーザーが読みやすいようにテキストを強調することは、間接的にSEOに関係してくると思います。

デザイン的に強調する場合はCSSを使う

単にテキストを強調したい場合はCSSを使います。見栄えに関しては、HTMLタグよりもCSSの使用が推奨されているためです。装飾例をいくつかご用意しましたので参考にご覧ください。

ピンポイントで太字にする

ここが<span style="font-weight: bold;">太字になるテキスト</span>です。

このようにspanタグで対象を囲んで、style属性（CSS）にfont-weightを指定すればOKです。デザイン的に一部を太字にしたいときに使います。

背景色を強調する

テキストの<span style="background-color: #ffff66;">背景色が強調</span>されます。

同じくspanタグで囲んで、背景色を指定すればOKです。strongタグと併用すれば、ばっちり目立ちます。

テキストの下に<span style="background: linear-gradient(transparent 60%, #ffff66 60%);">マーカーが引かれたように強調</span>されます。

背景色よりスマートな印象でマークできます。こちらもstrongタグと併用するとより強調されますね。

一括で装飾を加える

一括で装飾を加えたいときは、スタイルシート（CSS）に、このように書いてあげてもOKです。strongタグを使わずに、h2見出しすべてを太字にする場合の例です。

<h2>見出し1</h2>
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
<h2>見出し2</h2>
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
<h2>見出し3</h2>
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

h2{
{font-weight: bold;}
}

一括で特定の箇所を強調する場合は、class等を付与してあげてCSSに書いてあげるとスマートですね。

まとめ

strongタグの役割と使い方、注意点を解説いたしました。

strongタグは、正しく活用することで、文章を格段に読みやすくしてくれます。検索エンジンにもキーワードの重要性を伝えられるので、間接的にSEOにも影響してくるかもしれません。

あらゆる強調にstrongタグを使うのではなく、見た目に関する調整はCSSで対応しておく方が、HTMLの構造的にもSEO的にもよりベターになるのではないでしょうか。