SEO対策の東京SEOメーカー

emタグとは?基本的な使い方と他の強調タグとの違いやSEO効果を解説

emタグとは?  emタグとは、特定の文章を強調したいときに使うHTMLタグのことです。HTML内にemタグを設定すると、文字を斜体に表示できます。ユーザーに伝えたい文章を強調できるので、コンテンツを作成するときに積極的に使用するケースも少なくありません。

しかし、emタグ以外にもstrongタグやbタグなど文書を強調できるHTMLタグは多くあります。それぞれの違いを正しく理解して状況に応じて使い分けることが大切です。

SEOコンサルタントそこで今回は、emタグの概要や基本的な使い方、SEOの効果について解説します。ほかの強調タグとの違いも解説しますので、コンテンツを作成する際の参考にしてください。

 

SEOコンサルティング

emタグとは

emタグは、特定の文章を強調させたい際に使用するHTMLタグのことです。HTML内にemタグを設定することで、特定の文字を斜体に表示できます。

emタグの使い方はとても簡単で、際立たせたい文章をemタグで囲むだけです。

Emタグの基本形は、次のとおりになります。
<em>〇〇〇〇</em>

例:東京SEOメーカーの「SEO」を強調してみます。

  • emタグがない時:<p>東京SEOメーカー</p>
  • emタグがある時:<p>東京<em>SEO</em>メーカー</p>

このように、emタグで囲むと囲まれたところが斜体になります。

emタグの「EM」はemphasisの略語で、日本語で直訳すると強調という意味があります。emタグは、イーエムタグと読むのが一般的です。

 

emタグの属性と対応プラウザ

emタグはグローバル属性であるため、すべてのHTML要素で指定できます。また、emタグはほとんどのブラウザで対応可能です。

スマホとPCの対応ブラウザは、次のとおりです。

PCの場合 スマホの場合
Chrome Android webview
Edge Android版Chrome
Firefox Android版Firefox
nternet Explorer Android 版 Opera
Opera iOS版Safari
Safari Samsung Internet

Windowsの場合、標準文字をメイリオにしているとemタグを設定しても文字は斜体になりません。emタグを記載したにもかかわらず、表示が斜体にならない場合は標準文字がメイリオに設定されている可能性があります。

 

emタグを使うメリット

emタグは、コンテンツを作成するときに必ず使用しなければいけないわけではありません。しかし、emタグをページ内に設置することにより、ユーザーに伝えたい文章だけを強調できます。ユーザーは閲覧するときに流し読みをすることが多いため、文章が多く並ぶページの場合は大事な文章が読まれないことも少なくありません。

また、装飾がない文章は単調になるため、読みづらいと感じるユーザーも多いです。文章を読んでる途中で読むことが面倒になってしまい、ページから離脱される可能性もあります。重要な部分だけをサッと読みたいユーザーは多いので、emタグで文字を強調させて訪問者の目に留まる工夫をすることが重要です。

 

emタグを使う際の注意点

emタグで特定の文章を強調することで、届けたい情報をユーザーに読んでもらいやすくなります。また、emタグで文章にリズムが生まれるため、最後まで目を通してもらえるのもメリットです。ただし、多くのメリットがあるemタグですが、コンテンツ内で多用するのはおすすめしません。

emタグを使いすぎると、最終的にどこが重要なのか分かりづらくなります。ユーザーに最後まで読んでもらえたとしても印象に残らないので、emタグの乱用は控えてください。emタグは適度に設定し、ユーザーの興味を惹けるように工夫することが大切です。

 

他の強調タグとの違い

emタグは文字を斜体にするHTMLタグですが、ほかにもさまざまな種類があります。たとえば、特定の文字を太文字にできるstrongタグは、Googleの検索エンジンに対して文字の重要性を伝えられます。

太字に装飾できるHTMLタグには、bタグもあります。ただし、bタグはstrongタグのようにGoogleに対して重要性を表すものではありません。単に文字を太字にして装飾したい場合に便利なHTMLタグになります。strongタグやbタグなどemタグ以外にもさまざまな種類の強調タグがあるので、目的に応じて使い分けることが大切です。

 

iタグとemタグの違い

Iタグは、emタグと同じように文字を斜体にできるHTMLタグのことです。Iタグはフォント(文字)をイタリック体にするためのタグで、イタリック体は右側に傾いているので、見た目がemタグと同じように見えます。

  • emタグ・・・強調されている斜体
  • iタグ・・・イタリック体の斜体

強調したい場合は、iタグではなくてemタグを使うと良いです。iタグはグローバル属性なので、すべてのHTML要素で使用可能です。iタグの使い方もとても簡単で、強調させたい文章をiタグで囲むだけです。

iタグの基本形は、次のとおりになります。
<i>〇〇〇〇</i>
※〇〇に文言が入ります

strongタグとemタグの違い

strongタグは、文章を太文字にできるHTMLタグのことです。strongタグは検索エンジンに対して文字の重要性を伝えられるという特徴があります。strongタグを記事のメインキーワードに近い単語に使えば、SEO効果が得られます。

  • emタグ・・・文字を斜体にして強調するだけで検索エンジンには重要性を伝えない。
  • strongタグ・・・文字を強調し、検索エンジンに重要性も伝える。

strongタグは、グローバル属性なので、すべてのHTML要素で使用可能です。使い方も簡単で、強調させたい文章をstrongタグで囲むだけです。

strongタグの基本形は、次のとおりになります。
<strong>〇〇〇〇</strong>
※〇〇に文言が入ります

