SEOとHTMLタグ

SEOはとても奥が深いものであり、一口にSEOと言ってもその施策には様々な方法があります。
今回ご紹介するHTMLタグもSEOにおいて重要な要素の一つであり、まずは必ず押さえておきたい部分になります。

HTMLタグで検索順位に変化があるのか、なぜ重要なのかといった疑問がある方もいらっしゃるかと思います。
そこで今回は、SEOにおけるHTMLタグの重要性と、必ず押さえておきたいHTMLタグをまとめてご紹介します。

SEOにおけるHTMLタグの重要性

WEBサイトにおいてHTMLタグは、クローラーがページをインデックスするときの情報となります。
ページを読み取るためにはHTMLタグの情報が必要であり、それらのHTMLタグが正しく記載されていることはSEOにおいて検索順位の決定に関わる重要な部分です。
そのため検索順位を少しでも上げたい時にはHTMLタグの見直しもポイントになります。

HTMLタグの中には、検索順位に直接影響を与えるものもあれば、SEOに関してはそれほど重要ではない部分もあります。
しかし、SEOに重要ではないタグだからと言って適当に記載しておくのではなく、正しくページ情報を検索エンジンに伝えるという意味ではどれも適切に使用することが大切です。

まずは押さえたい基本のHTMLタグ

titleタグ

titleタグについては、以前の「タイトルタグが重要な理由と最適化のポイント」の記事で詳しくご紹介しました。

HTMLタグの中でもtitleタグは最重要といえる程、重要なタグになります。
titleタグは検索結果に大きな影響を与える部分でもあり、ユーザーの検索結果に表示されます。

titleタグのポイント
  • キーワードを入れる
  • キーワードの羅列・盛り込み過ぎには注意する
  • ページ内容とタイトルの関連性
  • わかりやすく簡潔なタイトルにする

また、titleタグを設定するときのポイントについては
上記の以前公開した記事でより詳しくご紹介しているので併せて読んでみてください。

meta description（メタディスクリプション）

meta description（メタディスクリプション）は、サイト（ページ）の内容を表す120文字前後で記載する概要文のことです。
検索結果では、タイトルの下に表示されているテキストの部分です。

ディスクリプションは、SEOに直接的な関係はないとされています。
しかし、ユーザーが検索結果上でサイトをクリックするかは、タイトルとディスクリプションの内容を見て判断します。

ですので、ディスクリプションを書いたからといって検索順位が直接的に上がるわけではありませんが、
サイトのクリック率を上げる要因として大切になる部分です。

ディスクリプションの設定はtitleタグでのポイントと似ていますが以下のようなことがあげられます。

ディスクリプションのポイント
  • ページの内容を簡潔に要約する
  • 文字数はPCで120～130文字前後、モバイルでは70文字前後で記載する
    （文字数に明確な規定はありませんが長すぎると省略されて表示されません）
  • キーワードの盛り込みには注意する
  • ディスクリプションは重複しないように各ページでオリジナルの内容にする

hタグ

hタグは、見出しタグのことです。
hタグには、h1～h6まであり、それぞれを適切に使い分けることがポイントになります。

h1タグは、ページ全体の概要を表すものでタイトルと同じく重要な役割を持っています。
ページのテーマを表す部分なので、キーワードは必ず含まれると思います。
h1タグは「大見出し」に当たるので基本的に1ページにつき1回しか使用しません。

hタグの使用には、構造が決まっているので各見出しは適切に配置することが必要で、
h1タグよりも前にh2・h3タグは使用しません。
これは文書構造的にも、大見出し⇒見出し⇒中見出し・・・というように使用することが自然であり、トピックに合わせて階層化することで人間にも検索エンジンにもわかりやすくなります。

hタグのポイント
  • h1タグより先にh2タグは使用しない
  • h1タグは1ページで1つにする
  • h2～h6タグも、大⇒小の順番に使用する
  • h2～h6タグは、構造を考えて内容がわかりやすくなるように適切に使用する

また、hタグもtitleタグ、メタディスクリプションと同様に
キーワードを盛り込み過ぎない・ページ内容と関連性があるものに設定することも重要です。

hタグを適切に設置することで、それぞれのトピックとページ全体のテーマがユーザーにも検索エンジンにも伝わりやすくなります。
その結果、SEO効果にも結び付いてくるのです。

