今回はSEO対策に効果的なHTMLタグの説明をします。
普段何気なく使っているHTMLタグは正しく使えなければSEOに大きな影響を与えてしまいます。
これらを意識するのとしないのでは全く違うので記事を読んで知識を身につけましょう！
SEOで最重要なtitleタグ（タイトルタグ）
titleタグ（タイトルタグ）にはコンテンツの内容を表す役割を担っており、検索結果の順位を左右する非常に重要なHTMLタグです。
また、設定したタイトルは検索結果画面に表示され、ユーザーのクリック率に大きく影響します。
titleタグを使ったHTMLの書き方は下記になります。
HTML
<title>ここにサイトのタイトルが入ります。</title>タイトルタグのSEO評価を高めるポイント
タイトルタグのSEO評価を高めるポイントが下記の２つです。
- 前方にキーワードを集めて検索クエリとの関連性を強調する
- 簡潔にしユーザーに興味を持たせるタイトルにする
上記の内容を意識しながらSEO評価を高められるタイトルを設定しましょう。
さらに詳しくSEO評価に関するキーワードの設定方法を下記にまとめているのでご覧ください！
SEOに効果的なhタグ(見出しタグ)
hタグ(見出しタグ)とは言葉の通りページのタイトルや段落の見出しを設定するタグのことです。
サイト閲覧者にページの内容を伝えやすくするのはもちろん、検索エンジンロボットに正しく理解させ、ランキングを向上させるなどSEO対策に欠かせないタグとなっています。
hタグを使ったHTMLの書き方は下記になります。
HTML
<h1>◯◯</h1>
<h2>◯◯</h2>
<h3>◯◯</h3>
<h4>◯◯</h4>
<h5>◯◯</h5>
<h6>◯◯</h6>h1が１番大きい見出しで数が少ないほど小さい見出しになっていきます。
※タグは6種類しかなくh7やh8は存在しません。
また、下記の記事にさらに詳しくSEO対策を意識した見出しタグの使い方をまとめているので併せてご覧ください！
ホームページの内容を伝えるmetaタグ(メタタグ)
metaタグ(メタタグ)は、ユーザーではなく、検索エンジンやブラウザなどのシステムに対して情報（メタデータ）を伝えるHTMLタグです。
メタタグの中でも「meta description」と「meta keywords」この２つは重要で、Webページの内容を検索エンジンに伝える役割を担っています。
しかし、「meta keywords」にキーワードを入れただけでは、そのキーワードの検索順位が上がったり下がったりすることはないです。
ですが、正しく設定できれば正しい内容を検索エンジンに伝えることができるため、クリック率の向上につながります。
その結果、流入が増えることによりSEO効果の向上が見込めます。間接的にSEO効果を高めることができるのです。
metaタグを使ったHTMLの書き方は下記になります。
HTML
<meta name="description" content="サイトの内容を120文字程度で表した概要文"></meta>
<meta name="keywords" content="キーワード１（その記事で扱う5つ程度のキーワード）,キーワード２,キーワード３,キーワード４,キーワード５"></meta>ユーザーが検索画面にて知りたい情報を検索すると、タイトルだけではなくページの説明文が同時に表示されています。その説明文は「meta description」の内容が反映されています。
ただし、検索エンジンは検索クエリに合っていると判断したとしても、必ずしも「meta description」を表示するわけではありません。
検索結果に合った文章を自動生成することもあるので覚えておきましょう。
重複コンテンツや類似ページを解消するcanonicalタグ（カノニカルタグ）
canonicalタグとは、重複したコンテンツや類似するページが存在する場合、どのページを評価してほしいか、正規ページかを検索エンジンに伝えるためのタグです。
評価して欲しいサイトが正しく検索エンジンに伝わらないと、検索エンジンの評価は分散してしまい正しい評価が得られず、SEO的にはマイナスになってしまいます。
その為にcanonicalタグを正しく使用して適正な評価を受ける必要があります。
canonicalタグを使ったHTMLの書き方は下記になります。
HTML
<head> <link rel="canonical" href="正規ページURL"> </head>※注意点としてHTMLのヘッダ内（<head>〜</head＞）に記述してください。
（body要素内に記述すると検索エンジンが処理しなくなってしまう為。）
箇条書きを表すlistタグ(リストタグ)
listタグ(リストタグ)とは、箇条書きを表示するためのHTMLタグです。
順序付きリストを表現するためのolタグ、順序のないリストを表現するためのulタグ、そして各リスト項目を表現するliタグの3つの主要なリストタグが存在します。
バラバラの項目だったものを箇条書きに整理して、まとまった一つのリストであると検索エンジンやユーザーにわかりやすく表現できます。
listタグを使ったHTMLの書き方は下記になります。
HTML
<ul>
<li>①について～～</li>
<li>②について～～</li>
<li>③について～～</li>
</ul>番号付きのの書き方は下記になります。
HTML
<ol>
<li>①について～～</li>
<li>②について～～</li>
<li>③について～～</li>
</ol>表作成時のtableタグ（テーブルタグ）
tableタグ（テーブルタグ）で、表を作成することができます。
表内の行とセルは、table要素内に配置するtr要素とtd要素（th要素）で示します。
tableタグを使ったHTMLの書き方は下記になります。
HTML
<table>
<tr>
<th>表の見出し（自分の名前）</th>
<th>表の見出し（好きな色）</th>
</tr>
<tr>
<td>表のデータ（太郎）</td>
<td>表のデータ（青）</td>
</tr>
<tr>
<td>表のデータ（花子）</td>
<td>表のデータ（赤）</td>
</tr>
</table>listタグとtableタグで設定された内容は強調スニペットに表示される可能性があるためSEO対策に大いに役立ちます。
リンク設定のaタグ（アンカーリンク）
aタグ（アンカーリンク）とは、内部リンクや外部リンクを作成する際に使用されるHTMLタグのことです。
例えばサイト上で同じサイト内の別の記事を紹介したとしましょう。
興味を持ったユーザーが同じサイト内の別の記事のページにアクセスします。
そうすることで、サイトから離脱するまでの時間が増え、長くサイトに滞在するのでSEO効果を高める施策につながります。
aタグを使ったHTMLの書き方は下記になります。
HTML
<a href="https://super-carrier.net/ " target="_blank">スパキャリ | Web制作で副収入5万円から人生を豊かに</a>このように、aタグのHTMLの間にテキスト（アンカーテキスト）を入れ、ユーザーがそのテキストをクリックすると、aタグで設定したURL先のサイトに移動します。
aタグを記述する際には下記のよう注意も必要です。
- href属性 遷移させたいURLを記述
- target属性 リンク先の文書を開くフレームやウインドウを指定するための属性
上記のように、target=”_blank”で新規ウインドウでリンクを開くことを示します。
また、アンカーテキストのキーワードにはなるべく対策キーワードを入れることがSEO評価を高めるポイントになります。
検索エンジンは遷移先ページと遷移元ページの関連性もSEO評価しているため、関連性のあるキーワードを使用することは効果的なSEO対策につながるのです。
サイトで使用する画像の説明のaltタグ（オルト属性）
altタグ（オルト属性）とは、画像が表示されない際にテキストとして、画像の内容を説明するためのHTMLタグです。
また、altタグは、音声読み上げ機能でコンテンツを読んでいるユーザーにとって「その画像が何を示しているものなのか」を理解する手助けとなるので、altタグは必ず設定するようにしましょう。
altタグを使ったHTMLの書き方は下記になります。
HTML
<img src="画像のURL" alt="画像の説明">上記の通りalt属性はユーザーの通信環境などが原因で画像が表示されない場合、テキストとして画像内容をユーザーに伝えます。
したがって、画像を見なくても提載している画像がわかるように具体的に説明を記述をする必要があります。
ユーザーがわかりやすい、かつ画像の内容にあった、説明の記述を心がけましょう。
強調させる効果のstrongタグ（ストロングタグ）
strongタグ（ストロングタグ）とは、内容の重要性、重大性のあるテキストを検索エンジンに伝えるためのHTMLタグのことです。
strongタグを使ったHTMLの書き方は下記になります。
HTML
<strong>強調させたいテキスト</strong>strongタグは頻繁に使用すると、過剰SEOとみなされる可能性があり、SEO対策で使用したつもりが、マイナスの評価を受けてしまう場合があります。
注意点として、段落の一部のテキスト（適切な個所）だけに使用したりして必要以上の使用は避けましょう。
まとめ
HTMLタグを適切に用いてコーディングすることは、コーダーがやれるSEO対策で最低限の事です。
適切にHTMLタグを使用できていないサイトが多々見受けられますが、逆を言えば今回学んだことを当たり前にこなして行けばその時点でできていない人との差別化ができます。
自分の中で当たり前の基準を上げていき、より良いサイト制作ができるようにさらに知識を身につけていきましょう！
