ジャストウェブ

-ウェブ集客情報ブログ-

2013-01-16

SEOに重要なタグ12個の正しい使い方

htmlタグイメージ

SEOにおいてタグはとても重要な意味を持つ。正しく使えば、検索エンジンにウェブページの主要テーマを正しく伝える事が出来るからだ。事実、タグの使い方を改善しただけで、検索順位がアップした経験を何度もしている。

タグの中には、titleやh1のようにSEO順位に直接影響する重要なタグもあれば、そうではないものもある。だからと言って、重要ではないタグを軽視しても良いという事でない。

重要度の低いタグであっても、いい加減に使えば、HTML文書の意味合いが変わってしまい、ウェブページの主要テーマが検索エンジンに正確に伝わらない。結果として、検索順位に影響する。

大切な事は、どんなタグであっても適切に使用し、正しいHTML文書構造を作り、検索エンジンにウェブページの主要テーマを正確に伝える事だ。

そこで、今回はタグの重要度だけでなく、正しい使い方も紹介する。

最重要

1. titleタグ

titleは検索エンジンが重みをおいている最重要タグだ。

キーワードの数

titleで大切な事は、自然なタイトルにする事だ。titleに含めるキーワードの個数について議論がされているが、自然なタイトル作りを意識していれば、キーワードは2~3個くらいになるはずだ。キーワードの羅列・詰込みは禁物だ。不自然なタイトルとなってしまい、クリック率の低下を招く。

キーワードの出現位置

title内でのキーワードの出現位置も議論されているが、真偽は曖昧だ。あまり意識せず、自然なタイトル作りを意識しよう。

タイトルの文字数

titleの文章は最大で32文字を目安にしよう。長すぎるタイトルは不自然だし、検索結果でタイトルが途中で切れてしまう。結果としてクリック率の低下を招く。

2. h1

h1は検索エンジンが重みをおいている重要なタグだ。

キーワードの数

h1はページの大見出しであり、ページの主要テーマを記載するタグだ。従って、h1には必然的にキーワードが含まれるはずだ。SEOにおいて、1ページ1テーマは鉄則。従って、ページの主要テーマを記載するh1に含まれるキーワードは自然と2~3個くらいになるはずだ。

h1の長さ

h1はそもそもページの大見出しであるので、長すぎる文章になるのは不自然だ。簡潔な見出しにしよう。

h1の配置場所

h1タを配置する場所は、メインコンテンツ部分にしよう。なぜなら、ページの主要テーマはメインコンテンツ部分に記載されるので、ページの主要テーマを表すh1は、その部分に配置されるのが文書構造上適切だからだ。

h1に続くコンテンツ

検索エンジンは、h1とそれに続くコンテンツを分析して、ページの主要テーマを把握している。h1は大見出しなので、その下には大見出しに沿ったコンテンツが続くのが文書構造上適切だ。h1の下に、グローバルメニューが配置されているなど、ページの主要テーマと無関係なコンテンツがくるのは間違いだ。

h1はテキストで

h1は、画像ではなくテキストで作成しよう。画像で作成するよりもテキストで作成した方が、ページの主要テーマが検索エンジンに伝わり易い。

文字の大きさ

h1は、ページの主要テーマを表すタグなので、他のhタグやテキストよりも文字を大きくしよう。ページの主要テーマが視覚的にもユーザーに伝わり易くなる。

h1の不適切な使い方

以上を踏まえると、次のようなh1の使用は不適切な使い方だ。

  • サイトロゴにh1を使用し、全ページ共通のh1になっている
  • h1がヘッダ部分に配置されていて、h1の下にヘッダ画像やグローバルメニューが配置されている

重要な

3. aタグ

aタグは、リンク元のSEO評価をリンク先に渡す役割があるため、SEOにおいて重要な意味をもつ。検索エンジンは、aタグの内容とリンク先の主要テーマの関連性を分析している。つまり、リンク先の主要テーマを正確に検索エンジンに伝えた方が、リンク先のSEO評価は高まる。

アンカーテキストにキーワードを含める

リンク先の主要テーマを正確に検索エンジンに伝えるために、aタグは画像ではなくテキストにし、キーワードを含めた簡潔な文章にしよう。

4. h2~h4

h2~h4は、h1に続く見出しタグで、各トピックの内容を表す重要なタグだ。検索エンジンは、このhタグを一つの手がかりに、ページ内の各トピックと全体テーマを分析している。

