SEO

HTMLのstrongタグとは?bタグとの違いや使い方・注意点を解説

HTMLのstrongタグとは?bタグとの違いや使い方・注意点を解説

Webサイトを見ていると、読みやすい記事と読みづらい記事にはっきりと差があることに気づきます。

読みやすい記事の特徴は、本文の中で何を一番伝えたいのかが明確になっているということです。

この記事では、伝えたい文言が読者の目につくように、指定した文字を強調する働きのある「strongタグ」を紹介します。

複雑なことはありませんが、使用するのとしないのでは、コンテンツの質を大きく左右するものとなりますので、ぜひマスターしてサイト制作に活かしてみてください。

Webサイトを見ていると、読みやすい記事と読みづらい記事にはっきりと差があることに気づきます。

読みやすい記事の特徴は、本文の中で何を一番伝えたいのかが明確になっているということです。

この記事では、伝えたい文言が読者の目につくように、指定した文字を強調する働きのある「strongタグ」を紹介します。

複雑なことはありませんが、使用するのとしないのでは、コンテンツの質を大きく左右するものとなりますので、ぜひマスターしてサイト制作に活かしてみてください。

strongタグとは?

👉 このパートをまとめると!
strongタグは、テキストの重要性をユーザーと検索エンジンに伝えるHTML要素です。

strongタグは、指定したテキストの内容が重要である旨を、ユーザーに対してや、GoogleやYahoo等の検索エンジンに対して明示するために使用します。

一昔前のホームページ作成言語であるHTML4.01では「より強い強調」という定義でしたが、最新のHTML5では「重要性のあるもの」という定義付けに変わりました。

strongタグを適切に使用することで、読者にとって読みやすい(ユーザビリティが高い)記事を制作することができます。

【例:strongタグがある場合】

大晦日のテレビ番組で最も歴史があるのは紅白歌合戦です。

【例:strongタグがない場合】

大晦日のテレビ番組で最も歴史があるのは紅白歌合戦です。

上記のように、特定のキーワードだけを目立たせることで、ユーザーは記事を流し読みしながらでも要点を掴めるようになります。

検索エンジンに対しても「強調したいキーワード」を伝えることができますが、SEO対策としての直接的な効果は明言されていません。

strongタグはSEO対策というよりも、ユーザーにとって閲覧しやすいページを作るために用いられることを覚えておきましょう。

strongタグとbタグの違い

👉 このパートをまとめると!
bタグは見た目だけの太字、strongタグは重要性を伝える点が違います。

strongタグとbタグは、強調したい文字を太字にして表示させるという点では共通しています。

この二つの決定的な違いは、以下の通りです。

  • strongタグ:その語句が内容として重要であるという「意味づけ」を持つ
  • bタグ:意味づけを持たず、見た目を太字にして注意を引かせるだけ

strongタグは、強調した単語がそのページ内で重要であるという意味を、ユーザーにもプログラム(ブラウザ・支援技術・検索エンジン)にも示せます。

一方、bタグは、画面上は太字で強調できても「重要である」という意味そのものは持ちません。

ただし、SEOの観点からは、strongタグもbタグも同様に扱われるという旨のことをGoogleが明言しています。

Back then,whenever we checked,strong and b were treated the exact same in terms of ranking and scoring(strongタグとbタグはランキングとスコアリングでは同じ扱い)and how they’re indexed and all that sort of stuff.

(参考:動画0:46より)

So the short answer is don’t worry about it.

As far as I know,Google will treat the strong and the bold the same(Googleではstrongタグとbタグは同等に扱うつもり)and the em and the italics the same.

(参考:動画1:31より)

引用:Is there a difference between the “strong” and “b” tags in terms of SEO?(Google Search Central公式チャンネル)

なお、strongタグとSEOの関係を扱う情報は、出典の確度で3層に分けて読む必要があります。(a)HTML Living StandardやMDN Web Docsなどの仕様・公式ドキュメント、(b)Google公式チャンネルや公式ブログでの担当者の発言、(c)オフィスアワーやSNSでの個人的な発言、の3層です。上記の引用は(b)にあたり、GoogleのMatt Cutts氏が2013年に公開された公式チャンネル動画での発言です。年数が経過しているため、実装の判断は(a)を軸に行い、(b)(c)は補足として扱ってください。

strongタグとbタグは、検索エンジンへの働きかけの有無に違いはありますが、基本的にほとんど差はないとお考えください。

emタグ・iタグ・CSS(font-weight)との使い分け

太字にできる方法はstrongタグとbタグだけではありません。CSSのfont-weightを含めた3つは、見た目が似ていても意味づけが異なります。