bタグとemタグの違い

bタグは、文章を太文字にできるHTMLタグのことです。太文字に装飾できるという意味ではstrongタグと同じですが、bタグは単に太くするだけで検索エンジンに重要性を伝えるものではありません。

  • emタグ・・・文字を斜体に表示する
  • bタグ・・・文字を太文字に表示する

文字を強調させることが目的であれば、bタグを使用するのがおすすめです。bタグの使い方もとても簡単で、文章をbタグで囲むだけです。

bタグの基本形は、次のとおりになります。
<b>〇〇〇〇</b>
※〇〇に文言が入ります

 

CSSで文字を斜体にする方法

emタグで文字を斜体にする方法以外に、CSSと呼ばれるスタイル言語で文字を斜体にする方法もあります。ここでは、CSSで文字を斜体にするメリットや設定方法を紹介します。

 

そもそもCSSとは

CSSは、「Cascading Style Sheets」の略称でスタイルシートと呼ばれる言語のことです。HTMLとCSSはセットで使われることが多いですが、HTMLはWebサイトの基本構造を作成するためのプログラム言語になります。

一方、CSSはHTMLで構築した基本構造にデザインを加えて、Webサイト全体を装飾するプログラム言語です。HTMLにemタグを直接設置しても問題ありませんが、単に文字を斜体にしたいならCSSで文字を装飾することもできます。

 

CSSを使用するメリット

emタグで文字を斜体にするのではなくCSSを使用する際のメリットは、次のとおりです。

  • テキストの構造を維持できる
  •  メンテナンスがしやすい
  •  SEO効果を得られる

テキストの構造を維持できる

HTMLとCSSの役割を分けてサイトを管理することで、文書構造を維持できるメリットがあります。なぜなら、HTMLに基本構造に加えて装飾まで設定するとソースコードが複雑になるためです。最悪の場合、文章構造が崩れる原因にもなるので、文字に装飾を加えたいときはHTMLではなくCSSに設定するのがおすすめです。

 

メンテナンスがしやすい

基本構造を構築するHTMLとデザインを加えるCSSの役割を分けて作成することで、サイトをメンテナンスしやすいといったメリットがあります。

たとえば、Webサイトのデザインや文字の装飾を変更したい場合、HTMLのみで構成するとソースコードをひとつずつ修正しなければいけません。CSSを使用すればCSSファイルだけ修正すれば良いので、サイトのメンテナンスを行いやすいのです。

 

SEO効果を得られる

HTMLとCSSで役割を分けてWebサイトを構築することで、ソースコードに余計なコードがなくなるのでソースコードの軽量化につながるメリットがあります。ソースコードを軽量化すると、ユーザーが訪問したときに素早くページが表示されます。サイトの表示速度が速いと検索エンジンから高い評価を受けられるので、SEO的にはCSSでコーディングした方が良いです。

 

CSSで文字を斜体にする方法

CSSで文字を斜体にする場合、font-styleを使用します。font-styleとは、CSS のプロパティでフォントスタイルを指定できる機能です。CSSで文字を斜体にしたいときは、font-styleに斜体フォントのitalic(イタリック体)を記入します。

font-styleでは文字のスタイルを装飾することができるので値にitalic(斜体)を設定することで文字を斜体にすることができます。

.セレクタ{
font-style: italic
}

例:

1.HTMLコード

<p class=”syatai”> 東京SEOメーカー</p>

2.CSSコード

.syatai{font-style: italic
}

3. HTMLとCSSのコーディング結果:東京SEOメーカー→東京SEOメーカーとなります。

 

emタグによるSEO効果

emタグは文字を斜体にして強調しますが、特にSEO効果があるというわけではありません。

おすすめ動画:Is there a difference between the “strong” and “b” tags in terms of SEO?

こちらの動画でGoogleの公式見解が確認できます。SEO効果がないと言っても、emタグを使うことにより読みやすくなり、ユーザビリティが向上すればそういう点においてはSEO効果があります。

 

まとめ

SEOコンサルタントサイトの質を向上させるには、ユーザーが満足するコンテンツを作成する必要があります。単に文字が並んだページですと単調になりやすいので、ユーザーは読みづらさを感じます。読みづらいと感じたユーザーはページの滞在時間が短くなるため、検索エンジンから品質の低いページと判断されてしまいます。そこで、斜体に変換できるemタグを活用して文字を装飾します。文章にリズムが生まれ、コンテンツの中で何が重要な部分なのかユーザーにわかりやすく伝えられます。emタグ以外にもさまざまな強調タグがあるため、コンテンツ全体のバランスを考えながら適度に設置しましょう。

 

 

この記事の監修者

SEOコンサルタント

アドマノ株式会社 代表取締役 天野 剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析(Googleアナリティクス個人認定資格GAIQ保持)コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。

監修者:アドマノ株式会社 代表取締役 天野剛志
天野 剛志
マーケティングのエキスパート。Googleアナリティクス個人認定資格GAIQ保持。大学では経営法学を専攻。オーストラリア・イタリア・フランス・タイ・カンボジアなど世界各国を旅した後、イギリスで1年半生活し語学力と国際的視野を磨く。日本帰国後は広告代理店で営業を12年経験。SEOは草創期から独学で研究し、100以上のサイトで検証しつつノウハウを蓄積。2012年にSEO専門会社のアドマノを設立。
facebookで共有 Xで共有 LINEで共有

新着記事

人気記事

WEBマーケティング

SEO対策