従って、hタグを適切に使用すれば、ページ内の各トピックと全体テーマが検索エンジンに正確に伝わり、結果としてSEO評価が高くなる。

トピックの見出しとして使う

例えば、トピックの見出しにpタグを使って文字を大きくすれば、人間にはトピックの区切りが伝わる。しかし、検索エンジンは見た目ではなく、htmlタグによって、文書構造を把握しているので、これでは各トピックと全体テーマが検索エンジンに正確に伝わらない。従って、トピックの見出しには、hタグを使おう。

hタグの使用例

hタグの使用例を以下に示す。

  • h1:SEOサービスの料金について
  •   h2:内部SEOの料金
  •     h3:一般の方の価格表
  •     h3:会員の方の価格表
  •   h2:外部SEOの料金
  •     h3:一般の方の価格表
  •     h3:会員の方の価格表

正しい使い方で有効

5. strong・em

strongとemのSEO影響度は薄まったと言われているが、正しく伝えば、まだまだ効果はある。

キーワードに使う

storngとemは、単に見た目が太字になると言うだけではなく、その箇所が重要であるという事を検索エンジンに伝えるタグである。つまり、重要なキーワードに使用する事で、その重要性を検索エンジンに伝える事が出来る。

storngタグとemタグを使い分ける

storngタグは「強い強調」、emタグは「強調」を意味する。従って、最も強調したいキーワードにstrongタグを使い、強調度合いの低いキーワードにemタグを使おう。

storngとemの使用回数

ページ内でstorngとemを過剰に使用すると、過度なSEOとしてペナルティの恐れがある。必要な箇所を厳選して使おう。そうすれば、ページ内での使用回数は3~5回くらいになるはずだ。

ビジュアル目的では使わない

stongとemには、検索エンジンにとって重要な箇所を伝えるという論理的な意味がある。従って、論理的な強調ではない箇所に使うのは間違いだ。例えば、検索エンジンに対する論理的な意味はないけど、ユーザーには強調して伝えたい箇所があるとする。この場合には、spanを使ってスタイルシートで太字にしたりアンダーラインを引くなどの調整をしよう。

6. リスト(ol、li、dl)

リストにキーワードを含めるとSEOに効果があるなどの議論があるが、その真偽は曖昧だ。リストで重要なのは、正しい文書構造にするために使うという事だ。正しい文書構造にする事で、検索エンジンにページの内容を正確に伝える事ができ、結果としてSEO評価に影響する。

箇条書きにはリストを使う

例えば、以下の箇条書きリストを見比べて頂きたい。

くだものリスト
  • みかん
  • りんご
  • バナナ
くだものリスト

  ・みかん
  ・りんご
  ・バナナ

上の例ではリスト(ul)を使用しているのに対して、下の例ではpタグを使用している。見た目には同じように見えるが、HTML文書構造としては全く異なる。

pタグは段落を表すものであり、リストを表すものではない。上記の使い方は間違いだ。箇条書きには、リストタグを使おう。

メニューにはリストタグを使う

グローバルメニューにpタグを使っているサイトをたまに見かけるが、これも間違いだ。グローバルメニューは、リンクのリストなので、リストタグを使うのが正しい。

olとulを使い分ける

olとulは、どちらも、スタイルシートでlist-style-type:noneと指定すれば、見た目は同じになる。しかし、HTML文書としての意味合いは全く異なる。olは番号付のリストで並び順に意味がある。一方、ulには並び順に意味はない。並び順に意味があるリストに対しては、olを使うのが正しい使い方だ。

ちなみに、定義リストに使うdlは、元々は、用語(dt)と用語の定義(dd)に使うためのタグだ。しかし、W3Cはもっと幅広い使用法を解説している。話者(dt)と発言内容(dd)に活用する例をあげている。dlタグは、用語定義に限らず、幅広く活用しよう。

7. pタグ

段落を意味するpタグは、通常、ページ内で最も多く使われる。従って、正しく使用すればページの内容を検索エンジンに正確に伝える事ができる。結果としてSEO評価に影響する。

トピックの区切りはbrではなくpタグで

brは改行のためのタグで、トピックの区切りを表すものではない。ビジュアルを整えるためだけに、brタグを使うと、HTML文書構造上(検索エンジンにとっては)トピックの切れ目がなくなってしまう。つまり、検索エンジンにページの内容が正しく伝わらない。トピックの区切りには、pタグを使おう。

段落以外ではpタグを使わない