aタグ

aタグは、リンクを指定するタグのことを指します。
リンク先の設定をする時には適切にaタグを使用するようにしましょう。
aタグ使用時のポイントは、アンカーテキストの設定です。

アンカーテキストは、リンク先ページを明記するテキストです。
アンカーテキストでは、検索エンジンにリンク先ページの内容を伝える重要な役割があります。
また、同様にユーザーに対してもリンク先ページがどのようなページか伝えることは親切であり、クリックにもつながりやすくなります。

アンカーテキストの設定も、自然にキーワードを入れること、リンク先内容がわかるテキストにしましょう。
例えば、アンカーテキストを文章中の「こちら」の部分のみに設定するのではなく、
「SEOの基本について」などのページの内容が伝わるテキストにしましょう。

alt属性

alt属性は、検索エンジンに画像の内容を伝える役割があります。
検索エンジンはテキストしか理解できません。
また、画像を表示できないブラウザの場合に代替テキストとしてalt属性に指定したテキストがユーザーにも表示されます。

alt属性のポイント
  • 文章そのものを使用するのではなく、簡潔に記載する
  • キーワードの羅列にしない、詰め込み過ぎない

リストタグ（ul・ol・liタグ）

リストタグは、正しい文書構造にするために、
箇条書きやリスト形式で要点をわかりやすく伝える役割があります。
これも、検索エンジンとユーザーの両方に対してページ内容を正確に伝え、SEOにおいても影響があります。

箇条書きで記載する場合は、黒点の記号「・」ではなくてリストタグを使用するようにしましょう。
記号「・」で記載しても検索エンジンは箇条書きとして判断しないのです。

また、通常段落を表す時はpタグを使用しますが、段落を表す時と箇条書きでリストを表す時には文書構造が変わります。
そのため、HTMLタグを適切に使用するという意味でもリストタグの使用が適切と言えるのです。

記号「・」とulタグでは箇条書きをした時に下記のようになります。
ユーザーからの見た目だけでいえば、大きな違いはありませんがHTMLの構造としては違いがあるのです。

記号「・」で記述した場合

・SEO
・HTML
・タグ

ulタグで記述した場合

  • SEO
  • HTML
  • タグ
ulとolは使い分ける

さらにulとolはしかっりと使い分けて使用することが大切です。
こちらも上記と同様にどちらのタグを使っても変わらない気がしますが、役割は異なります。

ulタグは、リストの順番には意味を持たないが、箇条書きで要点をわかりやすく伝える時に使用します。
対してolタグは、リストの順番が決まっている時に使用します。
例えば、何かの手順を記載する時など番号付きで要点を伝える時などです。

ulタグは先程説明したような箇条書きになりますが、
olタグを使用すると下記のようになります。

  1. コーヒーを入れる手順は
  2. お湯をゆっくり注ぎながら
  3. 2.3回に分けてドリップします

このように、olとulタグにも違いがあるので、内容によって使い分けるようにしましょう。

pタグ

pタグはテキストの段落を意味するタグで、ページ内で最も多く使われているHTMLタグです。
そのため正しくpタグを使用することで正しく検索エンジンにページの内容を伝えられますが、間違った使い方をしてしまうとSEOにも良くないとされています。

よくある間違いとしては、pタグとbrタグの使い分けです。
brタグは改行したい時に使うタグであり、段落の区切りとして使うことは適切ではありません。

また、pタグは段落以外の部分では使わないようにしましょう。
例えば、箇条書きなどでpタグを使用することはHTMLの文書構造としても正しくありません。
pタグを使用しても見た目上では箇条書きになりますが、HTMLタグの使い方としては適していないのです。

似ているようですが、pタグとbrタグの使い分けもしっかりとするようにしましょう。

まとめ

HTMLタグには、SEOに直接影響するものと、そうではないタグがあります。
しかし直接的な影響がないとはいえ、
正確なHTMLタグで正しくページの内容を記述して伝えることは
検索エンジンだけでなく、ユーザーにとっても読みやすく、わかりやすいページになります。

そしてその結果として、SEOにも結び付き検索順位を上げることに期待ができるようになるのです。

より良いコンテンツを作成するために、HTMLタグについても覚えておきましょう。