strongタグの使い方を解説！bタグとの違いやSEO効果・注意点
strongタグと同じく太字で表示させることのできるbタグというHTML要素があります。スタイルを当てない限りページ上では全く同じように表示されることから、どちらを利用するのが正解なのか迷うことがありますが、基本的には、どちらを利用しても問題ありません。
今回はそんなstrongタグについて紹介します。bタグとの違いやstrongタグの効果的な使い方などを解説します。
目次
strongタグとは？bタグの違い
strongタグとは、太字にするなどして文字情報を強調させるHTML要素です。指定した箇所の重要性をユーザーや検索エンジンに示すために用いられます。
文字情報の重要性を強調する方法として、「strongタグ」のほかにも「bタグ」というHTML要素があります。見た目上は同じに見えても、両者には定義に違いがあるため、使用する際には注意が必要です。
| タグ | 意味 |
|---|---|
| strongタグ | 指定した箇所の重要性・緊急性を検索エンジンに対して強調する |
| bタグ | 指定した箇所を太字に装飾する（検索エンジンに対する強調の意味はない） |
strongタグはブラウザに表示される文字列が太字に装飾され、同時に検索エンジンに対しても強調する仕組みになっています。bタグは同じくブラウザに表示される文字列が太字に装飾されますが、検索エンジンに強調されているという情報は伝わりません。
ただし、Googleの公式チャンネルの発表において、実際にはstrongタグもbタグも同じ扱いをしていると明言されていることから、検索エンジンがクロールした際に強調されているという形で情報が伝わるとのことです※。
※参照：Google Search Central公式チャンネル｜Is there a difference between the “strong” and “b” tags in terms of SEO?
したがって、strongタグとbタグの違いについては気にする必要がなく、使い分けなくても良いということになります。
注意点としては、strongタグとbタグはHTML要素であり、CSSによって装飾の設定がされている場合は混在してしまうとデザイン的に統一感が崩れてしまう可能性があることです。複数人で編集作業を行う場合など、strongタグとbタグのどちらか一方を使用するようにルールを定めておくといいでしょう。
strongタグの使用によるSEO効果
strongタグを使用したからといって、Googleからの評価が上がり、SEOに好影響をもたらすわけではありません。
基本的にHTML要素は文章を構造化し、検索エンジンが理解しやすくなるようにする仕組みです。strongタグは、重要性や緊急性を持った文字列や文章であると検索エンジンに伝えるだけです。逆を言えば、ページ上で重要な箇所をGoogleが知る手助けができる、という役割を秘めています。
また、strongタグによって文章が読みやすくなることは非常に大切です。
文章が読みやすくなることによって、ユーザーの利便性が向上し、エンゲージメント（ユーザーが興味を示している度合。GA4で計測されている）が高まることで、間接的ではありますがSEO的にポジティブな効果が見込める可能性があります。
strongタグの基本的な使い方
strongタグは太字にして強調したい部分を<strong></strong> の中に入れ子（間に挟む）して使用します。 例として以下の文章をHTMLで構造化し、「強調する」の部分を太字にしたい場合の使用方法を見てみましょう。
▼例
strongタグには指定した箇所の重要性・緊急性を強調する意味があります。
pタグは段落の要素であり、段落の要素の中の「強調する」の文字列をstrongタグで太字かつ強調するには以下のように設定します。
<p>strongタグには指定した箇所の重要性・緊急性を<strong>強調する</strong>意味があります。<p>実際にブラウザで表示されるのは以下のような形であり、「強調する」の部分が太字で表示されるようになります。
strongタグには指定した箇所の重要性・緊急性を強調する意味があります。
補足として、要素の始点を行う親タグである<strong>の記載ミス、もしくは要素の終点となる閉じタグの</strong>の「/」を間違いないようにする必要があることを覚えておきましょう。strongタグが正しく機能しなくなります。
HTMLタグは非常に厳格であるため、文字列の間違いや過不足がある場合、そのまま表示されてしまったり、後のHTMLタグに影響してコンテンツ全体が崩れてしまうことにも注意が必要です。
そのため、直接HTMLタグを編集するのはWeb制作に慣れている人に任せることをおすすめします。もしくは、マニュアル化や情報の共有によって誰でも作業できるように落とし込んでおくといいでしょう。
また、HTMLタグを編集する必要のないWordPressのようなCMSを利用するのもおすすめです。MicrosoftのWordの編集メニューのような形で、ボタン1つで太字や強調ができるようになるのでHTMLの記述ミスによるエラーや不具合を防げるようになります。
さらに目立たせるには文字色を変更する
太字にはなるものの、他の文字列と同じフォントカラーのため、人によっては強調されていることに気づかない可能性があります。
そのため、さらに強調していることを目立たせるために文字色を変更する方法も覚えておきましょう。
一昔前であれば<fontcolor=”（色指定）″></font>という形で文字のフォントカラーを変えるのが一般的で、現在でも利用されているケースがあります。ただし、昨今では利用が推奨されておらず、CSSによるフォントカラーの指定を行うのが一般的です。
色指定についてはカラーネームのアルファベットで指定する方法と、RGB値で指定する方法があります。例えば、赤のカラーネームはred、RGB値16進数カラーコードであれば#ff0000で指定することで赤色に変更することが可能です。
実際に以下の文章をHTMLタグとCSSによって、strongタグで指定した「強調する」部分の文字列のフォントカラーを赤にする設定方法をご紹介します。
strongタグには指定した箇所の重要性・緊急性を強調する意味があります。
まず以上の文字列をHTMLによって構造化したものを以下に示します。
<p>strongタグには指定した箇所の重要性・緊急性を<strong>強調する</strong>意味があります。<p>
次にstrongタグのフォントカラーを赤にする設定を2種類以下に示します。
/* RGBで指定する場合 */
<style>
strong {
font-color: #ff0000;
}
</style>
/* カラーネームで指定する場合 */
<style>
strong {
font-color: red;
}
</style>
CSSで上記のどちらかを記述すると以下のようにブラウザで表示されるようになります。
strongタグには指定した箇所の重要性・緊急性を強調する意味があります。
サンプルでは、そのままHTMLに<style></style>タグで記述する流れにしましたが、基本的にはHTMLとCSSは別のファイルで運用していくのが一般的です。その他にもstrongタグに直接style要素で色を指定する方法もありますが、現在は推奨されていません。
fontcolorタグやstyleタグも含めて、推奨されていない方法でも文字色を赤くすることができますが、将来的にブラウザが非対応になる可能性もあるため、なるべく早い段階でHTMLとCSSのファイルを切り分けて、推奨されている方法で運用していくことをおすすめします。
HTMLやCSSについてはWeb制作の技術や経験が必要なため、専門家に任せるかスキルのある人材の雇用及び育成を検討するといいでしょう。
strongタグの使い方についての注意点
strongタグの使い方に関する注意点は以下の3つです。
- 1文中で複数回使わない
- 1ページ内で使い過ぎない
- 見出しタグ内で使わない
1文中で複数回使わない
strongタグは、なるべく一つの文中で複数回使用しないように注意しましょう。強調する箇所が多くなればなるほど、どの部分が一番重要なのか認識しづらくなるのが理由です。
実際にどのような形になるかまずはHTMLタグで示します。
■NG例・HTML/CSS
<style>
strong {
font-color: red;
}
</style>
<p><strong>strongタグ</strong>には指定した箇所の<strong>重要性・緊急性</strong>を<strong>強調する</strong>意味があります。<p>以上のような形でstrongタグを複数箇所で指定、同時に文字色をCSSで赤くした場合のブラウザでの表示が以下になります。
■NG例・ブラウザでの表示
strongタグには指定した箇所の重要性・緊急性を強調する意味があります。
太字で文字色が赤くなっているため、重要であることはすぐに伝わってきますが、どの部分が一番重要なのか分かりにくくなってしまっています。
強調する箇所の選び方や考え方として、以下の3つを意識することをおすすめします。
- 文章の中で必ず伝えたい部分
- 特に注意を促したい箇所
- 重要なキーワード及び単語
以上を意識することで、記事コンテンツを見ているユーザーは強調している箇所を基軸として、文章の前後をしっかりと読んでくれるようになります。
どうしても強調したい部分が複数ある場合は、1つの文章でstrongタグを複数使用するのではなく、箇条書きにしてリストにするか、表などを用いて視覚的に説明するほうがいいでしょう。
1ページ内で使い過ぎない
strongタグは1ページ内で使い過ぎないことも注意すべきです。strongタグで強調する箇所が多ければ多いほど、強調している部分の重要性が分かりにくくなったり、ディスプレイでの表示がネガティブな印象になったりしてしまうのが理由です。
strongタグには指定した箇所の重要性・緊急性を強調する意味があります。 strongタグには指定した箇所の重要性・緊急性を強調する意味があります。strongタグには指定した箇所の重要性・緊急性を強調する意味があります。strongタグには指定した箇所の重要性・緊急性を強調する意味があります。 strongタグには指定した箇所の重要性・緊急性を強調する意味があります。strongタグには指定した箇所の重要性・緊急性を強調する意味があります。
以上は同じ文章を繰り返したものですが、強調している箇所が目立ちすぎてよく分からなくなってしまっています。
内容によっては強調する箇所が多くなってしまうことも十分に考えられますが、多すぎると重要性が均されて読み飛ばされてしまう可能性があります。
強調したいキーワードや単語が複数ある場合は、前述したように箇条書きにしてリストアップするか、表にして重要な部分をまとめたほうが可読性も高まり、ユーザーにしっかりと見てもらえるようになるでしょう。
また、サンプルではCSSで文字列を赤くするように指定していますが、文字装飾の種類を増やすことでデザイン性を損ねず強調表現をすることもできます。
strongタグには指定した箇所の重要性・緊急性を強調する意味があります。
以上は一例ですが、下線や文字の背景色を変更することで、文字装飾の種類を視覚的に変更しています。
あくまでもサンプルですがブラウザでの視覚的な表現は様々なことで実現できますので、見やすい装飾表現方法をいくつか身につけておくといいでしょう。
注意点としては強調表現の際に見やすい色の組み合わせをすること、文字サイズの大小で強調をしないことが挙げられます。Webアクセシビリティを意識しながら、誰が見ても見やすいような文字装飾になるように工夫することが大切です。
見出しタグ内で使わない
strongタグは見出しタグ内で使うべきではないということにも注意しましょう。例えば見出しに含まれる単語やキーワードにstrongタグを使用して強調すべきではないということです。
特に見出しタグは階層構造や文書構造を明確に示す重要なタグであり、strongタグを含めてしまうと検索エンジンのクローラーが混乱する可能性があります。明確にSEO的にマイナス評価になるという明記はないものの、推奨されている使い方ではないということは覚えておくべきです。
また、CSSが設定されていない状態でも文字サイズが大きくなり、視覚的に強調表現がされるようになっています。
見出しを強調したい場合は、strongタグを使用するのではなく、CSSで文字のフォントサイズやフォントカラーを変更したほうがいいでしょう。
まとめ
今回はstrongタグに関する基礎知識、基本的な使い方や注意点について解説しました。
ポイントとしてはstrongタグ単体ではSEO的にポジティブな効果はないが、読みやすくするために適切に設定することで、ユーザーが最後まで読んでくれる可能性が高まることです。
また、strongタグの乱用はしないこと、強調する強調したい部分が多い場合においては、箇条書きや表を用いるなどして、重要な部分をまとめて表示すること、見やすく表現する工夫をすることをおすすめします。
詳しくはこちら
Keywordmapのカスタマーレビュー
ツールは使いやすく、コンサルタントのサポートが手厚い
良いポイント
初心者でも確実な成果につながります。サポートも充実！
良いポイント
機能が豊富で、ユーザーニーズ調査から競合分析まで使える
良いポイント