SEO対策に使えるHTMLタグ12選！基本の構造や用途・書き方
WebサイトのHTMLが適切かどうかの確認と改善は、SEO対策の1つとして広く認識されています。
本記事では、SEO対策と関連が強いHTMLタグを12種類挙げ、その効果と正しいマークアップ方法を解説していきます。HTMLとは何か、という初心者向けの解説からスタートしているので、タグやSEO対策に詳しくない方でも理解しやすい内容になっています。
そもそもHTMLとは
まずはHTMLとは何か？という初歩的な部分から解説します。
HTMLとは、Webページを作成するために使用するマークアップ言語の1つであり、Webページの構造や内容を記述することができます。Webページの見た目や構造を決定するために、欠かすことのできない存在です。
またHTMLは書き方次第で、検索結果の表示順位に影響を及ぼします。HTMLタグが正しく記載されていれば検索エンジンに高く評価され、検索結果の表示順位が上位になる可能性が高くなります。
HTMLのタグにはさまざまな種類があり、それぞれ特定の役割や機能があります。例えば、TitleタグはWebページのタイトルを設定、metaタグはWebページの情報を記述し、検索結果の表示内容を制御するといった役割があります。
適切なHTMLタグを使用することで、読み上げやスクリーンリーダーなどの支援技術を活用した利用が可能になり、より多くの人々がWebページを利用できるようになるのです。
このように、HTMLはWebページを作成する上で欠かせない言語であり、適切に使用すれば、Webページの検索エンジン対策やアクセシビリティ向上につながります。
HTMLタグの設定がSEO対策にもたらす効果
HTMLタグを適切に設定することで、検索エンジンからの評価を高め、検索結果で自社サイトが上位表示される可能性が高くなります。
では「HTMLタグを正しく設定する」とは一体どのようなことなのでしょうか。それは、HTMLタグそれぞれの役割を理解し、その役割に応じた正しい情報を記載するということです。
例えばWebサイトのタイトルを設定し、検索エンジンで表示させたい場合は、Titleタグを使い、タイトルを記載しなければなりません。
検索結果画面に表示される情報をコントロールするなら、metaタグを使用し、Webページの情報を記述する必要があります。
Webサイト内の文章に見出しをつけて記載するのであれば、hタグを使います。hタグは見出しを設定するためのタグで、見出しの重要度に応じてh1〜h6までのタグを使用するというルールがあります。
このように適切なHTMLタグを使用することで、検索エンジンからの評価を高め、検索結果の上位表示がかなう場合があります。Webページを作成する際には、HTMLタグを正しく設定し、効果的なSEO対策を行うことが重要です。
HTMLタグの基本の構造と書き方
HTMLタグは、Webページを構成するための基本的な要素です。Webページは、HTMLタグで構成されており、見出し、段落、画像、リンクなどの要素を表示することができます。
では以下に、実際の記述方法を紹介していきます。
まず前提として、HTMLタグは開始タグと終了タグで囲まれた形で記述します。
開始タグは<で始まり、終了タグは</で始まります。
例えば、段落を表す<p>タグは開始タグが<p>で終了タグが</p>です。
例：
<p>これは段落の例です。</p>
<h2>これは見出しの例です。</h2>
<img src=”example.jpg” alt=”これは画像の例です。”>
<a href=”<https://www.example.com>”>これはリンクの例です。</a>
下記のように表示されます。
HTMLタグでは、属性を指定できます。属性とは、HTMLタグに追加情報を与えるためのものです。属性は開始タグに記述され、属性名と属性値のペアで指定されます。
例えば、画像を表示する<img>タグには、src属性に画像のURLを指定できます。また、alt属性には画像の説明文を指定できます。
以下は、画像を表示する<img>タグの属性を指定した例です。
例：
<img src=”example.jpg” alt=”これは画像の例です。”>
HTMLタグは、1つのHTMLタグの内部にほかのHTMLタグを配置できます。
例えば、見出しと段落を含むセクションを作成するためには、<section>タグの内部に<h2>タグと<p>タグを配置します。
例：
<section>
<h2>見出し</h2>
<p>段落</p>
</section>
以下のように表示されます。
以上がHTMLの基本構造と書き方です。この基本構造をベースにそれぞれの目的に応じたHTMLタグを使い、Webサイトに掲載する情報を記載していく流れとなります。
繰り返しになりますが、HTMLタグを適切に使用することでSEO対策やアクセシビリティの向上につながります。そのため、Webページを作成する際にはHTMLタグを正しく使用し、読みやすく、分かりやすいWebページを作成することが大切です。
どんなときに使う？SEO対策に役立つHTMLタグ12個の用途と書き方
以下では、SEO対策に役立つHTMLタグ12個をピックアップし、その役割と書き方を解説していきます。SEO対策に効果的なHTMLタグは、以下の通りです。
・Titleタグ
・metaタグ
・hタグ
・alt属性
・aタグ
・canonicalタグ
・listタグ
・tableタグ
・strongタグ／bタグ
・pタグ
・brタグ
・blockquoteタグ／qタグ
では詳しく見ていきましょう。
1.Titleタグ｜ページタイトルの設定
TitleタグはWebページのタイトルを設定し、検索結果に表示されます。またTitleタグは、Webページの重要性を示すために大きな役割を果たします。
Titleタグは<title>と</title>で囲まれた文字列を含みます。
例えば、以下のようにTitleタグを設定できます。
<head>
<title>ページタイトル</title>
</head>
Titleタグの文字列は、Webページの内容を要約した表現にすることが望ましいです。また、同じTitleタグを複数のページで使用することは避け、ページごとに適切なTitleタグを設定することが重要になります。
さらに、大切なポイントはTitleタグにはキーワードを含めることです。これにより特定の検索ワードでの上位表示を狙うこともできます。
2.metaタグ｜Webページの情報を記述
metaタグはWebページの情報を記述するためのタグです。キーワードや説明文などを設定することで、検索結果の表示内容を制御可能です。
metaタグには、以下のような属性を指定できます。
・name属性：metaタグの種類を指定します。例えば、キーワードを設定する場合は「keywords」と指定します。
・content属性：metaタグの内容を指定します。例えば、キーワードを設定する場合は「キーワード1, キーワード2, キーワード3」と指定します。
以下は、metaタグの例です。
<meta name=”keywords” content=”HTML, CSS, JavaScript”>
<meta name=”description” content=”Webページの説明文が入ります。”>
このようにmetaタグを適切に設定することで、検索エンジンからの評価が高まり、SEO対策に効果を発揮します。
3.hタグ（h1～h4）｜ページの見出しの設定
Webページにおける見出しを設定するためのタグがhタグです。見出しには、h1〜h6までの6段階の重要度があり、それぞれのタグを使用することで、見出しの重要度を示すことができます。
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
以下のように表示されます。
hタグを使用することでページの構造が明確にできます。また、検索エンジンはhタグを重要な情報として扱い、ページの評価に影響を与えることがあるため、適切な使用はSEO対策に有効です。
ただし、見出しの重要度に応じてhタグを使用する場合は、階層構造を考慮する必要があります。つまり、h2タグを使用する前に必ずh1タグを使用する、といったように、見出しの重要度に応じた階層構造を意識して設定することが大切です。
4.alt属性（altタグ）｜画像に説明文をつける
alt属性は画像に説明文を設定するための属性であり、検索エンジンが画像を理解しやすくするためにも重要です。例えば、以下のように<img>タグを使用して画像を表示する場合、alt属性に画像の説明文を指定することができます。
<img src=”example.jpg” alt=”これは画像の例です。”>
alt属性には画像を理解できない場合、代わりにテキストとして表示する設定をすることもできます。また、画像が表示されないときも代替テキストとして表示されるため、アクセシビリティの向上にもつながります。
画像が表示できないときは下記のように表示されます。
SEO対策上では適切にalt属性を設定することで、検索エンジンの評価アップが期待できます。
5.aタグ｜リンクの設定
aタグはリンクを設定するためのタグで、外部サイトへのリンクや内部リンクを設定することができます。
aタグは以下のように記述します。
<a href=”リンク先のURL”>リンクテキスト</a>
href属性はリンク先のURLを指定するために使用される属性です。href属性にリンク先のURLを指定し、リンクテキストを<a>タグと</a>タグで囲みます。
リンクテキストには、クリックすると遷移する箇所を表した説明文を記述することが一般的です。以下は、Googleのホームページへのリンクを設定する例です。
<a href=”<https://www.google.com/>”>Google</a>
target属性に_blankを指定し、リンク先を新しいウィンドウやタブで開くことができます。
target属性はリンクをクリックした際に、どのような方法でリンク先のページを表示するかを指定するために使用されます。
また_blankは、HTMLでリンクを開く際に指定するターゲット名の1つで、指定することでリンクをクリックした際に新しいタブまたはウィンドウでリンク先のページを開くことができます。
以下は、Googleのホームページを新しいタブで開くリンクを設定する例です。
<a href=”<https://www.google.com/>” target=”_blank”>Google</a>
このようにaタグで、Webページ内や外部サイトへのリンクを設定できます。aタグを適切に使用することで、Webサイトの使いやすさが向上し、検索エンジンの評価が上がる可能性があります。
6.canonicalタグ｜重複・類似コンテンツを指定
canonicalタグは、同一または類似のコンテンツが複数存在する場合に、正規のURLを指定するためのタグです。
検索エンジンは、同一または類似のコンテンツが複数ある場合、どのURLを正規のURLと認識すればよいか判断できなくなるため、canonicalタグによって正規のURLを明確に示すことで、重複したコンテンツをチェックできるようになります。
一般的には、評価してほしいページにこのタグを使います。
例えば同じ商品を異なるURLで販売している場合、商品ページのコンテンツが重複するため、検索エンジンからペナルティを受ける可能性があります。この場合、商品ページの正規URLを指定するために、canonicalタグを使用してペナルティの可能性を排除すべきです。
canonicalタグの記述方法は以下の通りです。
<link rel=”canonical” href=”正規のURL”>
以下のように、正規のURLには、正規ページのURLを指定します。このタグは<head>タグ内に記述する必要があります。
<head>
<link rel=”canonical” href=”<https://www.example.com/正規のURL>”>
</head>
canonicalタグは、重複したコンテンツの問題を解決できるため、SEO対策に効果的なタグの1つとして知られています。
7.listタグ｜箇条書きでより分かりやすく
listタグは、箇条書きを設定するためのタグです。
順序がある場合はolタグ、順序がない場合はulタグを使用します。
例えば、以下のように記述します。
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</0l>
これによって、次のような箇条書きが表示されます。
1.項目1
2.項目2
3.項目3
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
これによって、次のような箇条書きが表示されます。
・項目1
・項目2
・項目3
こちらもaタグと同様に、適切に使用することでWebサイトの使いやすさが向上し、検索エンジンの評価が上がる可能性があります。
8.tableタグ｜表をつくる
tableタグは表を作成するためのタグです。
表の見た目を調整するために、thタグ、trタグ、tdタグの併用が見られます。
thタグは見出しセルを、trタグは行を、tdタグはセルを表します。
以下は、tableタグ、thタグ、trタグ、tdタグを使用した例です。
<table>
<tr>
<th>会社名</th>
<th>業種</th>
<th>設立年月日</th>
<th>売上高</th>
</tr>
<tr>
<td>株式会社ABC</td>
<td>製造業</td>
<td>2000年1月1日</td>
<td>1億円</td>
</tr>
<tr>
<td>株式会社XYZ</td>
<td>サービス業</td>
<td>2005年4月1日</td>
<td>5000万円</td>
</tr>
</table>
この例では、会社名、業種、設立年月日、売上高の4つの列を持つ表が作成されています。
最初の行は見出し行で、各列の見出しにはthタグを使用し、2行目と3行目はデータ行で、各列のデータにはtdタグが使用されています。
表を使用する場合は、表の見出しや列のデータを適切に記述することが重要です。また、表の見た目はCSSを使用して調整することができます。
9.strongタグ・bタグ｜文章を強調する
strongタグとbタグは文章を強調するために使用されるタグです。
<strong>タグと<b>タグは、見た目上は太字になりますが、その役割は異なります。<strong>タグは、強調したいテキストを囲むためのタグで、検索エンジンにとっては重要なキーワードを示すサインとして扱われます。
一方<b>タグは、テキストを太字にするためのタグで、単に見た目を変えるだけで検索エンジンには影響しません。つまり、<strong>タグはSEO対策に重要な役割を果たすのに対して、<b>タグは見た目を変えるだけの役割を持っています。
strongタグは、ニュース記事の見出しや商品の特長など文章の重要度を示すために使用されます。strongタグの使い方は以下の通りです。
<strong>strongタグの使い方</strong>
strongタグは、文章内で特に重要な部分を強調するために使用されます。例えば次以下は商品の特長を表す部分を強調する場合です。
<p>この商品は<strong>とても人気があります</strong>。</p>
以下のように表示されます。
この商品はとても人気があります。
このようにstrongタグを使用することで、ユーザーにとって重要な情報を強調することが可能です。
またbタグは、見た目を強調するために使用されます。例えば、単語やキーワードを強調する際に見られるのです。
<b>bタグの使い方</b>
例えば、次のような文章では、商品がお得であることを強調するためにbタグが使われています。
<p>この商品は<b>とてもお得</b>です。</p>
以下のように表示されます。
この商品はとてもお得です。
このようにbタグを使用することで、読者の注意を引きやすくすることができます。
10.pタグ｜段落の設定して文章を読みやすく
pタグはWebページ上で段落を設定するためのタグです。
文章を読みやすくするために使用され、Webページ作成において重要な役割を担っています。
pタグは、開始タグ<p>と終了タグ</p>で囲まれた部分に、段落のテキストを記述します。
<p>これは段落です。</p>
<p>これは別の段落です。</p>
pタグを設定しない場合は下記のように表示されてしまいます。
これは段落です。これは別の段落です。
pタグを適切に使用することで、Webページの可読性を高めることができます。例えば、長いブログ記事などで、本文を段落ごとに区切って読みやすくしている場合、pタグを使用しましょう。
検索エンジンはWebページのコンテンツを解析するときに、文章の構造を読み取っています。pタグを適切に使用することで、文章の構造を明確にして検索エンジンの解析をサポートし、評価アップに繋げられるかもしれません。
11.brタグ｜改行
brタグは文章内で改行を設定するためのタグです。
brタグは開始タグと終了タグが存在しない空要素となり、 “という形式で記述します。
brタグを使用することで、文章をより読みやすく整形することができます。
例えば、以下のように使用することが可能です。
<p>この文章は改行されません。</p>
この場合、brタグを使っていないので改行されません。
<p>この文章は
改行されません。</p>
例えば、上記のようにしてもbrタグを使っていないので同様に改行されません。
改行を設定しなかった場合は、Webページ上では「この文章は改行されません。」という一行の文章が表示されます。
しかし、改行を設定することで、Webページ上では「この文章は」と「改行されません。」の間に改行が入り、より読みやすくなります。
<p>この文章は<br>改行されます。</p>
下記のように表示されます。
この文章は
改行されます。
適切にHTMLタグを使用することで、Webページをより見やすく、読みやすいものにすることができるのです。ただし、brタグを使用する際には、過剰な改行を設定しないように注意しましょう。
12.blockquoteタグ・qタグ：文章の引用
HTMLには文章内で引用された部分を示すため、blockquoteタグやqタグが用意されています。これらのタグを使い引用された部分を適切に示すことで、読み手にとって文章の意図を理解しやすくすることができます。
blockquoteタグ
blockquoteタグは、長い引用文に使用されます。以下は、blockquoteタグの記述例です。
<blockquote>
<p>引用文</p>
<cite>引用元</cite>
</blockquote>
引用元を記述する場合は、<cite>タグを使用してください。以下は、引用元を含めたblockquoteタグの記述例です。
<blockquote>
<p>引用文：シンプルなしくみで価値あるものを再現する</p>
<cite>引用元：Hub Works</cite>
</blockquote>
以下のように表示されます。
引用文：シンプルなしくみで価値あるものを再現する
引用元：Hub Works
qタグ
qタグは、短い引用文に使用されます。以下は、qタグの記述例です。
<p>これは<q>引用文</q>です。</p>
以下のように表示されます。
これは”引用文”です。
短い引用文を設定する場合は、<q>タグを使用してください。
引用を適切に示すことで、文章の意図を読み手に伝えることができます。適切にHTMLタグを使用して、分かりやすく読みやすいWebページを作成し、検索エンジンの評価アップに繋げていきましょう。
まとめ
ここまでHTMLの基本構造と、SEO対策に役立つHTMLタグ12種類について解説してきました。
HTMLタグを正しく使用することで、検索エンジンからの評価を高め、検索結果での上位表示を狙うことができます。Webページを作成する際は、正しいHTMLタグの使用が大切ですので、ぜひこちらの記事を参考に実践してみてください。
株式会社HubWorks マーケティング部 2021年よりインターネット広告代理店に入社し、月間数億規模の広告運用を経験。 2022年に株式会社Hub Worksに入社しマーケティング担当者として、ウェブ広告やSEOなどの集客、 記事やホワイトペーパー作成などのコンテンツ制作業務に従事。
