【ワードプレスでbタグを追加する方法】strongタグとbタグの違いとは

strongタグはあまり使わず、bタグを使った方がイイと聞くけど、毎回コード書くのは手間がかかる…。
ボタンみたいにサクッと変える方法ないかな…？

こんな悩みを解決します。

本記事ではstrongタグとbタグに違いと、bタグボタンを追加する方法を解説しています、

strongタグとbタグの違いとは？

strongタグ、bタグはどちらも文字を太く（強調）するタグです。

それでは一体なにが違うのか？

以下の二つの観点から違いを解説します。

それぞれの違いを、公式で発表されている意見を基に解説していきます。

strongタグとbタグのSEOの違い

strongタグとbタグの違いを質問に、元Google社員マット・カッツ氏が回答しています。

タグについては以下のように質問されています。

Hi Matt, In terms of SEO, what is the difference between strong tag and bold tag for emphasis on certain words of text. From the user perspective, both tags have the same effect (words in bold). Which tag should we use, in which circumstances?

引用：Is there a difference between the "strong" and "b" tags in terms of SEO?

Google Webmasterからの回答は以下のとおりです。

（※回答しているのは元Google社員マット・カッツ氏）

Back then, whenever we checked, strong and b were treated the exact same in terms of ranking and scoring and how they're indexed and all that sort of stuff...
And you could use either one, and and it wouldn't make a difference in terms of Google ranking...
So the short answer is, don't worry about it. As far as I know, Google will treat the strong and bold the same and the em and the italic the same.

参照：Is there a difference between the "strong" and "b" tags in terms of SEO?

※上記は動画内の発言を一部抜粋した回答になります。

簡単にまとめると、『strongタグもbタグもSEOの観点からは同じように扱うので、悩む必要はないです』と言われています。

なので、絶対strongタグは使うべきではないということでもなさそうです。（※あくまでも筆者の見解です。）

strongタグとbタグの意味の違い

Webに関わる技術の標準技術の開発と普及を目的とする非営利団体、W3C（World Wide Web Consortium）では、以下のように公表されています。

strongタグ

The strong element represents strong importance, seriousness, or urgency for its contents.

引用：The strong element

bタグ

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

引用：The b element

（※actionable words in interactive text-driven softwareの略を対話型テキスト駆動型ソフトウェアの実行語としていますが、筆者がなんなのかよくわかっていません。わかる方教えて頂けたら光栄です。）

これらのことから、内部的に重要性を示すときはstrongタグ、大きな意味も特になくただ注意を引きたいときはbタグと使い分けるので良いかと思います。

ただ、SEOの観点では使い分けも必要ないと言われていることから、使い分けにそこまで気にすることもないかと思います。

ですが、やはり念のためにbタグを使いたいという方もいるかと思います。

そんな方向けに太字ボタン（bタグ）を追加する方法を解説します。

投稿画面に太字ボタン（strongタグ）しかない方は追加してみましょう（※ワードプレスの新エディタ「Gutenberg」ならばbタグは搭載されているかと思います）。

ちなみに、文字色やアンダーライン色などの様々なボタンも作れます。

bタグ（太字タグ）の追加方法【画像あり】

AddQuicktagというプラグインを利用した追加方法です。

プラグイン「AddQuicktag」の導入

まず、ワードプレスにログインします。

「プラグイン」にカーソルをあわせ、「新規追加」をクリックします。

右上の検索窓に「AddQuicktag」と入力するとプラグインが表示されるので、「インストール」をクリックします。

インストールから有効に切り替わるので、「有効」をクリックします。

設定にカーソルを合わせ、「AddQuicktag」をクリックします。

画像の①～④の流れを解説します。

①ボタンの名前を入力します（ここでは太字としています）。

②太字（bタグ）のHTMLコードは<span class="bold">〇</span>ですので、開始タグに<span class="bold">、終了タグに</span>と入力します。

③一番右のチェックボタンにチェックをいれ、すべてにチェックがつきます。

④「変更を保存」をクリックします。

これでボタンの完成です。

bタグボタンの使い方

投稿画面のクイックボタンのところに、Quicktagsボタンが追加されてます。

太字にしたいところを選択し、Quicktagsボタンの太字を選びます。

すると、以下のように選択したところが太字になっています。

AddQuicktagを使えば他にも自分が反映させたいコードを上記のように設定することで、簡単にボタンができあがるので、文中のカスタマイズも簡単にできるようになります。

まとめ：strongタグとbタグの違いとbタグ追加方法

strongタグとbタグの違いについては以下の通りです。

元Google社員のマット・カッツ氏が以下のように述べています。

『strongタグもbタグもSEOの観点からは同じように扱うので、悩む必要はない。』

一方、HTMLの意味としては以下のようにとらえられています。

『重要性を示すときはstrongタグ、大きな意味も特になくただ注意を引きたいときはbタグ』

結論、SEO的にはあまり気にしなくても平気そうですが、念のためにbタグを使うようにするのがありかと思います。

もしbタグを反映するボタンがなければ、AddQuicktagを使って追加しましょう。

以上がワードプレスでbタグを追加する方法についての記事でした。

最後まで読んでいただきありがとうございました。

なにか気になることがありましたらお気軽にお問い合わせください。

他にcocoonのカスタマイズ記事などもありますので、よろしければ参考にしてみてください。