SEOに効果あり？5つのHTMLタグの書き方と影響について解説

1．Titleタグ

Titleタグは、その名の通り記事の「タイトル」を示すタグです。

記事タイトルを「ランチおすすめ5選」としたい場合、HTMLに

<title>ランチおすすめ5選</title>

と入力しましょう。

Titleタグには、訪問者やGoogleのクローラーに対して記事の概要を明示して認識してもらう役割があります。

Titleタグを使用する際には、以下の点を意識しましょう。

最低限、Titleには狙っているキーワードを必ず含めるようにしましょう。ただし、キーワードを入れようとするあまり、日本語表現が不自然にならないよう注意してください。

また、タイトルの最後を疑問形で締めくくるなど、検索結果表示を見たユーザーが気になってクリックしやすくなる表現を使うと、訪問率によい影響があります。

HTMLタグを使用する際は、最後を</title>のように「/（スラッシュ）」で締めくくることを忘れないでください。

仮に「/（スラッシュ）」を消してしまうと、記事上のタイトルが正しく表示されない恐れがあります。

2．h2～h4タグ（見出し）

h2～h4タグ（hタグ）は、記事内に見出しをつける役割をしています。　

例えば、記事に「ランチ選びのポイントとは？」と見出しを表示させたい場合には、

<h2>ランチ選びのポイントとは？</h2>

と記載しましょう。

hタグは、見出しをつけてGoogleや訪問者に対して記事の内容をおおまかに伝えるだけでなく、各項目におけるテーマを明示します。

hタグを使用する際には、以下のことを意識しましょう。

まず前提として、ｈタグはh１タグが一番重要度が高く、h２、h３と降順になるにつれて優先度が下がっていくHTML構造になっています。

そのため、記事内で１番大きな区分を表現するタイトルのような場合、h１タグが使用されることも多いのです。

また、h３タグの下にh2タグを入れるなど、優先順位を逆転させないようにしてください。例えば、「おすすめのランチ３選」の見出しの下位に「Aランチ」「Bランチ」「Cランチ」という序列を行う場合、「おすすめのランチ3選」にh２タグ、「Aランチ」など序列する項目にはh３タグを設定しましょう。もし、優先順位を逆転させてしまうと、「HTML構造を無視したタグ設定を行った」と検索エンジンから見なされてしまいます。

タイトル同様、見出しのhタグにはなるべく狙っているキーワードを含めましょう。文章に不自然さがないようにキーワードを入れることで、検索エンジンに対して記事内容をアピールできます。

そして、hタグにはh４よりも小さいタグが存在しますが、できればh４までの使用に抑えてみてください。ｈ5・h６タグを使用すると、内容が細かくなりすぎて訪問者に対して読みづらい印象を与える恐れがあります。

3．meta descriptionタグ

meta descriptionタグは、記事の中身が何かを明示するためのタグです。

例えば、「この記事は、おすすめのランチを３つ紹介しています。」と明示したい場合、HTMLは

<meta name=”description” content=” この記事は、おすすめのランチを３つ紹介しています。”>

と記載します。

meta descriptionタグを作成する際には、以下の注意が必要です。

meta descriptionタグは主として、検索結果にサイトの説明文として表示されます。つまり、ユーザーがそのサイトを見たいか否かを決める、判断材料となるのです。

共感してもらえるような内容、読むことでお得感があるような内容を織り込みましょう。

ただし、お得感を出そうとするあまりに煽りすぎて、ユーザーが訪問後に期待外れだと感じないよう注意してください。

4．リンクタグ（aタグ）

リンクタグ（aタグ）は、URLを張り付けることで引用情報を明示するために使用するタグです。

例えば、Aランチのお店の営業時間や住所などの店舗情報(URL:a-lunch.com)を引用したい場合、HTMLは

<a href=”https://a-lunch.com”>Aランチの店舗情報より</a>

などと記載するのが一般的です。

リンクタグを設置する際、事前に意識しておくべきポイントは以下となります。

リンクタグを自サイトに設置することで、訪問者はリンクをたどって必要な情報を集められるチャンスが増えます。また自サイトそのものも、情報源が伴った正当な情報を掲載しているコンテンツだと認識され、信頼してもらいやすくなります。

一方で、過剰なリンク交換や悪質なサイトへ誘導するリンクを貼るなどの行為は、スパムと見なされたり訪問者の印象が悪くなったりするので、控えましょう。

5．alt属性

alt属性は、Webサイト上で画像の代わりに表出するテキストを表示させるための属性です。何らかの事情でWebサイト上に画像が表示されない場合、代わりにタグ挿入したテキストが表示されます。

例えば、ランチメニューのうちAランチの画像を表示させたい場合、

<img src= “/a-lunch.png” alt=”Aランチの画像です。” />

などと配列させます。

すると、訪問者の通信環境が悪くて画像が表示されないとき、画像の代わりに文字情報を見ることで、「ここにはAランチの画像があるのだな」と訪問者が推測する手助けとなるのです。

また、検索エンジンのクローラーに向けて、画像情報を文字情報としても発信できます。さらに、ユーザーが画像検索をした際、画像の検索結果一覧にも表示される可能性が高まります。

img要素（imgタグ）にalt属性を設置する際は、狙うキーワードを含めることを前提に、画像の説明文として意味が通るような文章を作りましょう。