SEO対策コンサルティング

SEO対策に！HTMLタグの最適化とは？

2023.02.09

はじめに

SEO対策を行う上でHTMLタグの最適化は欠かせません。それだけやれば、検索上位が取れるほど甘い世界ではないですが、HTMLタグの設定や構造に問題があると、やはりSEOで成果は出しにくいでしょう。

HTMLタグとは、Webページの文字情報に、構造や表示方法などの意味を与えるマークのことです。今回は、SEOでHTMLタグが重要な理由を解説します。

また、100種類以上あるHTMLタグの中から、特にSEOに強いものを厳選してご紹介します。

SEOでHTMLタグが重要な理由

HTMLタグを適切に設定することで、検索順位を決めるクローラーがWebページの内容を理解しやすくなります。

例えば、見出しタグやリストタグを使用しないと、文字の意味を理解できないクローラーにとっては、ただテキストが羅列されたページとしか認識できません。

HTMLタグを適切に用いる、つまり最適化することでページの構造や内容がクローラーに正しく伝わり、SEO効果が期待できるのです。

同時に、HTMLタグの最適化は、ユーザーにとって読みやすく利便性の高いページに改善することを意味します。利便性が高まることでページビュー数や滞在時間が増え、SEO効果に繋がります。HTMLの最適化を行う際には、正しく設定することはもちろん、「ユーザーにとって使いやすく役立つページ作り」を念頭に置きましょう。

SEOに強いHTMLタグ

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

titleタグ

title（タイトル）タグは、Webページの名前や題名を表すタグです。クローラーやユーザーに、何について書かれたWebページかを端的に伝える重要な要素です。

titleタグを指定した文字は、Googleの検索結果やSNSで共有した際のタイトル、ブックマークの表示名などさまざまな場所で露出されます。

記述方法

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

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

メタタグ

メタタグとは、head要素に記述するタグで、Webページの情報を検索エンジンに伝えるためのタグの総称です。titleタグも厳密にはメタタグに含まれます。

メタタグにはさまざまな種類がありますが、SEOで特に重要とされるのはtitleタグのほか次の5つです。

メタディスクリプション

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

記述方法

メタディスクリプションはGoogleの評価基準には含まれないため、キーワードを盛り込んでも検索順位には直接影響しないとされています。

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

文字コード

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

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

記述方法

ビューポートタグ

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

記述方法

OGPタグ

OGPとはOpen Graph Protcolの頭文字をとった言葉です。OGPタグは、WebページがTwitterやFacebookでシェアされた際に、タイトルやアイキャッチ画像などを最適化して表示する役割があります。

SNSからの集客を行う場合は、必ずOGPタグを設定しましょう。OGPタグは項目ごとに次のように記述します。

記述方法

ページURL

サイト名

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

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

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

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

hタグ

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

ページのタイトルを表すh1から、見出しの大きさ順にh2→h3→h4と設定します。見出しを設定することで、クローラーやユーザーがWebページの階層構造を認識しやすくなります。

また、見出しにキーワードを含めることで検索ワードとの関連性が強まり、SEO効果が期待できます。

記述方法

titleタグが検索結果など外向けのタイトルである一方、h1タグは記事内に表示されるタイトルに使用します。h1タグの文章も、30~50文字程度で前半にキーワードを盛り込むとSEO効果が期待できます。

titleタグとh1タグの用途は異なりますが、同じ文章を用いるケースが多いです。

canonicalタグ

canonical（カノ二カル）タグは、Webサイト内に重複・類似したコンテンツがある場合、もっとも評価してほしい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>

strongタグを使い過ぎると、却って重要な部分がクローラーに伝わりづらくなるので、1記事に1〜3個を目安にしてください。ユーザーが読みやすいように強調したい場合は、bタグや、文字を斜体にするemタグ、文字にハイライトを付けるmarkタグなどを適切に使い分けましょう。

リストタグ

箇条書きのリストを作る際に使用するのがリストタグです。クローラーは、リストタグで書かれた文章を他の段落より重要と判断するとされています。

また、箇条書きにすることで、ユーザーにとっても要点を特定しやすいメリットがあります。箇条書きの種類によって「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を用いて記述すると考えてよいでしょう。

まとめ

HTMLタグの最適化は、単にクローラーにWebページの情報を伝えるものではなく、ユーザーにとって読みやすく利便性の高いページを目指して行うものです。

ユーザビリティの向上という目的を忘れず、HTMLタグの最適化に取り組みましょう。

一覧に戻る