strongタグとは何かと聞かれ、はっきりと答えられるでしょうか。
Webサイトの制作に携わっている方や、コードを実際に書いている方であれば馴染みがあると思います。

しかし、これからWebサイトを作ろうとしている人にとっては、似たようなタグも多く使い分けが難しいと感じているかもしれません。

この記事では、

• strongタグと類似するタグとの違い
• strongタグの使い方
• strongタグを使用する際の注意

について解説しています。

strongタグを使いこなして、サイト作成に活かしましょう。

strongタグとは

strongタグとは、HTML上で強調を表すタグです。文字を太くすることで他の文章よりも目立たせる効果があります。適切に使用することで、重要な部分が一目でわかるメリハリのある記事を作成することができるでしょう。

また、strongタグを使用することで、GoogleやYahoo!などの検索エンジンに「重要性のあるもの」と伝えることができます。

以前のバージョンでは「単なる強調」を示すものでしたが、現在使用されているバージョンでは「重要なもの」として認知されています。

類似するタグとの違い

ここでは、strongタグと似た意味を持つタグについてそれぞれ詳しく解説していきます。

bタグ

bタグも、strongタグと同じく文字の協調をするタグです。

結論、エンジンへの働きかけはどちらのタグも変わりません。そのため、特に意識して使い分ける必要はないでしょう。この点については、Googleも公式で明言しています。

※リンク

本来bタグは「あくまでもユーザーの注意を引くことを目的に使用するタグ」として、strongタグとの使い分けがされていました。

しかし、今日では先述の通り2つのタグを使い分ける意味はありません。そのため、この2つのタグは検索エンジンへの働きかけの有無に違いはあれど、基本的にはあまり差がないと考えてしまって大丈夫です。

emタグ

emタグは、テキストを斜字で強調するものです。

strongタグと同じく、そのテキストの重要な部分を強調する意味をもちます。後述するiタグも斜字にするものですが、効果が異なるので注意してください。

iタグ

iタグは、強調したいテキストをイタリック体にします。emタグとの違いは、検索エンジンへの働きかけです。

emタグはテキストの重要性を意味するものとして検索エンジンに認識される効果を持ちます。iタグにはその効果がありません。

markタグ

markタグはテキストをハイライトし、ユーザーが見やすいように目立たせるものです。

指定した範囲は黄色でハイライトされます。重要度についての役割はありませんが、テキスト部分の惹きつけやサイトのデザインを整える効果があるでしょう。

CSSで太字にする

CSSを使用して太字にする方法もあります。

しかし、CSSによる太字は単なる装飾にとどまり、検索エンジンへの働きかけがありません。

あくまでデザインとして文字を太くしたい場合は、CSSを使用した方がより細かい調整がしやすいでしょう。設定には、font-weightプロパティにて指定します。

strongタグの使い方

ここでは、strongタグの使い方について詳しく解説します。

記述の仕方

strongタグの記述方法はシンプルです。強調したい部分を<strong></strong>で囲みます。

例えば、「strongタグを使用することで、検索エンジンに重要なキーワードを伝えることができます。」という文章の『重要なキーワード』を強調したい場合は以下のようになります。

strongタグを使用することで、検索エンジンに<strong>重要なキーワード</strong>を伝えることができます。

さらに、以下のようにstrongタグ内にさらにstrongタグを入れることで、より重要度が高いと伝えることが可能です。

strongタグを使用することで、検索エンジンに<strong><strong>重要なキーワード</strong></strong>を伝えることができます。

strongタグが有効な場面

strongタグが有効な場面は「ページ全体の中で相対的に重要な部分」を強調したいときです。

これは、流し読みするユーザーが重要なキーワードを把握しやすくするために設定します。

例えば、まとめの文章が非常に重要である場合、その部分をstrongタグで囲めば結論が一目で分かるようになります。

また、文章の一部に重要性を加えたい時にも使用すると良いでしょう。

例えば「CSSを使用することで文字の色を変えるだけでなく、文字の大きさを変えることもできます。」という文章で『文字の色を変える』や『文字の大きさを変える』の部分に重要性を持たせたいとします。

その場合、以下のように記述します。

CSSを使用することで<strong>文字の色を変える</strong>だけでなく、<strong>文字の大きさを変える</strong>こともできます。

strongタグを使用する際の注意

使い勝手の良いstrongタグですが、使用する際には注意点があります。

ここでは、strongタグについての注意点を3つ解説します。

strongタグを必要以上に使わない

strongタグを多用しすぎると、逆に読みづらくなってしまいます。どこが大切なのか分からなくなってしまうほどに使用するのは避けましょう。

strongタグを使用する目安は、記事内で1～3個程度が目安です。

また、strongタグを多用すると検索エンジンにとっても重要なポイントが分からなくなり、SEO評価が下がってしまう可能性もあります。

strongタグはあくまで「この部分が重要な箇所」と認識するだけです。strongタグをたくさん使っても、他のWebサイトより評価が高くなるわけではありません。

strongタグは過剰に使用しないようにしましょう。

strongタグを見出しに入れない

h1やh2などの見出しには、strongタグは使用しないようにしましょう。

見出しはそれだけで文章を強調させる役割があります。そのため、見出しでstrongタグを使用すると二重強調になってしまいます。場合によってはWebサイトの表示順位が下がるなど、ペナルティの対象となる可能性があるので注意してください。

strongタグは本文にのみ使用するようにしましょう。

書式ミスに注意する

strongタグを適切な位置に使用しても、書式が間違っていたら意味がありません。

スペルミスや囲み忘れなどがあると、サイト上に反映されないので注意してください。一文字でも違っていると機能しません。

また、CSSではより上位に記述されているものが優先されるというルールがあります。後からの修正だと、HTML側とCSS側の両方を調べないといけなくなります。

まとめ

strongタグを適切に使用することで、ユーザーからも検索エンジンからも見やすい、分かりやすいコンテンツになります。
一方で不適切な使い方をしてしまうと、ユーザーが離脱してしまうだけではなくGoogleからペナルティを受けてしまう可能性があるので注意してください。

ただし、strongタグはGoogleのためではなく、あくまでユーザーの理解を促すために使用するものです。

strongタグを正しく使用して「何を伝えたいのか」を明確にし、良質なコンテンツが提供できるWebサイトを制作しましょう。