指定方法 意味づけ 主な用途
strongタグ 内容の重要性・重大性・緊急性が高いことを示す 警告文や結論など、意味として重要な箇所
bタグ 重要という意味は持たず、注意を引かせるだけ 商品名・固有名詞など、目印として太字にしたい箇所
CSSのfont-weight 意味づけを持たない、見た目だけの太字 デザイン上の理由で太さを調整したい箇所

MDN Web Docsは、単に装飾のために太字にしたい場合はCSSのfont-weightを使うべきだと明記しています(出典:HTML <strong> 強い重要性要素 – MDN Web Docs)。見た目が欲しいだけならCSS、内容が重要だと伝えたいならstrongタグ、と目的で選び分けてください。

斜体で強調するemタグ・iタグとの使い分けは、emタグとは?strong・b・iタグとの違い・SEO効果を解説で4タグの早見表とあわせて解説しています。

strongタグは廃止・非推奨なのか?

👉 このパートをまとめると!
strongタグは廃止も非推奨もされておらず、現行仕様で有効な要素です。

結論として、strongタグは廃止も非推奨もされていません。現在のHTMLの仕様であるHTML Living Standard(WHATWG)に「内容の強い重要性・重大性・緊急性を表す」要素として定義されており、廃止(obsolete)や非推奨(deprecated)の注記は付いていません(出典:HTML Living Standard – The strong element)。MDN Web Docsでも現行の要素として解説されています。

それでも「廃止されたのでは」と疑われる理由は、主に2つあります。

1つ目は、定義が途中で変わったことです。HTML 4.01の「より強い強調」からHTML5以降の「重要性」へ意味づけが変わり、公開時期の異なる解説記事で説明が食い違うため、タグ自体が無くなったと受け取られやすくなっています。

2つ目は、装飾目的での使用が推奨されていないことです。見た目だけが目的ならCSSで指定するのが仕様上の考え方であり、この指針が「タグ自体が非推奨」と混同されているケースが見られます。

また、実際に廃止されたfontタグ・bigタグと混同されることもありますが、strongタグは意味づけを持つ要素として現在も有効です。

strongタグの使い方

👉 このパートをまとめると!
強調したい語句をstrongタグの開始タグと終了タグで挟むだけで使えます。

strongタグで記事の一部を強調したい場合には、HTML上で以下のように記載します。

<strong>○○</strong>

もし、「大晦日のテレビ番組で最も歴史があるのは紅白歌合戦です。」のうち、「紅白歌合戦」を強調する場合には、以下のような使い方となります。

大晦日のテレビ番組で最も歴史があるのは<strong>紅白歌合戦</strong>です。

上記のように、HTML上では強調したい単語をstrongタグとstrongタグで挟むのみです。

ただし、よくある人為的なミスとして、締めの/(スラッシュ)を忘れたり、strongのスペルを間違えたり、<>(記号の一方)を誤って消してしまったりなどには注意しましょう。

ちなみに、以下の例のように、strongタグを2重に使用することで内容の重要度を高めることも可能です。

チケットの有効期限は<strong><strong>2027年12月31日</strong></strong>となります。その期限をすぎると一切使えなくなるため注意が必要です。

strongタグのSEOの観点での注意点

👉 このパートをまとめると!
多用しない・見出しタグ内に入れないの2点が主な注意点です。

strongタグの使い方で注意すべきポイントは、以下の2点です。

【注意点】

  • strongタグを必要以上に使わない
  • strongタグを見出しタグ内に入れない

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

strongタグの多用は、ブログやサイト初心者に多い傾向があります。

strongタグを使いすぎてはいけない理由としては、ユーザーが読みづらくなったり、どの情報が大切なのかわからなくなったりしてしまうためです。

【strongタグを使いすぎた場合の例】

大晦日のテレビ番組で最も歴史があるのは紅白歌合戦です。

上記のように、1フレーズ内にstrongタグを使いすぎるとどの部分が重要なのかが伝わらず、ユーザビリティも低くなってしまいます。

strongタグを使用する目安としては、1記事内に1個~3個程度がおすすめです。

さらに、文章の中で結論にあたる単語や状況を表すフレーズに限定して使用すると、格段に見やすくなります。

もし、文中で単語の意味を強調したいわけではなく、単に商品名や固有名詞を記載する際に太字にしたいのであれば、strongタグではなくbタグを使用するようにしましょう。

ちなみに、WordPressのエディターにある「B」(太字)ボタンは、bタグではなくstrongタグにあたります。WordPressでbタグを使いたい場合は、ブロックエディターの「HTMLとして編集」またはカスタムHTMLブロックで直接記述してください。

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