例えば、以下の2つの例を見比べて頂きたい。

お問合せ先
  • 電話:03-xxxx-xxxxx
  • FAX:03-xxxx-xxxxx
  • メール:info@xxxx.com
お問合せ先

  ・電話:03-xxxx-xxxxx
  ・FAX:03-xxxx-xxxxx
  ・メール:info@xxxx.com

上の例ではリストタグ(ul)を使用しているのに対して、下の例ではpタグを使用している。見た目には同じように見えるが、HTML文書構造としては全く異なる。

pタグは段落を表すものであり、リストを表すものではない。上記の使い方は間違いだ。ありがちな間違いなので気をつけよう。

8. table

tableを使うとSEOに不利だと勘違いしている人がいるがそうではない。tableは表に使用するタグなので、ページのレイアウトに使うのは間違いという意味だ。コンテンツ内で表を使う場合には、tableを使って問題ない。但し、タグの使い方次第で、HTML文書としての意味が変わってくるので、注意が必要だ。

summary属性を指定する

summary属性には、表が何を示すのか、その概要を記載しよう。そうする事で、表の情報が検査エンジンに正確に伝わる。

thとtdを使い分ける

表は本来、項目とデータ(内容)で成り立つ。項目にはthタグを、データ(内容)にはtdを使おう。たまに、thの存在しない表を見かけるので注意しよう。検索エンジンに表の情報が正確に伝わらなくなる。

9. description

descriptionはSEO順位に直接影響しない。しかし、クリック率に影響する重要なタグだ。descriptionの内容は検索結果のスニペット(ウェブページの概要を説明する文章)に使われる。ユーザーにとって分かり易くクリックしたくなるようなdescriptionを準備すれば、クリック率を高める事ができる。

キーワードを含める

descriptionに含まれる検索キーワードは太字で表示される。従って、ユーザーはページの内容を把握し易くなる。descriptionにはキーワードを適切に含めよう。SEO順位には直接影響しないが、クリック率に大きく影響する。

非推奨

タグの中には、HTML文書としての特別な意味はなくビジュアルを整える目的のものが存在する。しかし、現在Googleは、タグはHTML文書構造を表すために使用し、ビジュアルの調整はスタイルシートで行う事を推奨している。以下で紹介するのは、ビジュアル調整の目的で使いがちなタグだ。出来るかがり使用を控え、ビジュアルの調整はスタイルシートで行おう。

10. br

brは改行を表すタグだ。トピックの区切りであればpタグを使おう。ビジュアル的に改行をしたいのであれば、spanにスタイルシートでdisplay:blockを指定すれば、spanで括った部分を改行できる。

11. bタグ

bタグは見た目を太字にするためのものだ。太字にしたいのであれば、スタイルシートでfont-weight:boldを指定しよう。もしも、文章中の特定の語句を太字にしたいのであれば、spanにスタイルシートでfont-weight:boldを指定すれば、spanで括った部分が太字になる。

12. hr

hrは水平線を表すタグだ。水平線を引きたいのであれば、divにスタイルシートでborder-bottom:1px solid #000000などのように指定しよう。

タグを正しく使い、正しいHTML文書構造にしよう

SEO順位に直接影響するタグは、titleとh1くらいだ。しかし、その他のタグを軽視して、いい加減に使ってしまうと、HTML文書構造がおかしくなり、ページのテーマや内容が検索エンジンに正確に伝わらなくなってしまう。結果としてSEO順位の低下を招く。

ページ内で使用する全てのタグを正しく使い、正しいHTML文書構造のページ作成を心がけよう。

この記事が役に立ったら共有をお願いします

無料ツール
【SEO診断チェックシート】
Google公式ガイドラインに沿った50項目

無料ツール『SEO診断チェックシート』

あなたのWEBサイトに問題がないかチェックしてみませんか?

このSEO診断チェックシートは、こんな人にオススメです。

  • 検索順位がなかなか上がらない
  • ある時から検索順位が下がった
  • アクセス数が伸び悩んでいる

このツールを使えば、Googleが公開している「検索エンジン最適化スターターズガイド」に沿った50項目でサイトを診断できます。

是非、貴社のWEBサイトの診断にご活用下さい。

無料ツールをダウンロード 

最新の記事情報の取得はこちら

「いいね!」ボタンを押すと、最新の記事情報がFacebookに届きます。

「フォローする」ボタンを押すと、最新の記事情報がTwitterに届きます。