SEOに強いHTMLタグの最適化とは？

2023.02.09

はじめに

HTMLタグとは、Webページの文字情報に、構造や表示方法などの意味を与えるマークのことですが、HTMLタグの最適化をやれば、すぐに検索上位が取れるわけではありません。しかし、HTMLタグの設定や構造に問題があると、やはりSEOで成果は出にくいのも事実です。

今回は、SEOでHTMLタグが重要な理由と、100種類以上あるHTMLタグの中から、特にSEOに強いものを厳選してご紹介します。

SEOでHTMLタグが重要な理由

例えば、タグが何も設定されていないと、クローラーにとってはタイトルも本文も同じ価値のテキストが羅列されたページとしか認識できませんが、見出しタグが設定されていると「ここは見出しタグが使われているので重要な箇所」と判定するのです。

つまり最適化することでページの構造や内容がクローラーに正しく伝わり、SEO効果が期待できるのです。同時に、HTMLタグの最適化は、アクセスしてくるユーザーにとって、使いやすさ＝ユーザビリティの改善にも貢献します。ユーザービリティが良くなると、PVや滞在時間が増えることにつながります。

ですので、HTMLの最適化を行う際には、ユーザーにとって使いやすく役立つようになることを目指しましょう。

SEOに強いHTMLタグ

ここからは、SEO対策の観点から特に重要なHTMLタグをご紹介します。

titleタグ

<title>SEO対策に！HTMLタグの最適化とは？</title>

title（タイトル）タグは、ページの名前や題名を表すタグです。クローラーやユーザーに、何について書かれたWebページかを端的に伝える重要な要素です。titleタグを指定した文字は、Googleの検索結果やSNSで共有した際のタイトル、ブックマークの表示名などさまざまな場所で露出されます。

タイトルをつける際には、文章の前方にターゲットキーワードを盛り込むことで、Googleに評価されやすくなります。タイトルが長すぎると検索結果で省略されてしまうので気をつけましょう。

メタタグ

メタタグとは、head要素に記述するタグで、Webページの情報を検索エンジンに伝えるためのタグの総称です。titleタグも厳密にはメタタグに含まれます。メタタグにはさまざまな種類がありますが、SEOで特に重要とされるのはtitleタグのほか次の5つです。

メタディスクリプション

ページの概要を説明する文章に使用するタグで、検索結果のタイトル下に表示されます。タイトル同様、長すぎる文章は省略されてしまうため、120文字前後で簡潔にまとめましょう。

メタディスクリプションは検索順位には直接影響しないとされていますが、ユーザーのクリックを促して訪問数を増やすことによる、間接的なSEO効果は期待できます。ユーザーの目に留まりやすいよう文章の前半にキーワードを含み、簡潔で分かりやすいメタディスクリプションを作成しましょう。

文字コード

文字コードとは、文字の種類に割り振られた番号のことです。日本語に対応していない文字コードを使用すると、Webページのコンテンツが文字化けしてSEOに悪影響を及ぼします。

100種類以上の文字コードがありますが、日本語に該当する文字コードは「utf-8」「shift_jis」「euc-jp」の3つ。中でもスタンダードな文字コードが「utf-8」で、次のように記述します。

ビューポートタグ

ビューポートは「表示領域」という意味で、PCやスマホ・タブレットといったデバイスごとに表示サイズを最適化するタグです。ビューポートを設定してWebページをレスポンシブデザインにすることで、ユーザビリティが向上します。基本的なビューポートの記述は次の通りです。

OGPタグ

OGPとはOpen Graph Protcolの頭文字をとった言葉です。OGPタグは、WebページがTwitterやFacebookでシェアされた際に、タイトルやアイキャッチ画像などに採用されることがあるので、SNSからの集客を行う場合は、必ずOGPタグを設定しましょう。

ページURL

サイト名

ページタイプ　※TOPページはwebsite、投稿記事などはarticleと記述

ページタイトル　※シェア時に表示されるページタイトル

ディスクリプション　※シェア時に表示される短い説明文

画像URL　※シェア時に表示されるサムネイル画像

hタグ

hタグの”h”はheadingを省略したもので、見出しを表すタグのことです。

ページのタイトルを表すh1から、見出しの大きさ順にh2→h3→h4と設定します。見出しを設定することで、クローラーやユーザーがWebページの階層構造を認識しやすくなります。また、見出しにキーワードを含めることで検索ワードとの関連性が強まり、SEO効果が期待できます。

記述方法

canonicalタグ

canonicalタグは、重複・類似したコンテンツがある場合、もっとも評価してほしいURLをクローラーに伝えるためのものです。例えば、ECサイトで1つの商品に複数のカラーバリエーションごとのページ存在する、PCとスマホでURLが異なる、「httpとhttps」や「wwwのありなし」など。

重複コンテンツはGoogleからの評価が分散したり、低評価を受けたりしてSEO上のデメリットになるためcanonicalタグを設定しましょう。評価してほしいページのURL（正規URL）を、重複ページ内のHTMLに記述します。

aタグ