h1やh2などの見出しタグでは、既に文字が強調された状態です。見出しタグ内にstrongタグを入れても仕様上のエラーにはなりませんが、見出し全体が重要な語句であるため、その一部をさらに強調しても伝わる情報は増えず、かえってどこが要点なのかがぼやけてしまいます。

見出しタグにstrongタグを用いるメリットは何もないので、わざわざリスクを冒してまで使用する人はいないと思いますが、念のため注意するようにしてください。

SEO Dash! byGMOの資料を無料ダウンロード

SEO Dash! byGMOの資料を無料ダウンロード

強調タグの使い方は1ページなら手作業で直せますが、サイト全体で一貫させ、他のSEO課題と合わせて優先順位を付けるとなると負担が大きくなります。SEO Dash! byGMOは、課題整理から施策の優先順位づけまでを支援するSEOツール・コンサルティングサービスです。まずは資料をご覧ください。

strongタグに関するよくある質問(FAQ)

👉 このパートをまとめると!
廃止の有無・使用個数・文字色・SEO効果の4つの疑問に回答します。

strongタグについて検索されることの多い疑問に、まとめて回答します。

<strong> と </strong> の書き方は?

開始タグは<strong>、終了タグは</strong>と書きます。スラッシュはタグ名の前(<の直後)に置くのが正しい書き方で、<strong/>のように末尾へ付けるのは誤りです。開始タグ・終了タグはどちらも省略できません。

<strong>強調したい語句</strong>

strongタグは1ページに何個まで使ってよい?

仕様上の個数の上限はありません。ただし多用すると重要な箇所が埋もれるため、目安は1記事内に1個~3個程度です。強調したい項目が多い場合は、箇条書きや表に整理するほうが読みやすくなります。

strongタグで文字色は変えられる?

strongタグ自体に文字色を変える機能はありません。色や太さの調整はCSSのcolorやfont-weightで指定します。意味づけを伴わずに一部の文字だけを装飾したい場合は、spanタグとは?html上での意味や役割・使い方を解説で解説しているspanタグとCSSの組み合わせが適しています。

strongタグを使うとSEO順位は上がる?

strongタグを使うだけで検索順位が上がるという公式見解は示されていません。Googleは公式チャンネルの動画でstrongタグとbタグを同等に扱うと述べており、タグの使い分けで評価が変わるとは説明されていません。期待できるのは、重要な箇所が伝わって読みやすさが上がり、間接的に評価につながる範囲です。なお、strong要素には暗黙のARIAロール「strong」が割り当てられます。ただしJAWS・NVDA・VoiceOverなど主要なスクリーンリーダーは、既定では強調の意味を読み上げません(ユーザー側の設定で有効化は可能です)。重要性を確実に伝えたい場合は、タグではなく文章そのもので示してください。

まとめ

👉 このパートをまとめると!
strongタグを正しく使えば、読みやすく伝わりやすい記事になります。

当記事では、strongタグがコンテンツ内で強調したい単語や文章を、ユーザーや検索エンジンに対して伝える役割があることを説明しました。

ユーザーに「何を伝えたいのか」を明確にすることは、良質なコンテンツを作るうえで欠かせないポイントです。

その意味で、strongタグはコンテンツ作りにおいて非常に使い勝手のいいテクニックの一つと言えます。

もちろん、必要以上に使いすぎたり記述を間違えたりすれば、逆効果にもなりかねません。

strongタグの正しい使い方をマスターして、ユーザビリティの高いコンテンツ作りに活かしていきましょう。

Lumarの資料を無料ダウンロード

Lumarでサイト全体のHTML実装をまとめて診断

見出し構造やインデックス状況を含む技術的な問題は、サイト全体をクロールしないと見つかりません。Lumarは、HTML・技術的SEOの課題を洗い出すクローリング診断ツールです。

SEO対策でビジネスを加速させる
seo-dash!bygmo

SEO対策でこんな思い込みしていませんか?

  • 大きいキーワードボリュームが取れないと売上が上がらない・・
  • コンサルに頼んでもなかなか改善しない
  • SEOはコンテンツさえ良ければ上がる

大事なのは自社にあったビジネス設計です。
御社の課題解決に直結するSEO施策をご提案します

無料資料請求はこちら

プロフィール
大澤 健人(おおさわ けんと)
GMO TECH株式会社 大澤 健人(おおさわ けんと) 大澤 健人(おおさわ けんと)のウェブサイト 大澤 健人(おおさわ けんと)のFacebook 大澤 健人(おおさわ けんと)のTwitter
2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。
CONTACT US

デジタルマーケティングに関することならお気軽にご相談ください

メルマガ登録

メールマガジンはこちらからご登録ください。

デジタルマーケティングに関するホットな情報をお届けいたします。

フォームからのお問い合わせ

GMO TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。