SEO対策のためのhtmlタグの使い方（初級編）

SEOとは？

これは説明するまでもないと思いますが、Search Engine Optimizationの略称で、簡単に言うとGoogleなどの検索エンジンのアルゴリズムに則って最適なウェブサイトを構築することです。SEO対策を行なうことによって自身のウェブサイトが関連キーワードで検索された時に上位表示されるので、多くのユーザーからのアクセスを獲得できます。
ただし、一口にSEOと言ってもその対策は様々ありますので、まずは簡単にその概要を述べたいと思います。

外部SEO

外部SEOは関連性の高いウェブページに自分のウェブページへのリンクを貼ってもらうようにすることです。こうすることで、自分のウェブページへのアクセスの増加が期待できます。具体的な手段としてはSNS等で自分のウェブページの情報を発信し、興味を持った方々にリンクを貼ってもらうことになります。リンクを貼ってもらうということは自分のウェブページ外の話なので外部SEOと呼ばれています。

内部SEO

内部SEOは外部SEOの反対で自分のウェブページの内部をいじることによって検索エンジンでの上位表示を狙います。内部SEOは様々な種類がありますが、分かりやすい例としてはキーワードを適切に盛り込むなどしてウェブページのコンテンツの質を改善していくコンテンツSEOなどが挙げられます。本記事ではこの内部SEOの一環であるテクニカルSEO、特にその中でも「htmlタグの最適化」の基礎を説明します。ちなみに、テクニカルSEO自体も非常に幅が広く、「htmlタグの最適化」以外にも例えばXMLサイトマップの作製、URLの最適化、モバイル対応などがあります。

htmlタグの最適化とは？

htmlはウェブページを記述するための言語ですが、あるウェブページを作成したいと思った時にhtmlでそれを記述する方法は複数存在します。例えば、次のh1タグとpタグはフォントの違いはあれど、どちらもウェブページに「テスト」と表示されるという点では同じです。

<h1>テスト</h1>
<p>テスト</p>

それでは、これらのタグの使い分けは「大きいフォントにしたい時はh1タグ、小さいフォントにしたい時はpタグを使う」といった使い分けでよいのでしょうか？少なくともhtmlを使い始めて間もないころの私は（恥ずかしながら）このような認識しかありませんでした。今振り返ってみれば、SEO対策の観点からはこのような認識は誤りでした。それぞれのタグが持つ意味をしっかり考慮したうえで使用しないと、せっかくウェブページを構築していもアクセス数が伸びないという残念な結果になってしまいます。多くのユーザーにウェブページにアクセスしてもらうためにもSEO対策を踏まえたhtmlの使い方を学んでおく必要があるので、以下では重要なタグの役割や使い方についてまとめていきます。

titleタグ

titleタグは名前のとおりウェブページのタイトルを示すタグです。
htmlのhead内に記述されるのでウェブページ内には表示されません。しかしながら、Google等の検索結果に表示され真っ先にユーザの目に留まるのがこのtitleタグ（下図の青字）なのでSEOでは非常に重要です。

使用時の注意

• 検索でヒットさせたいキーワードを盛り込んでウェブページの内容を簡潔に表現するようにしましょう。
• ユーザーに誤解を与えないように、ウェブページと関係のないワードは含めないようにしましょう。

補足

検索結果に表示されるタイトルは以上のようにtitleタグで決定されますが、タイトルの下にあるウェブページの説明書きはhtmlのhead内のmeta descriptionに記述します。このmeta description自体は検索エンジンに解析されないのでSEOに直接的には影響しません。しかしながら、タイトル同様にユーザの目に留まるものですので、キーワードを含めた説明書きを作成し、ユーザの興味を引くようにしなければいけません。

構造化タグ

構造化タグはウェブページの構成を決める重要なタグです。構造化タグを見れば、そこにはどのようなことが記述されているのかを判別することができます。形式的にはdivタグなどで置き換えることができますが、構造化タグを適切に使うことで検索エンジンがウェブページの構造を正しく把握できるようになり、検索順位の上位に表示される可能性が上がります。

headerタグ

headerタグはウェブページのヘッダーの記述に使用します。ウェブページの最上段なので、記述内容は主にウェブサイトの名前やロゴ、グローバルナビゲーションなどです。ユーザーに今どんなウェブページを見ているのかということを理解してもらえるような記述が必要です。主にウェブページ全体のヘッダーに使われますが、ウェブページ内の各セクションのヘッダーに使用されることもあります。

navタグ

navタグは主にウェブページヘッダーのグローバルナビゲーションやウェブページの端のサイドバー内のコンテンツナビゲーションを記述するのに使われます。一方で、特に意味のないリンクの集まりなどに使用するのは適切ではありません。

mainタグ

mainタグはウェブページ全体のヘッダーやフッター及びウェブページの端に表示されるサイドバーなどを除いて、bodyタグ内の主要な内容を記述するのに使います。従って、ここには後述するarticleタグやsectionタグが記述されることになります。場合によってはウェブページ全体のヘッダーやフッターとは別に、mainタグ用のheader, footerタグが含まれることもあります。

