SEO/SEM

htmlで文字をふと文字にする方法|bとstrongの違いを解説

htmlで文字をふと文字にする方法|bとstrongの違いを解説
WEBサイトにおいて、テキストを区別したり、読み手に重要な部分を伝えたりする際には、ふと文字装飾を行うのが一般的です。しかし、ふと文字にする方法がわからない、どのタグを使えばよいのか迷う、などの疑問を持つ方もいるでしょう。

そこで本記事では、「strongタグ」「bタグ」「CSSのfont-weightプロパティ」のそれぞれの使い方や役割の違い、SEOへの影響について解説します。
SEOに悩むサイト担当者必見!世界最高水準のテクニカルSEOツール「Lumar」
Lumar

URLを入れるだけでサイト内部の問題を一括検出。
Googleと同じ視点でサイトクロール
大規模サイトでも手軽に高度なSEO分析ができます!

まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出!

htmlで文字をふと文字にする3つの方法を解説

HTMLで文字をふと文字に装飾する方法は、3つあります。

  • strongタグ
  • bタグ
  • CSSのfont-weightプロパティ

どれもHTMLタグで文字を囲うことでふと文字にできます。

strongタグを使う方法

HTMLでふと文字に装飾する方法は、<strong></strong>を使ったものです。

実際に使用した場合、以下のような並びで記述することで、strongタグで囲った「良い天気」の部分が太字で表示されます。

例)今日は、良い天気ですね

 →今日は、<strong>良い天気</strong>ですね

bタグを使う方法

続いて、<b></b>を使用してふと文字にする方法です。

bタグで前後を囲った文字が太字で表示されます。

例)今日は、良い天気ですね

 →今日は、<b>良い天気</b>ですね

cssでfront-weightを指定する方法

最後に、CSSで文字の太さ(font-weight)を設定する方法についてです。

まずは、CSSのスタイルシート内にfont-weightプロパティを使ったコードを設定します。設定完了後に実際にふと文字装飾をする際は、文章内の一部分をグルーピングするspanと、指定したCSSの装飾を施すclassを使用したHTMLを記述してください。

以下を例にあげると、<span class=”thick”></span>で囲った「いい天気」の部分がふと文字で表示されるようになります。

例)

【CSSの記述】

.thick{

font-weight:bold;

}

【htmlの記述】

今日は、<span class=”thick”>良い天気</span>ですね

strongタグとbタグの違いとSEOへの影響

HTMLでマークアップする方法であるstrongタグとbタグは、それぞれのタグに与えられた意味合いが異なります。

strongタグは囲った部分を「重要性が高い部分」とGoogleに伝えるのに対し、bタグは囲った部分を「太字にする」という意味しかなく、単純に他のテキストと区別し読み手の注意を引くための装飾タグになります。2013年時点でGoogleはどちらを使用してもSEOに影響はないと回答しています。

とはいえ、キーワードに対して重要な意味を担う言葉を太字にする場合はstrongタグ、読み手に注目させたりテキストを区別したりする場合はbタグと覚えておきましょう。

引用元:MDN

参照:Google Webmasters YouTube(Is there a difference between the “strong” and “b” tags in terms of SEO?

htmlで文字をふと文字にする時の最善策はCSS

strongタグとbタグによるSEOへの影響に違いはありませんが、ふと文字にする際は、CSSのfont-weightプロパティを使ったHTMLタグが最善策となります。なぜなら、検索エンジン上ではHTMLは文章構造を記述するための言語、CSSは文字を装飾するための言語として扱われているからです。

Googleは、ふと文字を使用することはSEOに役立つと言及しているため、検索エンジン上でコンテンツの良し悪しの判断材料としている可能性があります。つまり、文字を装飾する言語であるCSSを使うことが、テキスト上の重要部分を読者に注目させながら検索エンジンにも理解させる最善の方法なのです。

参照:English Google SEO office-hours from November 12, 2021

まとめ

文字をふと文字に装飾する方法は3つありますが、そのなかでもHTMLを対象の文字の前後に設置するだけのstrongタグやbタグは簡単に使用できます。

しかし、検索エンジンに「重要性を伝えている」と自然に理解される最善の方法は、CSSのfont-weightを使ったものです。HTML使用前にCSSのスタイルシートを設定する必要があるため、面倒に感じる方もいるかもしれません。ふと文字装飾を行う際はCSSを使ったタグを使用し、SEOへの影響を考慮しましょう。

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

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

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

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

無料資料請求はこちら

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

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

メルマガ登録

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

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

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

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

SSL GMOグローバルサインのサイトシール