SEOでヘッダーの設定は効果的？主に使われるタグの記述方法を紹介

2024.8.19

ヘッダーとは、サイトのHTMLにおける＜head＞～＜/head＞で囲まれた部分を指す要素で、SEOにおいても重要な役割を果たします。

この記事では、SEOにおいてヘッダーがもたらす効果や、主にheadタグで使われる要素についてご紹介します。

執筆者

マーケティングサポート「バンソウ」のメディア管理人

株式会社クリエイティブバンクのマーケティングサポート「バンソウ」のメディア管理人。得意分野は、SEO全般・サイト分析・オウンドメディア・コンテンツマーケティング。バンソウはクライアント様のBtoBマーケティングをサポートするサービスです。詳しい内容はこちらをご覧ください。

SEOでも重要なヘッダーとは

ヘッダーとは、Webサイトを構成するHTMLに含まれる、<head>～</head>で囲まれた要素です。

ヘッダーを設置することで、ユーザーや検索エンジンのクローラーがサイト内を巡回しやすくなったり、サイト内に含まれる情報を適切に理解できたりするようになります。

ヘッダーにはtitleタグやmeta descriptionタグ、エンコードなどを記載し、ページ内のHTMLファイルを説明します。ヘッダーに記載された情報は、titleタグ以外はページの画面上に表示されません。

ヘッダーがSEOにもたらす効果

ヘッダーをWebサイトに設置することで、検索順位の上昇やユーザビリティの向上などの効果が期待できます。ヘッダーがSEOにもたらす効果について具体的には、次のとおりです。

クローラーがサイト内を巡回しやすくなる

ヘッダーを設置することで、クローラーがサイト内を巡回しやすくなります。

自社サイトのページが検索結果に表示されるためには、クローラーがページの情報を読み取り、インデックスされる必要があります。インデックスされた内容をもとにランキングの設定が行われるため、狙うキーワードとページ内の情報の関連性を正確に伝えなければなりません。しかし、クローラーが巡回しづらいページやサイト構造だと、適切に情報を読み取ってもらえない可能性があります。

このとき、headタグを活用することで、クローラーに対してページやサイト内にどのような情報が記されているかを適切に伝えられるようになります。

ユーザビリティの高いサイトになる

ヘッダーには、ページのタイトルやディスクリプション、文字コードなど、さまざまな情報を記述します。

ヘッダーが適切に記述されていなかった場合、ユーザーが検索意図に沿ったページなのか検索結果の情報から判断できず、クリック率が伸び悩んだり、見やすいコンテンツにできなかったりすることから離脱につながってしまったりするリスクがありあす。

ヘッダーを正しく設定することで、ユーザーにとって利用しやすいユーザビリティの高いサイトを作れるようになるため、検索エンジンからも評価されやすくなります。

SEO対策で重要なヘッダーの要素

先述したように、ヘッダーを活用することで、クローラーが正しくページ情報を理解できるようになり、検索順位の上昇が狙えます。ここでは、SEO対策で重要なヘッダーの要素をご紹介します。

特に重要な3つのタグ

headタグ内には、さまざまなタグを含みます。まずは、特にSEOでも重要とされる3つのタグをご紹介します。

これらのタグを最適化することで、検索結果からのユーザーのクリック率の向上や、検索順位の上昇などが期待できます。

titleタグ｜タイトルの設定

titleタグは、ページのタイトルを示すためのタグで、以下のように記述します。

<title>ページのタイトル</title>

titleタグに記述した内容は、ページタイトルとしてページ上や検索結果にも表示されます。文字数が多すぎると検索結果上で途切れて表示される可能性があるため、30字程度を目安に作成するのがおすすめです。

また、ユーザーが検索したキーワードとページとの関連性を示せるよう、タイトルのなるべく前半にキーワードを含むとよいでしょう。ただし、キーワードを含みすぎるとGoogleからスパム行為と見なされる恐れもあるため、タイトル内ではキーワードを1回のみ使用するようご注意ください。

そのほかのtitleタグの適切な作り方は、Google 検索セントラルの「最適なタイトルリンクを出しやすくするためのベストプラクティス」でも提示されています。

canonicalタグ｜URLの正規化

canonicalタグを使用することで、1つのページにSEO評価を集中させ、評価の分散を防げます。なお、canonicalタグで1つのURLに評価を集めるよう促すことを「URLの正規化」といいます。

canonicalタグは、以下のように記述します。

<link rel="canonical" href="正規化するURL">

URLに「www」が入ったURLと入っていないURLが混在しているなど、同じページ内容でも異なるURLを使用している場合、検索エンジンからは別のページと認識され、SEOの評価が分散します。

このように同一ページに対して複数のURLがある場合や、ページの内容が似ていることで重複が起きている場合は、canonicalタグを使うことで1つのページに評価を集められるため、検索結果での上位表示を狙いやすくなります。

alternateタグ｜PC用URLとスマートフォン用URLの正規化

PC用とスマートフォン用のページで異なるURLを使用している場合、これらも別ページと認識され、評価が分散してしまいます。このとき、先述したcanonicalタグに加えて、alternateタグを記述することで対策できます。

まずは、PC用のページのheadタグ内に、以下のように記述します。

<link rel="alternate" media="only screen and (max-width: 640px)" 
href="スマートフォン用ページのURL">

次に、スマートフォン用ページのheadタグ内に、以下のように記述します。

<link rel="canonical" href="PC用ページのURL">

このようにPC用とスマートフォン用のページにそれぞれalternateタグとcanonicalタグを記述することで、正規化ができます。

