太字にはstrongだけでなくbタグも使おうと決めた話

  • 更新日:
  • 公開日:

12月中旬から開始したというズボラなアドベントカレンダー3回目の記事です。この際だから言ってしまいますがアドベントカレンダーをよく分かってません。こんなんで良いのでしょうか。よろしくお願いします。

<b>タグも使い始めた理由

タイトル通りの話ですが、今現在ブログ記事やWebサイトでの太字にはstrongだけでなくbタグも使用しております。使おうと決めたきっかけはWeb関係のブログで有名なLIGさんの記事でした。

bタグについて書かれた部分を抜粋します。

※HTML4.01では単に「太字」という意味でしたが、HTML5になって「セマンティック上の意味を持たない太字」という意味に変わりました。人間にとっては強調されるが、コンピュータにとっては強調されない、というニュアンスになります。

その使い方合っていますか?間違えやすいタグ15選(HTML5対応) | 株式会社LIG

どうやらHTML5になってから「(SEO的に)意味は持たないけど太字にするよ」といったタグに進化したようです。このブログはHTML5で書かれていますし、そんなワケでbタグを使い始めています。(上の記事を読むまで存在を忘れていたような気がしますが多分気のせいでしょう)

strongは検索エンジンに影響がある

実際に計測したり成果を出した経験は無いのですが、SEO関係の本に「1ページにつきstrongタグは1~2個が丁度良い」と書かれていたのを読んで以来この習わしに従ってきました。(SEOには疎いため本の知識に頼るしか無く…)

例えばこのブログではパンくずリストの現在地を示す箇所に1個記事内で1個(多くて2個)に抑えています。パンくずリストに使っている理由は、現在地を示す位置には自動的に記事タイトルが表示されるので、同じく自動的に記事タイトルに使われているキーワードを更に強調できるからです。(タイトルをちゃんと考える必要があるので扱いが難しい手法にはなりますが)

tag-strong-b01

こうした理由からstrongは乱用できません。けれども、太字って適度に使うと文章が見やすくなるんですよね。目で追いやすなり、特に流し読みしたい方に優しくなります。

そうなるとstrongで1~2箇所を太字にするだけじゃあ足りません。そこで出てくるのが代替案のbタグなんですね。

今までspanにクラス付けて太字にしていました

今まではspanにクラスを付けて太字にしていました。例えば以下のように。

.bold-text {
    font-weight: bold;
}

/*
使用例:
<p><span class="bold-text">太字にしたいよ</span></p>
*/

これでも問題はありません、ブログ上では。RSSリーダーではどうでしょうか。RSSリーダー内部にbold-textというクラスが無ければ太字にならないのではないでしょうか。

しかしこの問題もHTML標準装備のbタグなら無問題です。なんということでしょう。(Feedlyでは太字になっているのを確認しました)

以上の理由からbタグの使用をオススメします

クラスを使うよりも見やすくなりますし、テキスト数が減りますし、そうなると検索エンジンにも優しくなるでしょう(クラスを使用しない場合は1ページ毎に数バイト減るだけですが、塵が積もって山になってるインターネットですからね)。そんなわけでbタグ使うのをオススメします。

ただ、WordPressのエディタにはbタグのボタンがありません。なので自分はWordPressプラグイン『AddQuicktag』で追加して使っています。ブログ書くのが楽になりますし、その他使いたいタグがあればポンポン追加できるのでコレも同時にオススメしたいです。

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone