
ボタンみたいにサクッと変える方法ないかな…?
こんな悩みを解決します。
本記事ではstrongタグとbタグに違いと、bタグボタンを追加する方法を解説しています、
目次
strongタグとbタグの違いとは?
strongタグ、bタグはどちらも文字を太く(強調)するタグです。
それでは一体なにが違うのか?
以下の二つの観点から違いを解説します。
- strongタグとbタグのSEOの違い
- 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?
【翻訳】
こんにちはマット。 SEOの観点から、テキストの特定の単語を強調するためのstrongタグとboldタグの違いは何ですか?ユーザーの視点から見ると、どちらのタグも同じ効果(単語を太字にする)があります。どちらのタグをどのような状況で使うべきなのでしょうか?
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?
※上記は動画内の発言を一部抜粋した回答になります。
当時(2006年)、チェックしたときはいつでもstrongとbはランキングやスコアリング、インデックスの付け方などの点で全く同じように扱われていました。
どちらを使ってもGoogleのランキングに違いはなかった。
要するに、気にする必要はないということです。私が知っている限りでは、Googleはstrongとboldを同じように扱い、emとiを同じように扱います。
簡単にまとめると、『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.
【翻訳】
strongタグは、その内容の強い重要性、深刻さ、または緊急性を表します。
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.
bタグは、文書の要約の中のキーワード、レビュー中の製品名、対話型テキスト駆動型ソフトウェアの実行語(?)、または記事の見出しなどのように、余分な重要性を伝えることなく、代替の音声や雰囲気を暗示することなく、実用的な目的のために注意が引かれているテキストの範囲を表しています。
(※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のカスタマイズ記事などもありますので、よろしければ参考にしてみてください。
-
-
【cocoon】ヘッダー下にアイキャッチ画像付き記事を表示する方法
続きを見る