そのほかのタグ

titleタグやcanonicalタグにも、headタグ内にはさまざまなタグを記述できます。ページ情報をわかりやすくクローラーに示せるよう、次にご紹介するタグもあわせて記述しておくとよいでしょう。

meta charsetタグ｜文字コードの指定

meta charsetタグを使用することで、ページ内で使用する文字コードを指定できます。あらかじめ文字コードを指定しておくことで、ページ内のテキストの文字化けを防げます。

一般的に文字コードは「UTF-8」が世界的にも使用されているため、文字コードを指定する際はUTF-8を指定するのがおすすめです。meta charsetタグの記述方法は、以下のとおりです。

<meta charset="utf-8">

meta descriptionタグ｜ページの概要の説明

meta descriptionタグは、ページで書かれている内容を100～120字程度の文章で簡単に説明する役割を果たし、記述した内容は検索結果にも表示されます。

検索エンジンがページ内容を読み取り自動的に生成することもありますが、ユーザーがページをクリックするかを決めるための要素にもなるため、できるだけオリジナルの文章を作成することをおすすめします。

meta descriptionタグの記述方法は、以下のとおりです。

<meta name="description" content="ページ内容の簡単な説明">

meta keywordsタグ｜狙うキーワードの指定

meta keywordsタグは、Webページに書かれている情報がどのような内容なのかを検索エンジンに示せます。

ただし、meta keywordsタグはかつて検索エンジンの精度が低かった頃に使われていた要素で、現在は検索結果におけるランキングには直接影響しないことがGoogle 検索セントラルの「Google はウェブランキングにキーワードメタタグを使用しません」にて明言されているため、設定の重要度は低いです。

meta keywordsタグの記述方法は、以下のとおりです。なお、キーワードは3～5個ほど設定するのが一般的です。

<meta name="keyword" content="キーワード1,キーワード2,キーワード3">

ファビコン設定タグ｜ファビコン画像の作成と設定

ファビコンは、ブラウザのタブや検索結果などに表示されるアイコンのことです。ファビコンが設定されていると、一目でどのサイトを開いているかがわかるため、ユーザーの利便性やWebサイトのブランド強化にもつながります。

ファビコンを設定する際は、まず設定したい画像を「Faviconジェネレーター」などでファビコン用の画像ファイルに変換しましょう。

画像を用意できたら、ファイルをWebサイトのサーバーにアップロードし、以下のコードをheadタグ内に記述します。

<link rel="icon" href="ファビコン画像のパス名">

viewport設定タグ｜多様なデバイスへの最適化

viewportは、ブラウザ上でのWebページの表示領域を指します。viewportを設定することで、PCやスマートフォン、タブレットなどのさまざまなデバイスでページが閲覧された場合も、レイアウトが崩れることなくデバイスごとに最適なページを表示できます。

viewport設定タグの記述方法は、以下のとおりです。

<meta name="viewport" content="width=device-width, initial-scale=1">

上記のタグは、Google 検索セントラルの「viewport メタタグ」でも提示されているタグのため、viewportを設定する際はこちらのタグを使用することをおすすめします。

OGP設定タグ｜SNSでのシェア画面の最適化

OGPは、X（旧Twitter）などのSNSでページをシェアした際に、リンクとともに表示されるページのタイトルやサムネイル画像、説明文などを示す要素です。OGPを設定しておくことで、シェア画面をユーザーにわかりやすく表示できるため、シェアされた投稿を見たユーザーのクリックをより狙えます。

OGP設定タグの記述方法は、以下のとおりです。

<meta property="og:url" content="ページのURL">
<meta property="og:type" content="ページの種類">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:site_name" content="サイト名">
<meta property="og:image" content="サムネイル画像のパス名">

ヘッダーとあわせて設定したいタグ

ここまで、ヘッダーであるheadタグ内に含めるタグについてご紹介しました。最後に、ヘッダーのタグとあわせて設定したほうがよい「!DOCTYPEタグ」についてご紹介します。

!DOCTYPEタグ｜HTMLファイルの仕様を説明

!DOCTYPEタグは、ページで使用しているHTMLファイルがどのバージョンのものであるかを示す「DOCTYPE宣言」を行う際に使われます。DOCTYPE宣言を行うことで、ページに適用されているHTMLやCSSをブラウザで正しく表示できます。

HTMLの最新バージョンであるHTML5以降の環境では、以下のように記述しDOCTYPE宣言を行います。

<!DOCTYPE HTML>

なお、!DOCTYPEタグは、以下のようにheadタグの上に設置します。

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
……
……
</head>

HTML5以前のバージョンであるHTML4.01やXHTMLには、DTD（文書型定義）と呼ばれるファイルが含まれています。そのため、DOCTYPE宣言でどのバージョンのDTDに基づいて記述されたHTMLなのかを示さなければなりません。

DTDは「Strict」「Frameset」「Transitional」の3種類に分けられます。それぞれ!DOCTYPEタグの記述方法が異なるため、ご注意ください。

HTML4.01でのDTD別記述方法

■Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

■Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

■Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTMLでのDTD別記述方法

■Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

■Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

■Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

まとめ

この記事では、SEOにおいてヘッダーがもたらす効果や、主にheadタグで使われる要素についてご紹介しました。ヘッダーを設定することでユーザビリティが向上し、ユーザーがサイト内を巡回しやすくなるだけでなく、クローラーがページ内容を理解しやすくなります。

記事内であげたタグの中には、設定しないと検索エンジンからの評価が分散したり、文字化けが生じてしまったりするものもあるので、設定していないものがあれば設定しておきましょう。