使用上の注意

• mainタグは1つのウェブページに1つだけ存在するようにしましょう。

articleタグ

articleタグはウェブページとは独立して1つのコンテンツを形成しているセクションに対して使用します。少し理解しにくいかもしれませんが、例えばブログ記事一覧ページの場合であれば、各々のブログ記事は独立した1つのコンテンツになっているので、各ブログ記事へのリンクを含むセクションにはarticleタグを使用するのが適切です。次のsectionタグと混同しないように注意する必要があります。

sectionタグ

sectionタグはウェブページ内のまとまった内容を囲むのに使用します。ウェブページがいくつかの章から構成されているのであれば、各章をsectionタグで囲むのがよいでしょう。逆に長いテキストをとりあえずsectionタグで囲むなどは不適切です。まとまった内容を囲むという性質上、後述するh2～h6タグを含むケースが多く見られます。

補足

1つ前のarticleタグは独立したコンテンツを形成するので、何となくイメージ的にsection < articleのように思えますが、必ずしもsectionタグがarticleタグの中に入るというわけではありません。例えば、先ほどのブログ記事一覧の例であれば、各ブログ記事はarticleタグで囲みますが、ブログ記事一覧全体はsectionタグで囲むのが適切です。

asideタグ

asideタグはmainタグとは対比的にウェブページの主要な内容とは関係の薄いものを記述します。典型的なものとしてはウェブページの端のサイドバー、広告などが挙げられます。このタグを使うことによって検索エンジンがウェブページの主要な内容を正確に把握できるようになります。

footerタグ

footerタグはウェブページのフッターの記述に使用します。ウェブページの最下段なので、記述内容は主にメニューバーやコピーライト表記などです。

重要なHTMLタグ

以下では構造化タグ内に記述される個別のタグの役割について説明します。これらのタグを適切に使うことによって、検索エンジンが各パーツの役割を正しく理解することができます。また、構造化タグと違ってユーザーから直接見えるものなので、

h1～h6タグ

h1～h6タグはウェブページ内の見出しに使うタグです。
番号が小さいほど重要度の高い見出しに用いられるので、ウェブページのメインテーマにh1タグ、サブテーマにh2タグ、各サブテーマ内の小見出しにh3タグのように使います。

使用時の注意

• 基本的には1つのウェブページにh1タグは1つです。
• hタグは番号が小さい順に使用します。例えば、h2タグをメインテーマに、h1タグをサブテーマに用いるということがあってはいけません。
• SEOとは直接関係ありませんが、hタグは見出しなのでユーザーが見て分かりやすいように簡潔な文言になっていること（長文にしないこと）が大切です。

pタグ

pタグはまとまったテキスト（段落）を囲むのに使うことができます。とても長いテキストであってもpタグを使って段落をつくることで、テキストが整理されてユーザーが読みやすいテキストとなります。

使用時の注意

• pタグは段落を作るのでテキストが改行されますが、テキストの改行目的でpタグを使用するのは避けるべきです。改行にはbrタグを使用します。
• 同様に改行効果を利用して、高さ方向に余白を持たせる目的で<p></p>のように空白のpタグを高さ方向に並べることも避けるべきです。検索エンジンからは空白の段落と認識されてマイナス評価になります。

aタグ

aタグはウェブページ内外へのリンクを貼るのに使えるタグです。

使用上の注意

• aタグのアンカーテキストは意味のあるワードを使うようにしましょう。例えば、「ここをクリック」のような書き方ではそこだけ見ても意味が通じないので、「○○の記事へ」のように具体的に書くことが大切です。
• 当然ですが、リンクはリンクであると分かるように色などを変えておく必要があります。ユーザーが気づかないとリンクの効果がありません。

ul・liタグ

ul・liタグは箇条書きに使えるタグで、グローバルナビゲーションなど多くの場面で使うことができます。箇条書き自体はdivタグやpタグでも作成可能ですが、ul・liタグを使うことによって検索エンジンが正しく内容を理解できるようになるので積極的に使っていくべきです。

dl・dt・ddタグ

dl・dd・dtタグは説明リストや定義リストと呼ばれます。言葉だけでは少しわかりづらいので、具体例から見ていきます。

<dl>
  <dt>太陽</dt>
  <dd>太陽系の中心にある。</dd>
  <dt>地球</dt>
  <dd>太陽の周りを回っている。</dd>
  <dt>月</dt>
  <dd>地球の周りを回っている。</dd>
</dl>

見て分かるように「dtタグの内容をddタグで説明する」という構成になっており、このような場面で用いるのがdl・dd・dtタグです。実際の用例としては言葉の定義一覧、Q&A一覧などが挙げられます。

補足

先のul・liタグとの使い分けが一見するとややこしいですが、ul・liタグはあくまで単なる箇条書きなので、リスト内の項目の間で説明する・されるといった関係性がないという点でdl・dd・dtタグとは異なります。