Wordpressを使い始めた初心者の方が遭遇する、または、やりがちな問題のひとつとして、「Strongタグ」の連発があります。
実際に、私もこの問題に直面した経験があり、具体的な解決方法を探すのに苦労をしました。
（最終的には解決はカスタマイズCSSにて行いました）
・WORDPRESSでのサイト運営における「Strongタグ連発問題」とは何なのか、
・Strongタグを連発すると何が問題になるのか
・BタグとStrongタグの違い
・具体的な解決方法
以上について、詳しく説明します。
1.イントロダクション：テキスト強調がもたらす影響
1.1.WordPressでのテキスト強調の重要性
WordPressを使用したブログやウェブサイト制作では、コンテンツの読みやすさと魅力を高めるために、テキストの強調が欠かせません。
テキスト強調は、情報の階層を明確にし、読者の注意を重要なポイントに集中させる役割を果たします。
特に、情報過多のデジタル時代において、読者が求める情報を素早く理解しやすく提供することは、ウェブサイトのユーザーエクスペリエンスを大きく向上させます。
また、強調表示されたキーワードやフレーズは、検索エンジンにコンテンツの主要なテーマやポイントを伝える手段としても機能します。これにより、ユーザーが読みやすい記事の表現が可能になり、評価される記事を作ることが可能になります。
1.2.このガイドが目指すこと
本ガイドでは、WordPressにおけるテキスト強調の効果的な方法を、初心者から中級者までのユーザーが実践できるように詳細に解説します。
目標は、StrongタグとBタグの違い、Strongタグを連発することの弊害、また、この具体的な解決方法について説明します。
2.Strongタグの深掘り
2.1.Strongタグの定義と基本的な使い方
StrongタグはHTML（HyperText Markup Language）の一部として、テキストの一部分を強調して表示するために使用されます。このタグは、テキストを太字で表示することで視覚的な強調を与えると同時に、その部分が文書内で特に重要であることを示します。
具体的には、<strong>と</strong>タグで囲まれたテキストがブラウザによって太字で表示されます。たとえば、<strong>重要なポイント</strong>と記述すると、"重要なポイント"が太字で表示され、読者の注意を引きやすくなります。この使い方は、ウェブページ上でキーワードや特定のフレーズを際立たせたい場合に特に有効です。
2.2.Strongタグとbタグ：適切な使用シナリオ
Strongタグとbタグ（太字タグ）はどちらもテキストを太字で表示する点では似ていますが、使用目的において重要な違いがあります。<b>タグは純粋に視覚的な変更、つまりデザイン目的でテキストを太字にするために使用されます。これに対して<strong>タグは、テキストの一部を意味的に強調するために使用され、その部分が文書の中で特に重要であることを示すために役立ちます。
Strongタグの使用シナリオ:
読者に対して文書内の特定のポイントを強調したいとき。
SEOの観点から、検索エンジンに対して特定のキーワードやフレーズが重要であることを伝えたいとき。
bタグの使用シナリオ:
文書のスタイルやデザインの一部としてテキストを太字にしたいとき。
意味的な強調ではなく、純粋に視覚的な効果を目的とする場合。
重要なのは、<strong>タグの使用が、検索エンジンに対しても意味のある強調を示すことができるため、SEO戦略の観点からも重要であるという点です。
対照的に、<b>タグは視覚的なデザイン要素としてのみ機能し、検索エンジンの解釈には直接影響しません。したがって、コンテンツ作成時には、テキストを強調する目的に応じて適切なタグを選択することが重要です。
3.Strongタグの使用とSEOの関係
3.1.Strongタグを連発することの弊害と影響
Strongタグの使用は、ウェブページ上でのテキスト強調に役立つ一方で、その過度な使用はSEO（検索エンジン最適化）に悪影響を及ぼす可能性があります。テキストの重要な部分に対して適切に使用された場合、Strongタグは検索エンジンに対してそのテキストの重要性を伝え、結果としてページのランキング向上に貢献することがあります。しかし、不必要に多用されたStrongタグは、検索エンジンによるページの正確な評価を妨げる要因となり得ます。
連発されたStrongタグは、ページ内の特定のテキストが過度に強調されていると解釈され、その結果、検索エンジンがページの全体的な主題や重要なポイントを正しく理解するのを難しくします。これにより、ページのSEOパフォーマンスが低下し、検索結果における順位が不利に影響を受ける可能性があります。また、読者にとっても、過度に強調されたテキストは読みづらく、ユーザーエクスペリエンスを損なうことになりかねません。
3.2.Strongタグ使用時のベストプラクティス
Strongタグを効果的に使用し、SEOに好影響を与えるためのベストプラクティスには以下のようなものがあります。
適切な使用: Strongタグは、本当に強調する価値のあるキーワードやフレーズに対してのみ使用するようにしましょう。ページ全体のテキストの中で、特に重要なポイントや読者の注意を引くべき部分に限定して使用します。
節度ある使用: ページ内でのStrongタグの使用は節度を持って行い、過度に多用しないよう注意しましょう。ページのコンテンツ全体としてバランスが取れていることが重要です。
コンテンツの質を優先: Strongタグの使用よりも、まずは高品質で価値のあるコンテンツを提供することに集中しましょう。コンテンツが読者にとって有益であれば、自然と重要なポイントやキーワードが浮かび上がります。
検索エンジンとユーザーの両方を意識: Strongタグの使用は、検索エンジンだけでなく、実際にコンテンツを読むユーザーにとっても有益なものであるべきです。ユーザーエクスペリエンスを損なわないよう、適切なテキスト強調が行われるべきです。
Spanタグを使った具体的な解決方法
Spanタグを使ってクラスを定義し、そのクラスにCSSを適用することで、HTML文書内の特定のテキスト部分に繰り返しスタイルを適用することができます。これにより、コードの再利用性が向上し、スタイルの一貫性を保ちやすくなります。以下に具体的な手順を示します。
CSSで太字スタイルのクラスを定義する
まず、CSSにて太字にするためのスタイルをクラスとして定義します。このクラスは、font-weight プロパティを使用してテキストを太字にします。CSSは、外部スタイルシートやHTMLファイル内の<style>セクション、もしくは、WPの管理ツールの中でいえば、「カスタマイズCSS」に記述できます。
.bold-text {
font-weight: bold;
}
このCSSルールでは、.bold-text というクラス名で太字のスタイルを定義しています。font-weight: bold; によって、このクラスが適用されたテキストは太字で表示されます。
Spanタグにクラスを適用する
次に、HTML内で太字にしたいテキスト部分をタグで囲み、先ほど定義したクラスを適用します。これにより、Strongタグを使用せずにテキストを太字にすることができます。
<p>これは通常のテキストですが、<span class="bold-text">これは太字のテキストです</span>。</p>
この例では、"これは太字のテキストです" の部分がタグで囲まれ、class="bold-text" が指定されています。
これにより、指定されたテキスト部分だけが太字で表示され、残りのテキストは通常のフォントウェイトのままという挙動をします。
まとめ
この方法では、Strongタグを使わずに、CSSとSpanタグを組み合わせてテキストを太字にすることが可能です。このアプローチの利点は、スタイルの柔軟性が高まることにあります。CSSクラスを変更することで、サイト全体の太字テキストの表示を一括で調整することが可能になり、保守性が向上します。また、意味的な強調ではなく、視覚的な装飾のみを目的とする場合に適しています。
▼WORDPRESSのSANGOを用いて以下のサイトを運営開始。
数ヶ月でPV数的には月間7000程度を達成。
WORDPRESSやCSSでつまづくことが多かったので、体験をQiitaでは共有しています。