HTMLを活用して太字にするには?strongタグとbタグとSEO効果を解説

HTMLを活用して太文字にするには

HTMLを活用して文字を太くする際には、strongタグやbタグを使用します。

重要な内容を強調したい場合、strongタグを使います。bタグは、読者の注意を惹きたいテキストを太くして表示するためのHTMLタグです。bタグは、以前は「太字要素」という名前でも呼ばれていました。これらのstrongタグやbタグを使ってHTMLコーディングで文字を太くすれば、SEOにも役に立ちます。

文字の読みやすさはユーザビリティにつながり、強調したい部分はロボットも認識してクローラビリティに役たちます。

SEOコンサルタント本記事では、HTMLを使って文字を太くする方法・注意点などを、初心者の人でも理解しやすいように解説します。

 

HTMLで文字を太くするタグとは?

HTMLとは「ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language)」の略で、WEBページを作成するために必要な言語のことを指します。このHTMLとCSS(カスケーディング・スタイル・シートCascading Style Sheet)でWEBサイトはコーディングします。CSSは、レイアウトデザインなどを定義するスタイルシートです。

ここでは、HTMLを活用して文字を太くするタグについて解説します。

 

strongタグについて

Strongタグは、重要性の高い内容のテキストを示す際に活用するHTMLタグのことを指します。

例えば、「転職 20代」というキーワードで記事を作成する場合、「20代はポテンシャルを買われることが多いため、転職活動を有利に進められます」といった文章で、”ポテンシャルを買われる”部分に重要性があれば、ここをstrongタグで囲います。

<strong> 〜 </strong>で文字を太くしたい文章を囲むことです。

strongタグ:<p>「20代は<strong> ポテンシャルを買われる</strong>ことが多いため、転職活動を有利に進められます。」</p>

 

bタグについて

bタグは、読者の目線を惹きつけたい箇所の文字を太くするためのタグです。

例えば、記事内で紹介している商品の名称やサービスの名称などは、bタグで目立たせると見やすくなります。商品名は重要性を持っているわけではないものの、読者の目線を惹きつけたいため、strongタグよりもbタグのほうが適していると言えます。
具体的な方法は、文字を太くしたい文章を<b> 〜 </b>で囲むことです。

bタグ:<b>強調したいテキスト</b>

HTMLを活用して文字を太くするSEO効果

HTMLマークアップで文字を太くすれば、読者が文章の内容を把握しやすくなり、滞在率やアクセス数が向上すると考えられます。結果として、ユーザーの疑問を解消できる記事として人気が高まり、SEOにも効果的だと言えます。

WEBサイトのSEO(検索エンジン最適化)の効果を高められれば、検索結果の上位に表示されやすくなるため、アクセス数の向上や売り上げアップなどの嬉しい効果が期待できます。そのため、重要な箇所や強調したい箇所などは積極的にHTMLを活用して文字を太くしていきましょう。

ただし、HTMLを活用して文字を太くして評価を受けるのは相対的なものであるため、すべての文章を文字を太くしても効果は得られないため注意が必要です。あくまでも、文章のなかで重要な部分や強調したい部分のみ文字を太くしてください。

 

HTMLマークアップで太字にするstrongタグとbタグの違い

HTMLのstrongタグとbタグは、どちらも文字を太くする効果があり、ユーザーからの見え方は全く同じです。そのため、両者の意味を混同する人もいますが、使い分けるべきです。

Strongタグは重要性や緊急性が高い部分を強調する意味を持つのに対し、bタグはユーザーの目を惹きつけたい箇所を強調する意味を持ちます。

  • strongタグ:ロボットに対して記事内にある特定のキーワードの重要性を伝えることができる
  • bタグ:ロボットに対してはキーワードの重要性を伝えることができない

同じ太字でも、重要性や緊急性があるのか単にユーザーの目を惹きつけたいのか考えたうえで、適切なタグを利用することをおすすめします。すると、ユーザーにとって読みやすく分かりやすい文章になるだけでなく、SEOの効果も期待できます。

おすすめ動画:Is there a difference between the “strong” and “b” tags in terms of SEO?

こちらの動画ではstrongタグとbタグの関係についてSEOの観点から述べています。

Googleはstrong タグとbタグは同じように扱っていると言及していますので、strongタグとbタグは、ロボットへの働きかけに違いはありますが、結果としては同じように扱われているので細かい心配はなさそうです。

 

他の文字を太くするタグ

文字を太くするタグは、strongタグとbタグ以外にもemタグ、markタグ、iタグなどがあります。emタグはテキストを強調する、markタグは文字に特有の関連性を持たせるという意味を持ちます。

  • emタグ・・・協調タグ。テキストがイタリック体で表示される。
  • markタグ・・・文書内の該当テキストをハイライトして目立たせる。
  • iタグ・・・フォント(文字)をイタリック体にするためのタグ。

CSSの使い方

CSSは、デザインを目的として文字を太くしたいときに活用します。ユーザーの気を引いたり重要性を示したりするわけでなく、単にデザインを目的として文字を太くしたい場合です。

CSSの「font-weightプロパティ」を使えば、文字を太くデザインにできます。このように、単にデザイン面で文字を太くしたい場合、CSSを使います。

<style type="text/css">
    .fw1 {font-weight: normal;}
    .fw2 {font-weight: bold;}
    .fw3 {font-weight: 100;}
    .fw4 {font-weight: 200;}
</style>

数値を100から900までの9段階で数値を大きくすればするほど太くなります。400がnormalで700がboldに対応します。

HTMLマークアップで太字にするときに気を付けること

この項では、HTMLを活用して文字を太くするときに気を付けることを紹介します。

  1. タグそのものの目的を無視してタグで囲む
  2. 書式ミスをする

タグそのものの目的を無視してタグで囲む

HTMLを活用して太字を太くする際には、タグそのものの目的を踏まえてタグで囲んでください。例えば、重要性の高いテキストに対してstrongタグではなくbタグを使ってしまうと、タグそのものの目的が無視されてしまいます。

太字装飾をする場合は、タグそのものの目的をしっかりと理解した上で、適切なタグを使うようにしましょう。

書式ミスをする

書式ミスをしてしまうと、タグが効かなくなることがあります。例えば、「<b>転職活動</b>」と打ったとしても、書式ミスがあれば文字が強調されなくなるのです。

具体的には、CSSのセレクタ指定を間違える、CSSのプロパティやプロパティ値に全角文字を入れる、といったことをしてしまうと、書式ミスとなります。

書式ミスをしてしまうとせっかくの太字が表示されずもったいないため、書式ミスのないよう厳重に注意してください。

 

まとめ

SEOコンサルタントHTMLを活用して文字を太くするには、strongタグ、bタグ、emタグなどの方法があります。どれも太字で表示されるため見た目は同じですが、意味合いが異なるため使い分ける必要があります。Strongタグは重要性の高い箇所に使い、bタグは重要性は低いもののユーザーの目を惹きたいときに使い、emタグは太字かつイタリック体の文字を使いたいときに使用します。HTMLマークアップで文字を太くすることはユーザビリティとクローラビリティの両面からSEOに効果的ですので、是非取り入れてください。

 

 

この記事の監修者

SEOコンサルタント

アドマノ株式会社 代表取締役 天野 剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析(Googleアナリティクス個人認定資格GAIQ保持)コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。

新着記事

人気記事

海外SEOメディア記事

おすすめ記事

SEO初心者向け記事

SEO上級者向け記事

SEOライティング記事

SEO外部リンク記事

  • 03-5394-8107
  • お問い合わせ・ご相談はこちら