SEO対策

SEO対策で効果的なHTMLタグの使い方入門ガイド

2021-07-30

この記事を読むのに必要な時間は約 11 分です。

オオニシ
オオニシ
SEOを行う上で重要なタグがいくつかあります。中でも最も重要なタグが『titleタグ』『descriptionタグ』『h(見出し)タグ』です。

検索エンジンから評価を受けるためは、SEO対策が欠かせません。

 

SEO対策では、ターゲット設定、キーワード選定、コンテンツの充実化などが挙げられ、なかでも、『HTMLタグの最適化』についても重要な施策のひとつといえます。

 

HTMLとはマークアップ言語のひとつで『HyperText Markup Language』(文章構造を表わす目印を付けるためのルール)の略称です。

HTMLタグは、「<」「>」で囲むことで構造を表わし、WEB上の記事やサイト制作の際に用います。

 

タグを使うことで、テキストの文字の大きさや色の変更、別の記事にリンクさせるといった指示が行えるのです。

 

ここでは、SEO対策で効果的なHTMLタグの使い方について解説します。

 

 

SEOで効果的な3つのHTMLタグ

GoogleやYahoo!など検索エンジンで、上位表示をするためには、SEOに強いサイトを作る必要があります。

 

SEO対策には、2つの方法があります。

サイト内のコンテンツの質を高める内部対策と、良質な被リンクを集める外部対策です。

 

タグは、SEOの内部対策として機能します。

 

こちらもCHECK

SEOに重要なのは内部対策!基本を押さえれば外部対策にもつながる

続きを見る

 

タグを最適化することで、検索エンジンからの評価が高くなり、上位表示ができるようになります。

とくに重要なタグがtitleタグ、metaタグ、hタグです。

 

titleタグ・metaタグ・hタグの3つは、ユーザーと検索エンジンの双方にWEB記事やサイトの内容を伝えるのに役立ちます。

 

また、検索順位だけでなく検索結果一覧で表示された際のクリック率に、大きく影響を与えます。

SEOにおける効果がわかりやすく反映されるタグだといえます。

 

タグの使い方については後の項でお伝えするため、ここでは各タグの役目について紹介します。

 

titleタグ

各ページのタイトルを宣言するタグです。

<title>タイトルとなるテキスト</title>

<title>と</title>の部分がタグにあたります。

 

titleタグによる『タイトル』は、検索エンジンの検索結果一覧で表示されます。

 

タイトルの説明画像

 

 

 titleタグの使い方

titleタグは、検索エンジンによるSEO対策が顕著にあらわれる部分です。

記事を書くために設定したキーワードは、検索意図を意識しながらタイトル内に必ず含めます。

 

キーワードが『SEO タグ』であれば、以下のようなタイトルにします。

 

ポイント

SEO対策で効果的なHTMLタグの使い方入門ガイド

 

Googleの検索エンジン最適化スターターガイドでは、下記の3つのポイントを提唱しています。

ポイント

  1. ページの内容を適切に記述する
  2. 各ページに固有のタイトルを付ける
  3. 簡潔で説明的なタイトルである

参照:Google・検索エンジン最適化スターターガイド

 

上記の内容から読み取れるのは、「titleタグに不要なキーワードを盛り込むことや長文で表現することは、Googleからの評価が下がりやすくなる」ということです。

 

文字数は30文字前後、長くても32文字が最適です。

対策キーワードを入れる位置については、左側前半に入れることが推奨されてきました。

 

キーワードの位置を27文字以内に入るようにすると、検索結果に表示されます。

 

タイトルには、数字などを入れることで、具体性があり魅力的に仕上がります。

「ライティング力を鍛えるコツを伝授」というタイトルの場合

「ライティング力を鍛える3つのコツをライター歴20年のプロが伝授」とるすころで、記事の内容がユーザーに伝わりやすくなります。

 

SEO
参考SEOに強いタイトルの付け方!基礎知識と3つのポイント

続きを見る

 

metaタグ

metaタグには、『meta description』『meta keywords』があります。

<description>ディスクリプションとなるテキスト</description>

各ページの情報を伝えるタグです。

 

meta description

検索結果一覧で、titleタグ(記事やサイトのタイトル)の下に表示されます。

各ページの説明文を明記するタグです。

 

ディスクリプションの説明画像

 

meta keywords

meta keywordは、検索エンジンに対して記事やページ内容を伝えることができるタグです。

 

たとえば「SEO タグ 効果」というキーワードをメタキーワードとして登録したい場合、記述方法は以下のようになります。

キーワードをカンマ(,)で区切ることで、複数のキーワードを設定することが可能です。

 