aタグの”a”はanchor（アンカー）を省略したもので、リンクタグとも呼ばれます。今見ているページから他のページに移動させたい場合に、リンクの出発点と到達点を設定するタグです。リンクの出発点となる文字を「アンカーテキスト」といい、到達点となるURLと合わせて記述します。

同じタブからリンク先に移動する場合

<a href=”リンク先のURL”>アンカーテキスト</a>

別のタブを開いてリンク先に移動する場合

<a href=”リンク先のURL” target=”_blank”>アンカーテキスト</a>

アンカーテキストには、リンク先のターゲットキーワードを盛り込みましょう。クローラーやユーザーにとってリンク先ページの内容が分かりやすく、SEO効果に繋がるメリットがあります。

altタグ（alt属性）

altタグ（alt属性）とは、画像を表示させる際、画像の代替となるテキストを指定するタグです。通信障害などで画像が表示されない場合に代替テキストを表示できるほか、目の不自由な方が利用する読み上げ機能で代替テキストが読み上げられます。

また、altタグはクローラーが画像の内容を理解する助けにもなるため、画像検索のSEO効果が期待できます。altタグは、ユーザビリティとSEO効果の両面で重要な役割を担っています。

代替テキストは、画像を見なくても伝わるような分かりやすく簡潔な文にしましょう。ユーザーに内容を理解させる必要のない装飾目的の画像は、「alt=””」のようにalt属性の値を空白で記述してください。

strongタグ

strongタグは文字が太字で強調されるタグで、ユーザーやクローラーに対して重要性、重大性、または緊急性が高いテキストであることを示す役割です。

同じく太字で表示されるものに「bタグ」がありますが、bタグには重要性をクローラーに伝える役割はありません。strongタグはキーワードや結論などの重要な内容に使用し、bタグはユーザーの目線を引きたい場合に使用します。

<strong>重要性を示したいテキスト</strong>

リストタグ

箇条書きのリストを作る際に使用します。クローラーは、リストタグで書かれた文章を他の段落より重要と判断するとされています。また、箇条書きにすることで、ユーザーにとっても要点を特定しやすいメリットがあります。箇条書きの種類によって「ulタグ」「olタグ」「dlタグ」の3つを使い分けます。

さらに、リストタグを適切に設定することで、リスト形式の強調スニペット※に採用されやすくなります。

※強調スニペットとは、検索ユーザーの質問に対する簡潔な回答を、検索結果の最上部に表示する仕組みのこと。文章と画像で構成されるパラグラフ型と、テーブル型、リスト型、動画型がある。

ulタグ

順不同のリストに使用するタグで、<ul></ul>が順不同リストを意味し、<li></li>に項目を記載します。デフォルトでは、項目の先頭に黒丸（・）の行頭文字が表示されます。

記述方法　　　　　　　　　　　　

<ul>

</ul>

表示

・国語

・数学

・理科

・社会

olタグ

順番のあるリストに使用するタグで、<ol></ol>が番号つきリストを意味し、<li></li>に項目を記載します。デフォルトでは、項目の先頭に1.2.3…と数字が表示されます。

記述方法

<ol>

</ol>

表示

1.アメリカ

2.中国

3.日本

4.ドイツ

dlタグ

dlタグは、ある項目と、項目の説明や定義をリスト化する際に使用します。説明リストを意味する<dl></dl>の間に、見出しを表す<dt>と説明を表す<dd>を設定します。

デフォルトでは、<dd>の要素が右にインデントして表示されます。

記述方法

<dl>

<dd>目標となるもの、相手</dd>

<dd>対応しあって釣りあう</dd>

<dd>比べあわせる</dd>

</dl>

表示

対象

　目標となるもの、相手

対称

　対応しあって釣りあう

対照

　比べあわせる

tableタグ

tableタグは表を作成するためのタグです。文章だけの表現だと長すぎたり複雑になったりする場合、表にまとめることでユーザーが視覚的に理解しやすくなります。

また、tableタグを適切に設定することで、テーブル型の強調スニペットに採用されやすくなります。

表全体を意味する<table></table>の間に、横の行を指す<tr>、見出しを指す<th>、内容を指す<td>などを組み合わせて記述します。

記述方法

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

※ <table border>はテーブルに枠線をつけるタグで、数字で枠線の幅を指定する。

表示

教科	点数
国語	95点
数学	87点

JSON-LDや構造化マークアップ

構造化マークアップとは、コンテンツ内の様々なテキストに「会社名」「場所」「住所」といった意味を持たせるタグを設定することです。構造化マークアップを行うことで、コンテンツの内容がより正確にクローラーに伝わってSEO効果が期待できます。

構造化データを構成する要素には、データの記述方法を指す「シンタックス」と、表記方法を指す「ボキャブラリー」があります。JSON-LD（ジェイソンエルディー）は代表的なシンタックスの1つで、Googleが推奨する記述方法です。「”キー名” : “値”」の形式で、「”name”：”株式会社○○”」「”address”：”東京都港区○○”」などと記述します。

ボキャブラリーは、名前には”name”、住所には”address”を用いるといった表記方法のことで、規格によってルールが異なります。

Googleがサポートしているのがschema.orgという規格です。Googleのサポートの観点からも、構造化マークアップはJSON-LDとschema.orgを用いて記述すると考えてよいでしょう。