DOWNLOAD 
SEOに効果的なHTMLタグ12選！書き方を解説
「HTML」は、SEOやWEBサイト運営、プログラミングで目にする機会が多い用語です。しかし、SEOではどのような点を意識してHTMLを記述すれば良いのかよく分からないのではないでしょうか？本記事では、HTMLの概要からSEOでHTMLタグが重要な理由、効果的なHTMLタグについて、初心者にも分かりやすく解説します。
HTMLとは？
「HTML」とは、WEBページのドキュメントを記述するために開発されたマークアップ言語です。ハイパーテキストマークアップ言語を意味するHyperText Markup Languageのか足ら文字を取って、HTMLと呼ばれています。
現在用いられているWEBページの大半は、HTMLにより制作されたものです。WEBページの中でテキストや画像、リスト、表、段落などがどのような役割を持っているのかについてHTMLタグを使って記述することを、マークアップと言います。
マークアップを行うことでそれぞれの箇所がどのような意味を持つ要素なのかが明確になるため、WEBブラウザを通してそれらの文字や文章を理解できるようになります。
また、Googleなどの検索エンジンがWEBページをクロールする際にも、ページの構造やドキュメントの内容を理解しやすくなります。
HTMLを深く理解した上で効果的な使い方をすることは、検索順位を向上させるためのSEO内部施策を行う際にも非常に重要です。
現在、HTMLの仕様はW3Cによって策定されていますが、最近は後継規格であり厳密な記述を必要とするXHTMLが、よりSEOとして有効であることから置き換えが進められています。
SEOでHTMLタグが重要な理由
SEOでHTMLタグが重要な理由は、検索上位表示するためには検索エンジンに正しく情報を伝える必要があり、ユーザーにコンテンツ内容を見やすく伝えなければコンバージョンが獲得できないからです。
検索エンジンに正しく情報を伝えるため
SEOでHTMLタグが重要な理由は、検索上位表示するためには検索エンジンに正しく情報を伝える必要があるからです。
検索エンジンのアルゴリズムはページに含まれたキーワードからページのテーマを読み取っていますが、特にページタイトルや見出しにどのようなキーワードが含まれているかは強く影響しています。
HTMLタグを使用しないと、検索エンジンはどのテキストがページタイトルなのか、見出しなのかが分かりません。一方、特定のテキストにtitleタグを使用すれば、そのテキストがページのタイトルだと検索エンジンへ伝えることができます。
また、Googleは画像ファイルの存在に気付いただけでは画像の意味を理解できませんが、画像にaltタグを使用すれば画像がどのような意味を持つのかも伝えることが可能です。
上記のように、テキストデータだけでは伝えきれないようなことでも、HTMLタグを使用することで検索エンジンへ伝えることができるようになります。
ユーザーにコンテンツ内容を見やすく伝えるため
SEOでHTMLタグが重要な理由は、ユーザーにコンテンツ内容を見やすく伝えなければ、ユーザーの利便性を損ない、コンバージョンが獲得できない可能性が高くなるからです。
例えば、タイトルも見出しもなく改行もされていない、テキストが並んでいるだけのページだと、誰が見ても読みづらいページになってしまうでしょう。
HTMLタグを使用することで、どの箇所がタイトル・見出し・本文なのかを区別して表示することができ、UX/UI向上につながります。また、数値データについては、すべてをテキストだけで表記するより、表やリストを作成した方が内容を把握しやすくなるでしょう。
さらに、画像にaltタグを使用することで画像の意味を記述しておけば、目が不自由なユーザーが翻訳機の読み上げ機能を利用する場合に、画像のイメージを伝えることも可能です。
上記のように、ページにHTMLタグを使用することで、ページを閲覧するユーザーの利便性を高めることができます。ただし、HTMLに記述ミスがあれば適切に表示されず、かえって読みづらくなってしまう恐れもあるため、注意して使用することが重要です。
SEOに効果的なHTMLタグ12選
▼ SEOで特に利用頻度が高いHTMLタグは以下の通りです。
- titleタグ
- meta descriptionタグ
- hタグ
- aタグ
- altタグ
- strongタグ
- bタグ
- emタグ
- tableタグ
- リストタグ
- pタグ
- canonicalタグ
それぞれのタグを使用する際のポイント、使用例をご紹介します。
titleタグ
「titleタグ」とは、ページの概要を検索エンジンとユーザーへ伝えるHTMLタグです。titleタグに記述したテキストは検索結果に表示されるため、ページのクリック率に大きく影響します。
titleタグは検索エンジンが最も重視するタグとも言われており、上位表示させたいキーワードを選定してタイトルに含めることが重要です。
【titleタグの記述例】
<head>
<title> HTMLとは？SEOにおけるHTMLの効果的な使い方</title>
</head>
ポイント
▼ titleタグを使用する際のポイントは以下の通りです。
- ページの概要を簡潔に記述する
- 他のページと同じテキストを使用しない
- 32文字以下で設定する
- キーワードを詰め込まない
- クリックしたくなるような魅力的なテキストを記述する
- ターゲットユーザーを意識する
良い例・悪い例
【titleタグに記述するテキストの良い例】
・SEOとは？SEO対策の基本と上位表示のポイントを解説
【titleタグに記述するテキストの悪い例】
・SEO・検索上位表示・キーワード設定・内部対策・外部対策
・SEO対策を行う上での基本と上位表示させるポイントから、Googleの基本理念と評価の仕組みまで初心者にも分かりやすく解説します。
・SEOとは？
titleタグについては別記事で詳しく解説しているので、興味がある方は以下ページをご確認ください。
meta descriptionタグ
「meta descriptionタグ」とは、WEBページの概要を検索エンジンやユーザーに伝えるためのHTMLタグです。
HTMLソースの<head>と</head>の間に記述します。
【meta descriptionタグの記述例】
<head>
<meta name=”description” content=”ページの概要文” />
</head>
meta descriptionタグで記述したページの概要文は、検索結果のページURL・タイトルの下に表示されます。ただし、必ず表示されるわけではなく、本文を参考に検索エンジンが作成したテキストが表示される場合もあります。
ポイント
▼ meta descriptionタグでページの概要文を記述する際のポイントは、以下の通りです。
- 複数のページで同じテキストを記述しない
- キーワードを詰め込み過ぎない
- 記号や絵文字を使用しない
- 設定から反映までには時間がかかる
良い例・悪い例
【良いdescriptionの記述例】
SEO対策の中で、 自分でも出来る内部対策の基本といえば「meta description（メタディスクリプション）」の最適化です。ここでは、基本的なSEO内部対策であるmeta descriptionタグの最適化の重要性や設定ポイントについて、SEO初心者の方にもわかりやすく解説します。
【悪いdescriptionの記述例】
| 悪い記述例 | 理由 |
| SEOでお悩みなら弊社にお任せください！ | ページの概要説明になっていない |
| SEO・検索上位表示・アクセス数アップ・キーワード設定・コンテンツ制作・内部対策・外部対策 | キーワードを詰め込んだだけになっている |
ディスクリプションタグについては別記事で詳しく解説しているので、興味がある方は以下ページをご確認ください。
hタグ
「hタグ」とは、ページの見出しを設定するHTMLタグです。h1～h6まで6種類のhタグがあり、数字が小さいほど重要性が高いことを意味します。
入れ子構造で使用する決まりになっており、数字が大きいhタグから順番に使用する必要があります。
ポイント
▼ hタグを記述する際のポイント（注意点）は以下の通りです。
- h1タグはWEBページの最上部に記述する
- 簡潔なテキストで記述する
- ターゲットキーワードを含める
- 他のページと同じテキストを使用しない
- h1タグの文字数は35文字以内にする
- キーワードを詰め込まない
- hタグをテキストの強調・装飾・フォントサイズ変更の目的で使用しない
- 過度にh1タグを利用しない
- 文字サイズを不規則に変えない
- 本文と関係がないテキストをhタグに設定しない
良い例・悪い例
【良いhタグの記述例】
<body>
<h1>○○○○</h1>
<h2>××××</h2>
<h3>△△△△</h3>
<h3>△△△△</h3>
</body>
【悪いhタグの記述例】
<body>
<h1>○○○○</h1>
<h3>△△△△</h3>
<h2>××××</h2>
<h2>××××</h2>
</body>
hタグについては別記事で詳しく解説しているので、興味がある方は以下ページをご確認ください。
aタグ
「aタグ」とは、href属性でリンク先のURLを指定することでWEBページへのリンクを作成する際に使用するHTMLタグです。テキストだけでなく、画像に対してもaタグでリンクを作成できます。
【aタグの記述例】
<a href=”https://white-link.com/sem-plus/a-href/”>リンクタグとは？画像や別タブで開く用途別の適切な作り方</a>
ポイント
▼ aタグを使用する際のポイントは以下の2点です。
- 絶対リンクと相対リンクを使い分ける
- リンク先のWebページを別タブで開くかどうか
外部サイトへのリンクを作成する場合には、絶対リンクのURLを記述する必要があります。一方、サイト内の別ページへのリンクを作成する場合は、相対リンクでも問題ありません。
また、target属性を加えることで、ユーザーがリンクをクリックした際に、別タブでページが開くようにするか、タブを変えずにそのままリンク先のページが開くかを指定することも可能です。
リンクタグについては別記事で詳しく解説しているので、興味がある方は以下ページをご確認ください。
altタグ
「altタグ」とは、WEBページに設置された画像が、どのような意味があるのかを検索エンジンへ伝えるHTMLタグです。
また、視覚障害者に対し画像の情報を音声で提供する際にも利用されます。
【altタグの記述例】
<img src=”画像のURL” alt=”画像の説明”>
ポイント
▼ altタグを使用する際のポイントは、以下の3つです。
- 画像の内容に合ったテキストを記述する
- キーワードを詰め込まない
- 装飾を目的とした画像は空白で構わない
altタグを使用する本来の目的は検索エンジンへ画像の内容を伝えることであり、意図的に検索順位を操作することではありません。
画像とは関係のないキーワードを記述したり、キーワードを詰め込んだりすると、検索エンジンからペナルティを受ける恐れがあります。
また、アイキャッチ画像や背景画像、ラインマーカーといった、装飾を目的とした画像には、altタグでテキストを記述する必要はありません。「alt=””」といったように空白のままで記述します。
alt属性・altタグについては別記事で詳しく解説しているので、興味がある方は以下ページをご確認ください。
strongタグ
「strongタグ」とは、テキストを太字で表示させるHTMLタグです。
【strongタグの記述例】
<p>
「strongタグ」とは、<strong>テキストを太字で表示させる</strong>HTMLタグです。
</p>
ポイント
strongタグを使用する際のポイントは、段落の中でも特に重要な箇所に対して使用することです。一文すべてに対してstrongタグを使用したり、何回も使用したりすると、どの箇所が重要なのか正しく伝わらない恐れがあります。
また、strongタグを見出しで使用すると、過剰な強調とみなされてしまうかもしれません。
bタグ
「bタグ」とは、strongタグと同様にテキストを太字で表示させるHTMLタグです。
【bタグの記述例】
<p>
「bタグ」とは、<b>strongタグと同様に</b>テキストを太字で表示させるHTMLタグです。
</p>
ポイント
bタグを使用する際のポイントは、strongタグとの使い分けです。
bタグはページを閲覧するユーザーの注意を引くために使用し、strongタグは段落の中で特に相対的に重要なテキストに対して使用します。
emタグ
「emタグ」とは、テキストの一部を強調させる際に使用するHTMLタグです。強調を意味するemphasisを略してemタグと呼ばれています。
【emタグの記述例】
<p>
「emタグ」とは、テキストの一部を
<em>強調させる際に使用する</em>
HTMLタグです。
</p>
ポイント
emタグを使用する際の注意点は、テキストの装飾を目的として使用しないことです。
emタグを使用したテキストは主に斜体で表示されますが、ユーザーが使用するブラウザや文字フォントによっては斜体で表示されないケースもあります。
tableタグ
「tableタグ」とは、テキストを表形式で表示するHTMLタグです。
<tr>・<th>・<td>の3つのタグと組み合わせて表を作成します。tableタグを使用することで強調スニペットに表示されやすくなります。
▼ それぞれのタグの意味は以下の通りです。
| タグ | タグの意味 |
| table | 表全体を定義する |
| tr | 行を定義する |
| th | 見出しを定義する |
| td | データを定義する |
【tableタグの記述例】
<table>
<tr>
<th>タグ</th>
<th>タグの意味</th>
</tr>
<tr>
<td>table</td>
<td>表全体を定義する</td>
</tr>
<tr>
<td>tr</td>
<td>行を定義する</td>
</tr>
<tr>
<td>th</td>
<td>見出しを定義する</td>
</tr>
<tr>
<td>td</td>
<td>データを定義する</td>
</tr>
</table>
ポイント
tableタグを使用する際のポイントは、設定後にWEBページ上で正しく表示されているかを確認することです。
<tr>・<th>・<td>は混同しやすく、チェックしたつもりでも記述ミスが発生しやすいので、コードを確認するだけでなく、実際にWEBページ上でどのように表示されているか、レイアウトが崩れていないかを確認しておきましょう。
リストタグ
「リストタグ」とは、「ul」「ol」「li」の3つのタグを使用することで、テキストを箇条書きで表示させるHTMLタグです。リストタグを使用することで、tableタグと同様に強調スニペットに表示されやすくなります。
順序のないリストを作成する場合は「ul」と「li」を、順序を付けたリストを作成する場合は「ol」と「li」を組み合わせて使用します。
【リストタグの記述例】
<ul>
<li>titleタグ</li>
<li>meta descriptionタグ</li>
<li>hタグ</li>
<li>aタグ</li>
<li>altタグ</li>
</ul>
▼ リストタグを使用することで、画面上では以下のように「・」が付いた箇条書きで表示されます。
- titleタグ
- meta descriptionタグ
- hタグ
- aタグ
- altタグ
「・」はCSSで変更することも可能です。
番号付きの箇条書きにする場合は、「ul」ではなく「ol」を使用します。
ポイント
リストタグを使用する際のポイントは、「ul」と「ol」を適切に使い分けることです。作業の手順をリストタグで表示する場合は、「ul」を使用するより「ol」を使用した方が、作業の順番が分かりやすくなります。
一方、箇条書きする情報に優先順位がなかったり、順番が前後しても問題がなかったりする場合、「ul」を使用しても問題はありません。
pタグ
「pタグ」とは、指定したテキストをひとつの段落として指定するHTMLタグです。段落を意味するparagraphを略してpタグと呼ばれています。
pタグを使用することで、指定したテキスト全体にalign属性を適用させることが可能です。
【pタグの記述例】
| 左寄せする場合 | <p align="left">テキストを左寄せにする </p> |
| 中央寄せする場合 | <p align="center">テキストを中央揃えにする </p> |
| 右寄せする場合 | <p align="right">テキストを右寄せにする </p> |
ポイント
▼ pタグを使用する際のポイントは以下の2つです。
- pタグの中にpタグを使用しない
- 改行するためにpタグを使用しない
pタグの中にpタグを使用してしまうと、ひとつの段落ではなく複数の段落になってしまいます。
【間違ったpタグの記述例】
<p>pタグの中にpタグを使用してしまうと、<p>ひとつの段落ではなく</p>複数の段落になってしまいます。</p>
<p>を使用した後に再度<p>を使用すると、<p>の手前に</p>が自動的に生成されてしまいます。<p>を使用したら、</p>を使って段落を閉じるようにしましょう。
また、同じ段落を改行する場合、pタグではなくbrタグを使用します。
【間違った改行の仕方】
<p>pタグの中にpタグを使用してしまうと、</p>
<p>ひとつの段落ではなく複数の段落になってしまいます。</p>
【brタグで改行する場合の記述例】
<p>
pタグの中にpタグを使用してしまうと、<br>
ひとつの段落ではなく複数の段落になってしまいます。<br>
</p>
canonicalタグ
「canonicalタグ」とは、検索エンジンに対して正規URLを指定するHTMLタグです。サイト内に存在する重複コンテンツを解消する、URL正規化を行うために使用します。
ただし、canonicalタグを使用したからと言って、Googleが必ず正規URLとみなすとは限りません。Google側の判断によっては、異なるURLが正規URLとみなされるケースもあります。
▼ canonicalタグを使用してURL正規化を行う主なケースは、以下の通りです。
- 同じURLでパラメータの有無がある場合
- PC用サイトとスマホ用サイトのURLが異なる場合
- 301リダイレクトの設定ができない場合
【canonicalタグの記述例】
<head>
<link rel=”canonical” href=”https://white-link.com/sem-plus/html/”>
</head>
<body>
</body>
正規URLに指定するURLは、絶対URLで記述する必要があります。
ポイント
canonicalタグを使用する際のポイントは、canonicalタグと301リダイレクトのどちらでURL正規化を行うべきかを確認することです。
例えば、httpsで始まるURLとhttpで始まるURLが存在している場合、canonicalタグと301リダイレクトのどちらでもURL正規化は可能です。
しかし、canonicalタグでURL正規を行った場合、ユーザーはどちらのページも閲覧することができます。httpで始まるURLは暗号化されずに通信が行われてしまうため、ユーザーが閲覧すると個人情報が漏えいしてしまうかもしれません。
httpで始まるURLを放置することでユーザーからの信頼を失う恐れがあるため、上記のケースではcanonicalタグではなく、301リダイレクトによるURL正規化がおすすめです。
canonicalタグについては別記事で詳しく解説しているので、興味がある方は以下ページをご確認ください。
SEOで覚えておきたいメタタグ
メタタグ（metaタグ）とは、WEBページの情報を検索エンジンへ伝えるHTMLタグです。
<head>タグと</ head>タグの間に記述する必要があります。メタタグを使って記述した内容はページに表示されません。
▼ Googleがサポートしている代表的なメタタグは以下の通りです。
- description
- robots
- googlebot
- noindex
- nofollow
▼ ここでは、SEOで使用する機会が多いメタタグ（metaタグ）として以下の2つをご紹介します。
- noindex
- nofollow
noindexタグ
「noindexタグ」とは、Googleに代表される検索エンジンに対し、ページをインデックスしないように要求するメタタグです。
CMSの管理画面やエラーページ、サンクスページなどのように検索画面に表示されたくないページや、重複コンテンツのように正規URLとして認識してもらいたくないページに対し、noindexタグを使用します。
ページへnoindexタグを使用しても、ユーザーがページを閲覧することは可能です。
重複コンテンツや低品質なコンテンツなど、Googleからの評価が低いページに対してnoindexタグを使用することで、高品質なページだけがGoogleから評価されるようになるため、サイト全体の評価も高くなります。
また、キーワードカニバリゼーションが発生している場合、noindexタグを使用することで解消できるかもしれません。
一方、Googleから高く評価されているページに対してnoindexタグを使用してしまうと、ページが評価されなくなるだけでなく、WEBサイト全体の評価も低下してしまう恐れがあります。
【noindexタグの記述例】
<head>
<meta name=”robots” content=”noindex” />
</ head>
noindexタグについては別記事で詳しく解説しているので、興味がある方は以下ページをご確認ください。
nofollowタグ
「nofollowタグ」とは、Googleに代表される検索エンジンに対し、リンク先のページへページ評価を受け渡さないように要求するメタタグです。
信頼できないサイトや低品質なサイトへリンクを貼ることで自サイトの評価が低下しないようにする場合や、自サイトと関連性が低いサイトへリンクを貼る場合などに、nofollowタグを使用します。
ただし、nofollowタグではクローラの行動を完全に制御できるわけではなく、あくまでも要求することしかできません。検索エンジンが必要だと判断した場合には、ページの評価が受け渡されるケースもあります。
つまり、競合サイトの評価を高めないようにするためにnofollowを設定するといった使い方は適切ではないということです。
【ページ内のすべてのリンクに対してnofollowを設定する場合の記述例】
<head>
<meta name=”robots” content=” nofollow”>
</ head>
【特定のリンクに対してnofollowを設定する場合の記述例】
<a href="【リンク先URL】" rel="nofollow">【アンカーテキスト】</a>
nofollowタグについては別記事で詳しく解説しているので、興味がある方は以下ページをご確認ください。
SEOに効果的なHTMLコーディング例
▼ SEOに効果的なHTMLコーディング例は以下の通りです。
<!DOCTYPE html>
<html>
<head>
<title>HTMLタグとは？</title>
<meta charset=""UTF-8"">
<meta name=""description"" content=""今回はHTMLタグについて紹介します。これからWEBサイトを作りたい方は是非ご覧ください"">
<meta name=""keywords"" content=""SEO,HTML,HTMLタグ,メタタグ"">
</head>
<body>
<h1>HTMLタグとは？</h1>
<p>HTMLタグはウェブページの構造や意味を定義する特殊なコードで、要素を示します。見出しや段落、リンク、画像などの表示や動作を指定します。</p>
<h2>最初に覚えるべきHTMLタグ</h2>
<p>HTMLタグを覚える為にまずは簡単なタグから覚えましょう。以下に<b>最初に覚えるHTMLタグ3つ</b>と<em>emタグ</em>を詳しく解説します。</p>
<ul>
<li>「hタグ」</li>
<li>「pタグ」</li>
<li>「aタグ」</li>
</ul>
<p>まずは<h1>〜<h6>タグについてみていきましょう。</p>
<a href=""https://sem-plus.com/h1/"">h1タグとは？</a>
</body>
</html>
SEOに効果的なHTMLタグの注意点
SEOに効果的なHTMLタグの注意点は、記述ミスがあると正しく表示されなくなるだけでなく、Googleへ正しい情報が伝えられず、結果としてSEOにも悪影響があるということです。
例えば、リンク先のページへの評価受け渡しを無効化する場合はnofollowタグを使用する必要がありますが、間違ってnoindexタグを使用してしまうと、検索結果に表示されなくなったり、Googleからの評価を受けなくなったりしてしまいます。
また、tableタグにミスがあれば、表のレイアウトが崩れるだけでなく、表の中に記述する情報同士の関係性をGoogleへ正しく伝えることができません。
目的に合ったHTMLタグを選択し、使用するHTMLタグの効果を理解したうえで、正しく記述することが重要です。
まとめ
今回は、HTMLの概要からSEOでHTMLタグが重要な理由、SEOに効果的なHTMLタグについて解説しました。
HTMLタグを適切に使用すれば、ユーザーの満足度を高めることができ、SEOにも効果的です。この記事でご紹介したHTMLタグの効果や記述例を確認し、サイトの評価を高めるようにしましょう。
この記事を書いたライター
SEO施策部
SEMを軸にSEOの施策を行うオルグロー内の一部署。 サイト構築段階からのSEO要件のチェックやコンテンツ作成やサイト設計までを一貫して行う。社内でもひときわ豊富な知見を有する。またSEO歴15年超のノウハウをSEOサービスに反映し、3,000社を超える個人事業主から中堅企業までの幅広い顧客層に向けてビジネス規模にあった施策を提供し続けている。
RECOMMENDED ARTICLES
ぜひ､読んで欲しい記事