<meta name=”keywords” content=”SEO,タグ,効果”>

 

descriptionのように、検索画面には表示されません。

 

注意

※現在では、Googleでは『meta keyword』については、Google Webmaster Central Blogで「meta keywordsを検索順位を決める要因としては、利用していない」と言及しています。

Google does not use the keywords meta tag in web ranking

 

現在のSEOにおいて、meta keywordsの効果がなくなってしまった理由は大きく2つあります。

 

検索エンジンのアップデート

検索エンジンはページ内の情報を読み取り、どのようなことが書かれているか、重要なキーワードはどれかを判断することができるようになりました。

 

meta keywordsの悪用

検索エンジンが、メタキーワードの情報に基づいて評価していたことで、meta keywordsを大量に詰め込むなどのSEO対策が横行したことが原因です。

結果として、粗悪な低品質な記事が増えることとなったため、meta keywordsは重要視されなくなったといわれています。

 

このことから、ユーザーが求めていることをコンテンツ化し、品質を上げていくことが検索エンジンの評価につながることがわかります。

 

 

metaタグの使い方

検索結果に表示されるディスクリプションは、検索結果一覧で目にする部分です。

 

キーワードを入れることはもちろん、ページの概要が伝わりやすい内容にするだけでなく、本文を読むメリットを端的に伝えてクリック率をあげる工夫をしましょう。

 

Googleが提示するポイントは下記の2つになります。

ポイント

  1. ページの内容を正確にまとめる
  2. 各ページに固有の descriptionメタタグを付ける

参照:Google・検索エンジン最適化スターターガイド

 

文字数は120文字までが目安です。1記事ごとに、独自性のあるディスクリプションを設定していきます。

 

 

hタグ

各ページの見出しを表すタグです。

SEOの内部対策で重要といわれている見出しタグは、ユーザーと検索エンジンの双方にページ内の文章構成を正しく伝えるために使われます。

 

h1(大見出し)、h2(中見出し)、h3~h6(小見出し)が挙げられます。

 

<h1>タイトルのテキスト</h1>

 

※意図的に設定を変更しなければ、h1に入力したタイトルが、検索結果一覧のタイトルとイコールであることがほとんどです。

 

見出しタグの説明

 

hタグの使い方

原則、h1タグは1ページにつき1つにします。

h1タグでは、コンテンツの内容が端的に伝わるように、キーワードを含めて作成します。

 

hタグのポイントは下記の2つです。

ポイント

  1. コンテンツのポイントを考える
  2. ページ全体を通して見出しタグは慎重に利用する

参照:Google・検索エンジン最適化スターターガイド

 

h1が完成すれば、h2からh6まで順序よく設置していきます。

たとえば、h3のまえにH4を設置してしまうと、ユーザーや検索エンジンが理解しづらくなります。

 

h2やh3では、主要キーワード以外に関連キーワードを入れることが効果的です。

ユーザーのニーズを満たしやすくなるでしょう。

 

また、hタグを多用しすぎることも控えてください。

ほかにも過度な強調やキーワードの乱用は、評価を下げる要因となるため厳禁です。

 

SEOライティングのコツ
参考SEOライティング書き方8つのコツ!検索結果で上位表示させる方法

続きを見る

 

 

効果を向上させるHTMLタグ

上記で紹介した、titleタグ・metaタグ・hタグ以外で、SEO効果が期待できるその他の3つのHTMLタグ『aタグ』『箇条書き(ulタグ・olタグ・liタグ)』『altタグ』を紹介します。

 

aタグ(アンカータグ)

『a』は『アンカー』の略で、リンク先の出発点・到達点を指定するタグです。

 

a(リンク)タグの説明画像

 

同じページ内の別の場所や、別ページに遷移するために使われます。

 

 

 aタグ(リンク)の使い方

href属性(リンク先指定)と合わせて使用します。

 

target属性(新しいページを開く)の場合は、下記のようになります。

<a href="リンク先のURL"target="_blank">テキスト < /a>

 

リンク先を表わすテキスト情報は、キーワードが反映したうえで簡潔に記述するのは構いません。

たとえば、「SEO対策で効果的なHTMLタグの使い方入門ガイド」というタイトルに対して、「SEO タグ」がキーワードであるため、「SEOに効果的なタグの書き方」にするのはOKです。

 

 

箇条書き(ulタグ・olタグ・liタグ)

文章をリスト化する際、使用されるタグです。

 

順番のあるものは数字で表す『ol』で記述します。そして、リストの項目を表示するために『li』タグを使用します。

