「HTMLはSEOにとってどのような役割があるのか」
「SEOに効果のあるHTMLの種類が知りたい」
「設定のコツが知りたい」
などと考えていませんか？
SEOを意識するうえで、適切なHTMLを記述することは非常に重要です。正しく記述することで、検索エンジンのクローラーから正確な評価を受けられます。
この記事では、SEOに効果のあるHTMLの種類や、設定方法について解説します。検索結果で上位に表示されるWebサイトを作るためにも、ぜひ最後までご覧ください。
目次
HTMLには、ページの内容を正確に伝える役割があります。HTMLは「HyperText Markup Language」の略で、コンピュータに指示を出すために用いられる言語です。
クローラー（Webサイトの巡回プログラム）は、HTMLのコードを解読して、コンテンツを評価します。反対にいうとHTMLが使われていない場合、クローラーはWebサイトを正しく認識できません。
検索結果で上位に表示するためには、クローラーから高評価を受けることが重要です。そのためSEOにおいても、正しくHTMLを記述することは大切だといえます。
こちらでは、SEOに効果的なHTMLを10種類紹介します。
ぜひ参考にしてみてください。
titleタグは、ページタイトルに使用されます。検索結果やSNSなどで記事をシェアした際に見られるページタイトルは、titleタグによって表示されています。
【記述方法】
HTMLソースコードのheadタグ内に<title></title>で囲んで記述する
SEOにおいて最も重要なのは、ページタイトルに検索キーワードを入れること。ユーザーはタイトルを見て、ページを見るかどうかを判断します。検索キーワードを含めることで、ユーザーのクリック率向上につながります。
他にもtitleタグで意識したいポイントは、以下のとおりです。
タイトルが長すぎたり、キーワードの羅列だったりすると、読者の興味を引けません。クリック率を高めるためにも、キーワードを含めて、ユーザーの悩みを解決できそうなタイトルを考えることが大切です。
meta description（メタディスクリプション）は、ページの概要を伝える役割で、タイトルと同様に検索結果画面に表示されます。SEOには直接影響しませんが、ユーザーのクリック率向上につながる重要な要素です。
【記述方法】
HTMLソースコードのheadタグ内に<meta name=”description” content=”◯◯”>と記述する。
meta descriptionを記述するポイントは、以下のとおりです。
メタディスクリプションは、スマートフォンとパソコンの画面で表示される文字数が異なるため、前半にキーワードや重要な内容をまとめると効果的です。
長くても120文字前後にとどめて、読者の興味を引く内容を作成しましょう。
canonicalは、正確なURLを検索エンジンに伝えるタグです。サイト内で重複するページがある場合に使用され、優先して巡回させるページをクローラーに伝えます。
【記述方法】
HTMLソースコードのheadタグ内に<link rel=”canonical” href=”http://～～”>と記述する。
サイト内の重複したページをクローラーが巡回すると、評価が分散します。例えば以下のURLは全て、別ページとみなされてしまいます。
状況によっては偽サイトと判断される可能性もあるため、ページの評価を下げることにつながるかもしれません。そのため、canonicalタグを設定して正しいURLを伝えましょう。
hは「heading」の略で、見出しという意味のタグです。文章を読みやすくしたり、検索エンジンが文章構成を理解しやすくなったりする効果が期待できます。
タグは「h1~6」まで利用可能です。
【記述例】
HTMLソースコードのbodyタグ内に記述。
<h1>◯◯</h1>
<h2>◯◯</h2>
<h3>◯◯</h3>
<h3>◯◯</h3>
<h2>◯◯</h2>
<h3>◯◯</h3>
<h3>◯◯</h3>
hタグは、数字の大きい順から使います。h3の中にh1を入れたり、h2の次にh4を使ったりする書き方は正しくありません。
各見出しで適切なタグを使用することで、検索エンジンに対してページ内の情報を適切に伝えられます。
またh1はタイトルにあたる要素なので、1ページで1回しか利用しません。titleタグと似ていますが、titleは検索結果やSNSなどに表示され、h1はページ内に表示されるという役割を持ちます。
h2~6は何回でも使用可能ですが、細かく分けすぎるとかえって読者が混乱するため、h3～4手に度にとどめておくのが良いでしょう。
HTMLには、箇条書きを設定するリストタグがあります。リストタグを使うことで、クローラーに文章構造を正しく伝えられます。
リストタグは順序が表示される「ol」と、表示されない「ul」の2種類です。また箇条書き部分では「li」タグを利用します。
【記述方法】
HTMLソースコードのbodyタグ内で利用。
<ul>（または<ol>）
<li>◯◯</li>
<li>◯◯</li>
</ul>
リストタグを利用した場合は、以下のように表記されます。
利用しない場合の表記は、以下の通りです。
・◯◯
・◯◯
・◯◯
クローラーに文章構造を伝えるためにも、箇条書きにはリストタグを利用するようにしましょう。
aタグはアンカータグの略で、リンクを設定する際に使用されます。アンカータグには様々な属性がありますが、多く使われるのは「href」です。
【記述例】
HTMLソースコードのbodyタグ内で利用。
<a href=”https://～～”>◯◯</a>
aタグ内のテキスト（アンカーテキスト）に対策したいキーワードを入れることで、SEOの効果が期待できます。検索エンジンのクローラーは、アンカーテキストを参考にページ内の情報を収集するからです。
さらにaタグはテキストだけでなく、画像にも設定可能です。画像にリンクを設定したい方は活用してみてください。
ページ内で画像を使用する際にalt属性を利用すると、テキストを設定可能です。画像が表示されない際に、代わりに設定したテキストを表示する効果があります。
【記述例】
HTMLソースコードのbodyタグ内で利用。
<img src=”画像のURL” alt=”テキスト” />
またalt属性を設定しておくと、検索エンジンが画像を認識します。さらに画像検索で表示しやすくもなるため、SEOの観点から見てもalt属性を設定することは効果的です。
ただし、とりあえずテキストを入れればいいというわけではなく、画像に対して適切な文章を設定することが求められます。用途はあくまでも「画像が表示されない際の代替」なので、読者にとってわかりやすい表記を心がけましょう。
pタグは、文章の段落を作成する役割を持っています。さらに検索エンジンに対して、正確な情報を伝える効果もあるためSEOの効果が期待できます。
【記述例】
HTMLソースコードのbodyタグ内で利用。
<p>◯◯</p>
pタグは段落を作成するためのタグなので、文章の途中では利用しません。
noindexは、検索エンジンにページをインデックスさせない効果があります。
サイト内のコンテンツ量が多いと、クローラーの巡回に時間がかかります。さらに重複したページがあったり、情報量が少ないページがあったりすると検索エンジンの評価を下げる原因となるため、noindexを設定することが効果的なケースもあります。
しかし、noindexは非常に強いシグナルであり、SEOの効果が完全に失われてしまいます。扱う際には細心の注意が必要です。
【記述例】
HTMLソースコードのheadタグ内で利用。
<meta name=”robots” content=”noindex” />
nameの部分には「robots」と入力すると、ほぼすべての検索エンジンから認識されません。noindexを設定して不要なページはできるだけ表示させず、重要なページを優先するようにしましょう。
nofollowは、サイト内のリンクに対してクローラーの巡回を極力させないようにする効果があります。
【記述例1】
HTMLソースコードのheadタグ内で利用。
<meta name=”robots” content=”nofollow” />
【記述例2】
HTMLソースコードのbodyタグ内で利用。
<a href=”https://～～” rel=”nofollow”></a>
記述例1の場合は、ページ単位での指定が可能です。2の場合は、リンクごとにnofollowの設定ができます。
リンク先のサイトにクローラーを誘導したくない場合は、nofollowを設定して評価を下げないようにしましょう。
HTMLの役割は、Webページの情報を検索エンジンに正確に伝えることです。クローラーは、HTMLの情報をもとに検索順位を決定します。そのため、正確なコードの記述が必要です。
HTMLにはtitleタグやmetaタグなどの種類があります。それぞれのタグの役割を知ることで、SEOに適した設定ができます。詳しい情報を知って、SEOに適したHTMLを設定しましょう。
2002年設立から、20年以上に渡りSEOサービスを展開。支援会社は延べ2,000社を超える。SEO/CRO（コンバージョン最適化）を強みとするWebコンサルティング会社。日本初のSEO情報サイトであるSEO Japanを通じて、日本におけるSEOの普及に大きく貢献。
SEO最新情報やセミナー開催のお知らせなど、お役立ち情報を無料でお届けします。
