SEO対策に取り組むとき、「HTMLは専門知識が必要で難しそう」と感じてしまう方も多いのではないでしょうか。
確かにHTMLはページの骨組みをつくる言語であり、タグの選び方や使い方を誤るとレイアウト崩れなどの不具合につながることもあります。
しかし、SEOに効果的とされるHTMLタグはごく一部で、正しく使えば初心者でも安心して活用できます。
titleやhタグ、altタグといった基本を押さえれば、検索エンジンにページ内容を正確に伝えられるだけでなく、ユーザーにも読みやすいページを実現できます。
本記事では、SEO対策に欠かせないHTMLタグの基本的な書き方から応用的な活用法までを分かりやすく解説していきますので最後までご覧ください。
- 目次
HTMLとは？
HTMLとは、ページを作成するための言語です。
ページには画像やテキストがレイアウトされていますが、すべてはHTML言語の指示どおりに表示されています。
HTML言語では、「タグ」で命令がなされます。始まりのタグと終わりのタグでテキストを囲み、レイアウトを整えます。タグの選択や使い方を間違ってしまうと、表示されない、レイアウトが崩れるなど、不具合が生じます。
HTML言語が開発された当初は、タグを直接打ち込むことで、ページは作られていました。現在では、HTML言語を理解していなくても、ソフトやアプリを利用することで、簡単にページが作れるようになっています。
そのため、HTMLについて知識に乏しくても、WebやSNSなどの情報担当となる方も少なくありません。ですが、SEO対策を行う際、以前ほどではなくても、HTMLタグを意識した対策が必要とされることがあります。
HTMLに苦手意識を持つのは、以下の通りです。
- 「レイアウトが崩れてしまうかもしれない」
- 「崩れてしまったら元に戻せない」
- 「プログラムなどに不具合がでるのではないか？」
と、不安に思っているからではないでしょうか。
SEO対策に有効とされるHTMLタグはごく一部であり、注意深く行えば問題のない程度です。タグは日本語ではなくアルファベット表示ですが、パターンを知れば誰でも問題なく使いこなせるでしょう。
今までHTMLを避けてきた方も、これを機にぜひトライしてみてください。
HTMLのタグはSEO対策に有効か？
SEO対策においてHTMLタグの設定は有効といえます。
その理由は、検索エンジンのクローラーがHTMLタグを読み取ってサイトの情報を収集しているためです。
現在のSEOは、CWV（コアウェブバイタル）やMFI（モバイルファーストインデックス）といった、ユーザーの利便性を重視した対策が評価されています。つまり、ユーザーの目に留まりやすい「titleタグ」や「h1タグ」などを適切に設定することは、SEOにおいても有効であると考えられるのです。
その際、SEOで上位表示を狙いたいからといってむやみに対策キーワードを詰め込むことはしないように注意してください。一昔前のSEOであれば有効であったかもしれませんが、現在のSEOではその手法は通用しません。
ユーザーへ適切に内容を伝えることを優先し、その中で自然にキーワードを入れられるように工夫することが大切です。
SEO対策に外せない8つのHTMLタグの基本的な書き方と使い方
HTMLタグといってもその種類は様々ですが、ここではSEO対策において外せない基本のものをご紹介します。
titleタグ
titleタグは、ページそのもののタイトルにあたる部分です。
検索エンジンの結果に表示されるページのタイトルは、titleタグ内に記載された内容になります。
ページの表紙であり、顔にあたる部分のため、しっかりとページの内容を表現する言葉を選びましょう。titleタグ内にキャッチーな言葉が入れば、訪問者数アップにも繋がります。
ポイントは、以下の3点です。
- 文字数が長過ぎず35文字程度まで
- サイトの特徴に合わせたキーワードを盛り込む
- ファーストビューの内容に合わせる
ただし、以下の2点などには気をつけましょう。
- タイトルと内容がかけ離れている
- タイトルにキーワードを詰め込み過ぎて長い
▼ 記載方法
<title>ここに題名</title>
▼ 記載方法
<title>ここに題名</title>
metaタグ
metaタグは、<head>～</head>内にページの概要について記載されたものです。
公開ページでは確認できませんので、記載漏れに注意しましょう。metaタグにはdescriptionとkeywordがあり、descriptionは検索された際、タイトルの下に内容として紹介されます。
ポイントは、以下の2点です。
- 120文字程度にまとめること（長すぎると途中で表示が切れるため）
- ページに内容を的確に表すこと
Keywordは、検索されたいキーワードを何点か記入することができます。
以前はSEOに重要な項目でしたが、内容と異なるキーワードを設定する悪用が増えたこと、検索エンジンがページの内容を正しく把握できるようになったことなどから、現在ではSEO対策効果は無くなっています。
ただし、設定する意味が全くないわけではありませんので、適切に設定されていれば削除する必要はありません。
▼ 記載方法
<meta name="description" content="ここにテキスト">
hタグ
hタグは見出しを表します。
h1は大見出し、h2は小見出し、h3は孫見出しというように数字が上がるほど見出しのレベルは低くなります。
h1は大見出しのため、デフォルト設定では目立つよう文字は大きく太字になっています。
見出しに狙ったキーワードを設定することは、SEO対策に重要です。
ポイントは、以下の4点などがあります。
- h1タグは必ず設定すること
- タグはh1から数字を飛ばさず順番を守ること
- 文字サイズの強調目的にhタグは利用しない
- 見出しは内容に合ったもので簡潔に
▼ 記載方法
<h1>大見出し</h1>
<h2>小見出し</h2>
aタグ
aタグでは、テキストや画像にリンクを設定します。
他ページの他、ページ内リンクも可能であり、設定することでサイト内のリンクを集約化し、ユーザーにとっても利便性のよいページとなります。
▼ 記載方法
<a href="リンク先のURL">リンクテキスト</a>
この時に、target属性をさらに設置すれば、リンク先のページを同じ窓で開くのか、もしくは新たな窓に表示するのかも設定可能です。
リンク先のページがSEOの評価を受けたくない場合は、「rel=”nofollow”」を使用しましょう。
▼ 記載方法
<a href="リンク先のURL" rel="nofollow">リンクテキスト</a>
アンカーテキストの最適化
aタグを使う際は、リンクテキスト（アンカーテキスト）の書き方にも注意しましょう。
SEOにおいては「こちら」「詳しくはこちら」といった表現よりも、リンク先の内容を端的に示す言葉を使用することが推奨されています。
例えば、サービス紹介ページへのリンクであれば「サービス詳細はこちら」ではなく「○○サービスの詳細ページ」と表現することで、検索エンジンにとってもリンク先の内容が理解しやすくなります。
ユーザーにとっても、クリック前にリンク先の情報が分かるため利便性が高まります。
また、アンカーテキストにキーワードを自然に含めることは効果的ですが、不自然に繰り返すとスパム判定される可能性があります。文脈に沿った自然な表現を心がけることが大切です。
altタグ
altタグは、画像や動画にテキスト情報を追加するものです。
▼ 記載方法
<img src="images/01.gif" alt="画像の内容テキスト" width="200" height="150">
となり、imgタグ内に設置されます。
ちなみに「width」は画像の幅、「height」は画像の高さを示しています。
altタグを画像に設定していると、読み上げソフトでも内容が理解できたり、表示速度が遅い時や画像のリンク切れのときにも何の画像があるのかがわかります。
検索エンジンは、クローラーが巡回することでサイトの内容を確認していますが、画像や動画に関しては中身を確認することができません。
altタグを設定しておけば、クローラーはテキストから中身を知ることができます。ただし、画像と関係のない言葉や内容と無関係の画像ファイルに設定しないよう気をつけましょう。
無関係のテキストを張り付けても、評価されるものでは決してありません。それどころか場合によってはネガティブ要因にもなり得ます。
リストタグ
リストタグは、文章を箇条書きにする際に利用します。
リストタグにも種類があり、
▼ 記載方法
順番を付けたい場合は<ol>を使います。<ol>
<li>箇条書きの内容</li>
<li>箇条書きの内容</li>
<li>箇条書きの内容</li>
</ol>
▼コンテンツ上の表記
- 箇条書きの内容
- 箇条書きの内容
- 箇条書きの内容
▼ 記載方法
順不同の場合は<ul>を使います。<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>
▼コンテンツ上の表記
- りんご
- みかん
- ぶどう
リストタグを使うメリットは、ユーザーが読みやすい、ページ制作時にリスト化が容易になるほか、検索エンジンのクローラーも「重要な部分」と判断するため、SEO対策にも有効です。
リストタグは、あえてインデントを設定することで、見た目にもリストと分かるように設定されています。SEO対策としてはリストタグの使用をおすすめします。
pタグ
pタグのpはParagraphの略で、段落を表します。
▼ 記載方法
<p>ここにテキスト文。</p>
というように、<p></p>でテキストを挟み使用します。HTML言語の中でも、最も利用されるタグであり、テキストの他、画像の前後にも利用します。
一般的なブラウザで表示される際、段落と段落の間は一行分改行されます。
場合によっては改行の幅が広すぎると、pタグではなく改行のbrタグを利用されることもありますが、検索クローラーに正しくページ内の構造を理解されるためにも、段落が分かれる際はpタグを使うようにしましょう。
デフォルトのpタグの改行幅が気になる場合は、細かく設定することも可能です。
また、リストタグもpタグと混同されがちです。見た目の好みで使い分けるのではなく、リストなのか、段落なのか、中身に合わせて選択しましょう。
strongタグ
strongタグは、テキストを強調したい際に利用します。
▼ 記載方法
<p>文章内で<strong>強調したい</strong>ところに使います。</p>
文章内で強調したいところに使います。
ページ上では太字になり強調され、何を伝えたいのかが分かりやすくなります。
同じく太字になるものにbタグがあります。見た目は同じですが、ユーザビリティを高めたい場合はstrongタグを、単純に太文字にしたい場合はbタグという風に使い分けてください。
さらにSEO対策にこだわりたい場合に有効な2つのHTML
HTMLタグを正しく使いこなすことは、ユーザーにとっても見やすいページになるだけでなく、検索エンジンクローラーにとっても巡回しやすく、内容を確認しやすいメリットがあります。
基本的なタグはもちろん、さらに細部にこだわったSEO対策を行いたいという場合は、以下のタグも覚えておきましょう。
構造化データ
構造化データ（Schema.org）は、検索エンジンにページの内容をより正確に伝えるためのマークアップです。
正確にはHTMLではありませんが、HTML内に記述して使うコードの一種として把握しておきましょう。
通常のHTMLタグでは「見出し」や「段落」といった構造しか伝えられませんが、構造化データを加えることで「これは商品情報」「これはレビュー」「これはFAQ」といった意味を検索エンジンに理解させることができます。
検索エンジンに正しく認識されると、検索結果にリッチリザルト（星のついたレビュー表示やイベント情報、FAQの展開など）が表示されやすくなり、クリック率の向上が期待できます。
構造化データはGoogleが公式に推奨している方法で、特に以下のようなケースで活用が有効です。
- 商品やサービスの詳細を検索結果にわかりやすく表示したいとき
- FAQページを検索結果に展開してユーザーの利便性を高めたいとき
- レシピやイベントなど、検索結果で強調表示が可能なジャンルを扱うとき
▼記載例（FAQページの場合）
“`html
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [{
“@type”: “Question”,
“name”: “構造化データとは何ですか？”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “検索エンジンにページの内容をわかりやすく伝えるためのマークアップです。”
}
}]
}
</script>
blockquoteタグ
blockquoteタグは「引用」を表す際に利用します。
他サイトに記載されている内容を自社サイトに掲載する際は、必ずblockquoteタグが必要です。
▼ 記載方法
<blockquote cite="引用元URL">
<p>引用コンテンツ</p>
引用元：<cite><a href="引用元URL">ページタイトル</a></cite>
</blockquote>
引用であることが分かるように、引用元のタイトルにリンクも設定しましょう。
引用とせず、コピーすることはモラルの問題以外にも、検索エンジンクローラーに重複サイトとみなされる危険があります。
Canonicalタグ
Canonical（カノニカル）タグはあまり聞き慣れないHTMLタグの1つかもしれませんが、サイトを運営する上で知っておくと便利です。
Canonicalタグは、サイト内で重複しているページを取捨選択し、評価を集約したい時に利用します。
サイトが大きくなると、似たような内容のコンテンツが発生することがあります。また、色違いの商品紹介を行う際は、必然的に内容が似てしまいます。
この時、どのページを検索エンジンクローラーに評価してもらいたいのか、Canonicalタグの利用で設定可能です。
▼ 記載方法
<link rel="canonical" href="評価されたいページのURL">
このように、評価されたいページのURLを示すことを、Google公式ではURLの正規化と定義しています。
Canonicalタグが必要とされるパターンには、以下の5点などがあります。
- 同サイトで「httpとhttps」、「wwwの有無」がある
- 商品の色違いやモデル違いごとにURLが分かれている
- PC版とスマートフォン版でURLが異なる
- 他サイトに自社の記事が転載されている
- 計測用のパラメータがURLの末尾につく
「httpとhttps」、「wwwの有無」はサイトの仕組み上自動生成されることがあるため、Canonicalタグを活用しましょう。
計測用のパラメータを設定している場合、同じサイトでもURLの末尾が異なることがあります。人の目には同じでも、検索エンジンクローラーにとっては別物とみなされてしまいます。
その他、自社サイトの内容が他サイトの転載されている場合は、他サイト側にCanonicalタグの利用を依頼しましょう。同じく、自社サイトで他サイトを転載する際も忘れず設置しましょう。
注意点としては、以下などがあります。
- 評価されたいページのURLは必ず絶対パスにすること
- 指定先を全て同じにしないこと
- URLを間違えないこと
URLを絶対パスにすることで正規化のリンクミスを防ぎましょう。絶対パスにすることは、Google公式からも推奨されています。
また、指定先を全て同じにしてしまうと、サイト内に1ページしかないと思われてしまいます。もちろん、URLを間違ってしまうと、SEO対策にはならないので注意しましょう。
【Q&A】SEOに関係するHTMLの質問
SEOとHTMLの関係性について学んでも、実際に作業を行うと「この場合はどうしたらいいのか？」と迷う場面が出てきます。
ここでは、特に初心者からよく寄せられる質問をまとめました。基本的な考え方を理解しておくことで、実務でのトラブルを防ぎ、安心してHTMLタグを扱えるようになるでしょう。
Q：SEO効果を高めるために「すべてのタグ」にキーワードを入れた方が良いですか？
A：いいえ。
むやみにすべてのタグにキーワードを入れることは逆効果になる可能性があります。
titleやh1といった主要タグに自然に含めることは有効ですが、altタグやpタグに無理やり詰め込むと、不自然な文章になりユーザー体験を損ないます。
検索エンジンは「キーワードを含めた回数」よりも「文脈に沿って分かりやすく書かれているか」を重視します。
ユーザーに伝わりやすい表現を優先し、その上で自然にキーワードを配置することが最も効果的です。
Q：meta keywordsタグは今でもSEOに必要ですか？
A：meta keywordsタグは、現在のGoogle検索においてはSEO効果がほぼないとされています。
以前は重要視されていましたが、乱用やスパムが増えたため、主要な検索エンジンはランキング要因として使用していません。
ただし、内部管理や一部の検索エンジンでは参照される場合があるため、無理して削除する必要はありません。
SEO目的であれば、meta descriptionを適切に設定し、検索結果でユーザーがクリックしたくなるような要約文を工夫する方が有効です。
Q：画像をたくさん使う場合「altタグ」はどこまで設定すべきですか？
A：基本的にはすべての画像にaltタグを設定することが推奨されます。
altタグは検索エンジンに画像の内容を伝えるだけでなく、画像が表示されない場合の代替テキストとしても機能するからです。
ただし、装飾目的のアイコンやデザイン要素など、意味を持たない画像には空のaltを指定すれば問題ありません。
SEOの観点では「内容を説明する必要がある画像」に対して、正確かつ自然なaltテキストを付けることが大切です。
Q：構造化データを導入するとSEOでの検索順位が上がりますか？
A：構造化データは直接的に順位を上げる要素ではありません。
検索エンジンにページの内容をより正確に伝える補助的な仕組みであり、評価の対象はあくまでもコンテンツの質やユーザー体験です。
ただし、構造化データを導入することで検索結果にリッチリザルトが表示され、クリック率が向上するケースは多くあります。
間接的にはSEO効果につながるため、コンテンツの種類に応じて適切に導入することが推奨されます。
Q：内部リンクは何本くらい設置するのが理想ですか？
A：内部リンクの本数に明確な上限はありません。
大切なのは「ユーザーにとって関連性があり、便利に移動できるかどうか」です。
1ページに何十本も無関係なリンクを並べるのは逆効果ですが、関連性の高いページ同士を適切に結びつけることはSEOにもプラスになります。
特に、重要なページや収益に直結するページへは、サイト内から複数の自然なリンクを張ると評価が高まりやすい傾向があります。
リンク数を意識するよりも「情報の流れがスムーズか」を優先してください。
まとめ｜SEO対策に関係するHTMLをうまく活用しよう
SEO対策を行う上で、HTMLタグを意識することは大切です。
ページの見た目だけでなく、HTMLタグのチェックも行いましょう。ただし、単純にタグを濫用し、キーワードを不自然に差し込むことではありません。
以前はそのような手法が通用したこともありましたが、現在の検索エンジンクローラーはさらに進化しているため、内容がそぐわないと効果がないばかりか、評価を下げられる危険もあります。
HTMLタグから考えるSEO対策は、ユーザーと検索エンジンクローラーにとって価値のあるコンテンツかどうかです。中身のあるページをHTMLタグで整えて正しく表示することが、もっとも効果を期待できるでしょう。
GMOインターネット株式会社では、SEOに関する相談を無料で承っています。
20,000社以上のサイト分析から得た圧倒的なノウハウを武器に、SEOのお悩みを解決へと導きますので、「なかなか順位が上がらない…」と苦戦しているWeb担当者様がいらっしゃれば、お気軽にご相談ください。