<ul>
<ol>1.テキスト</ol>
<ol>2.テキスト</ol>
<ol>3.テキスト</ol>
</ul>< /a>

 

順番がないものは、番号なしリストの『ul』タグで記述します。

<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>< /a>

 

 

 箇条書き(ulタグolタグ、liタグ)の使い方

『ul&li』『ol&li』のセットで使用します。

 

リストの各項目は、liで記述します。

type属性によって、黒丸・白丸・黒い四角を指定することが可能です。

liタグは何回使っても構いません。

 

ほかにも箇条書きの周りを線で囲むことができます。

箇条書きの色や、背景色も変更できるので、読みやすいコンテンツづくりに使えます。

 

 

altタグ

altタグは、WEB上で表示される「画像」の詳細を説明するテキストのことです。

検索エンジンのロボットは、テキスト以外は読み取ることができないため、説明があることでどのような画像であるか読み取ってくれます。

 

alt属性の画像

 

検索エンジンや閲覧している読者やユーザーに、画像やコンテンツの意味を伝えるために適切な使い方をしましょう。

 

画像が読み込めないときには、代替えテキストとして表示されます。

 

 

 altタグの使い方

画像にalt属性を記述します。

 

<img src="画像のパス" alt="画像の説明のテキスト"  />

 

 

画像が装飾目的で、意味を持たない場合は、alt属性がなくても構いません。

 

 

タグでより成果を上げるための対策・注意点

タグの使い方・書き方を紹介しました。

よりSEOの成果を上げるための対策・注意点について解説します。

 

構造化データ

構造化データとは、検索エンジンがページ内容を理解しやすくなるようにタグづけしたものです。

記事をつくるときに構造化データを使用することによって、リッチリザルトにつなげられることがあります。

 

リッチリザルトとは、通常の検索結果と比べて、視覚的な機能や操作機能が追加された検索結果表示のことを指します。

リッチザルトに似た意味の用語に『強調スペニット』があります。

強調スペニットは、ユーザーがGoogle検索で「〇〇とは」と検索をした際、結果の上層部に回答となる情報を強調して表示する仕組みのことです。

 

対してリッチザルトは、通常の検索結果のスニペット部分を拡張されることが主であり、表示される順位には変わりがないとされています。

 

表示させたいリッチリザルトの種類によって、使用するタグは異なります。

タグをhtmlに記述することを構造化マークアップといいますが、Microdata、RDFa Lite、JSON-LDの3種類が一般的です。

 

Googleは、ガイドラインにおいてJSON-LDを推奨しています。

参照:Google・構造化データに関する一般的なガイドライン

 

リッチリザルトにはパンくずリスト、よくある質問(FAQ)、ハウツー、商品とレビューなど29種類があります。

これらによって、ユーザーの検索行動をより快適にすることが可能です。

 

おすすめしないタグの使い方

装飾系のタグは総じておすすめできません。

SEO対策における有効性がないと考えられているためです。

 

strongタグ

強調したい文字につけることで、タグです。

強調系のタグのなかでも、もっとも強い重要性を示します。

 

したがって、使用する場面は限定されます。

必要のないところでstrongタグを多用してしまうと、評価に悪影響を及ぼします。

 

bタグ

文字を太字表示するタグです。

strongタグと同じく多用しすぎる、もしくは意味のないところでつけると、検索エンジンからの評価が下がりやすくなります。

 

とくに『h2』など重要な見出しタグでは、過度な強調をすることになるので控えましょう。

強調にはhtmelの<em>や太字であればCSSの<font-weight>を用いて、適切な記述ができます。

 

brタグ

改行を表すタグです。

レイアウトを整えるために使うことが多くみられます。

 

しかし、デバイスによって画面幅が異なる問題が生じます。

見やすいレイアウトには、段落の働きを持つ『pr』タグや『p』タグで改行をしましょう。

 

hrタグ

水平線を引くタグです。

『hr』タグは、デザイン目的で使用されることがあります。

 

しかし、区切りをつけたい文章に挿入するのが本来の使い方です。

装飾として水平線を引きたい場合は、CSSのborderを使用しましょう。

 

 

タグを使いこなすために実践を重ねよう!

タグの最適化は、SEOにおける重要な対策となります。

対策を行うことで、上位表示をするための効果があります。

 

自然流入でアクセスを増やすために、タグに関する基本的なHTMLやCSSの知識を身に着けておくとよいでしょう。

 

最適なタグを設定して、SEO対策のスキルを磨いていきましょう。

-SEO対策

error: Content is protected !!

© 2021 SEOライティング│株式会社ワーククリエーション