strongタグとは?使い方やSEO効果、bタグとの使い分けについて解説!

Web制作をする方やブロガー、ライターの方はstrongタグについてご存知の方も多いかと思います。しかし、このstrongを正しく使用できている方はどれほどいるでしょうか?htmlではタグを適切に使用することが重要になります。

ここでは、strongタグとは何か、使い方や使用時の注意点、SEO効果、bタグとの使い分けといった観点で解説していきます。

strongタグとは?

strongタグとは「ストロングタグ」と呼ばれ、強調を表すタグのことで「<strong>~</strong>」で囲った要素は重要であることを示します。

HTML5への移行の際に廃止されるかもしれないという話もありましたが、現在も使用されているタグになります。

strongタグの使い方

strongタグの使い方は、前述した通り「<strong>~</strong>」を記述してコンテンツを囲うようにします。実際に使用例を見てみましょう。

<p>これは<storong>ストロングタグの使用例</strong>です。</p>

CSSで何も制御していない場合は、上記のようにstrongタグで囲った要素は太字になって強調されます。

これはユーザーにとっても「この部分の内容は重要である」ことを視覚的に理解するのに役立ちます。また、クローラー(サイトの情報を読み解くロボット)に対しても重要であることを伝えることができます。

CSSで制御している場合の多くは、リセットCSSによることが多いです。リセットCSSというのは、ブラウザがもともと備えているCSSを打ち消すために使用するスタイルのことです。strongタグもこのリセットCSSの制御の対象になっている場合があるので、太字にならない場合は、検証ツールを使って、CSSが効いていないか見直してみましょう。

使用時の注意点

strongを使用する上で、何点か注意すべきことがあります。以下の注意点を意識して適切に使用することを心がけましょう。

入れ子ルール

タグには”そのタグを囲うことができるタグ”や”そのタグの中に含むことのできるタグ”が存在します。これを入れ子ルールと呼び、タグによって囲えるタグや含めるタグが異なります。

strongを囲えるタグは以下になります。

テキストレベルセマンティクス
a、em、small、s、cite、q、dfn、abbr、data、time、code、var、samp、kbd、sub、sup、i、b、u、mark、ruby、rb、rt、rtc、rp、bdi、bdo、span、br、wbr

編集
ins、del

埋め込み型コンテンツ
picture、img、iframe、embed、object、video、audio、map、area、math、svg

フォーム
label、input、button、select、datalist、textarea、keygen、output、progress、mater

スクリプティング
script、noscript、templete、canvas

テキスト

strongの中に追加できるタグは以下になります。

テキストレベルセマンティクス
a、em、strong、small、s、cite、q、dfn、abbr、data、time、code、var、samp、kbd、sub、sup、i、b、u、mark、ruby、bdi、bdo、span、br、wb

編集
ins、del

埋め込み型コンテンツ
picture、img、iframe、embed、object、 video、audio map、area、math、svg

フォーム
label、input、button、select、datalist、textarea、keygen、output、progress、meter

スクリプティング
script、noscript、template、canvas

テキスト

乱用は避ける

strongタグは要点を強調するタグであるため、そもそも要点がたくさんあることは不自然です。strongタグを使用する際は、本当に重要な箇所にのみ使用するように注意する必要があります。

「どこを重要な箇所として選定するか?」と考える際は、対象ページでもっとも言いたい事柄(または、それに関連する事柄)かどうかを意識しましょう。

見出しタグに使用してはいけない

見出しタグは通常のテキストとは異なり、文章の内容を示すものが”見出し”です。見出しという形で強調されている以上、strongタグで強調する必要はありません。

むしろ、2重で強調してしまうことになり、Googleはこのような強調の仕方に対してペナルティを科す場合があるので、見出しタグにstrongを使用することは控えるようにしましょう。

strongタグのSEO効果

strongタグはSEOの観点でも評価の対象に入ると言われています。strongタグの有無によって検索順位が大きく変わるということはありませんが、クローラーにそのページの要点を伝えられるのでぜひstrongタグを活用しましょう。

前述した通り、strongタグの乱用はペナルティの対象となる可能性があります。十分に注意しましょう。

strongタグと似たタグの使い分け

strongタグの他に似たタグがいくつか存在します。ここではそれぞれのタグとの違いやstrongタグとの使い分けについて解説していきます。

bタグ

bタグは囲われた要素を太字にする役割を持ち、見かけ上strongタグと相違ありません。strongタグは強調という意味で太字にしますが、bタグは単純に文字を太くします。

ユーザーへ示すのには変わらないものの、クローラーから見ると意味合いが異なる点に注意しましょう。

また、bタグは強調という意味を持たせずに装飾を行いたい場合などに用いるようにしましょう。bタグの代わりにCSSで代用することも可能です。

非推奨タグではありませんが、bタグを用いるよりもCSSで調整する方が望ましいとされています。

SEOの観点でいうと、Googleの公的な見解としては「strongタグもbタグも変わらない」とYouTubeで発表されています。

emタグ

emタグは囲われた要素を斜体にする役割を持ち、装飾の方法が異なります。強調という意味も持たないので、あくまでユーザーの注意を引きやすいように装飾するという意味合いで用いられることが多いです。

まとめ

ここまでstrongタグとは何か、使い方や注意点、似たタグとの使い分けについて解説してきました。これまでなんとなくstrongタグを使用していた方も多いのではないでしょうか。

strongタグには正確な”意味”があり、それに則って使用するのが一番です。これを機に、これからstrongタグを使用する際は「本当にここでstrongを使うべきか?」よく考えて使うようにしましょう。

また「どうすればいいのか分からない」「自分で作成するのは難しい」など、Webサイト制作でお悩みの方はお気軽にご相談ください。