文書を記述する中で、特に強調したいテキストをマークアップするタグが強調タグです。
強調タグは<strong>と<em>があります。
一般的なブラウザで表示させると<strong>は太字に。<em>は斜体で表示されます。
また、CSSを変更することにより、<strong>や<em>の装飾を施す事も可能です。
コンテンツの中で特に強調したいテキストに対し<strong>や<em>をマークアップすることにより、閲覧しているユーザーに重要なポイントを視覚的にもわかりやすく伝える事ができますし、検索エンジンも重要なテキストを認識する1つの手段として利用すると考えられます。
今回は強調タグの使い方や注意点を解説していきたいと思います。
強調タグ(strong,em)
使い方
<strong>や<em>は、強調したい文字をマークアップするタグです。
例1:様々な鍋料理がありますが、私が一番好きなのは<strong>あんこう鍋</strong>です。
例2:匂いフェチの私にとって外せないのは<em>大阪市営地下鉄</em>の匂いです。
上記のように、強調したいテキストを指定しましょう。
<strong><em>と<b><i>の違い
通常、ブラウザでの表示は、<strong>と<b>はどちらも同じ太字。
<em>と<i>はどちらも同じ斜体となります。
ただし、<b>や<i>は文字を太らせたり、斜めにするだけの装飾用のタグです。
それに比べ、<strong>や<em>は文字を太らせたり、斜めにしながら、論理的に強調をマークアップするために使うタグとなります。
つまり、文字を太らせたいが意味合い的に強調する必要がない場合は<b>を。
強調する必要がある場合には<strong>を使うと良いでしょう。
<strong>と<em>の違い
- <strong>:強い強調(太字)
- <em>:強調(イタリック)
<strong>も<em>は強い強調と、強調という違いはあるのですが、検索エンジンはほぼ同じ物(もしくは全く同じもの)として扱っていると思われます。(そもそも、通常の強調と強い強調を人間が適切に使い分けるのもややこしいのに、検索エンジンが理解できるかどうかと考えるとそういう結論になりました。あくまでも私の個人的な見解です)
一般的なブラウザですと<strong>で囲った文字列は太り、<em>で囲った文字列は斜めになります。
(当ブログで現在使っているWordPressテンプレートのVicunaでは、strongとemはCSSで見た目を変えているため、strong=赤い太字 em=黒い太字となっています)
太字や斜体が気に入らない場合、CSSで調整することも可能
<strong>で文字が太ったり、<em>で文字が斜めに傾くのが嫌な場合は、CSSで装飾を施すと良いでしょう。
当ブログで使っているテンプレートのCSS
em {
font-weight: bold;
font-style: normal;
}strong {
color: #FF3200;
}
emはフォントでboldを指定し太らせ、スタイルをノーマルにして文字がまっすぐに変更されています。
strongはcoler:#FF3200で、赤色が指定されています。
strongを太らせない
strong {
font-weight: normal;
}
とすると、完全に見た目は通常の文字のみになり、検索エンジンにのみ強調を知らせる事も可能ですが、ユーザーに強調を知らせずに、検索エンジンにのみ知らせるというのも何か違うよなぁとは思いますのでお勧めはしません。
注意点
<strong>や<em>を使えば検索順位が上がるというわけではない
あくまでも、ページの内容で特に強調したいものに対してマークアップするのが正しい使い方です。
ページの内容に関係ないキーワードを強調するのは正しい使い方ではありませんし、それで検索ランキングが上昇することもありません。
そもそも、強調タグ自体、指定すれば明らかに検索ランキングの順位が上がるという魔法のようなタグではなく、ページの構造などをユーザーや検索エンジンに正しく伝えられているページで更に詳しく強調したい文章を指定するのに使う、隠し味のようなものです。
オールド・スクールなスパマーは、<strong>にキーワードを詰め込む人が多いので、スパマーかどうかを判断するシグナルに使われているかもしれません。
適切に使うことが大事なことです。
乱用に注意
強調したいテキストに対して使うタグですので、ページ全体を指定したり、1ページ内で10も20も、大量に指定されていると、1個1個の重み付けが減ってしまい意味がなくなってしまいます。
1ページに付き、2~3個までに留めて使うのがいいかと思います。
[…] (参考:強調タグ(strong,em)の解説と使い方と注意点) […]