Webサイトの制作をしていると、SEO対策のためにヘッダータグについて知りたいという方も多いのではないでしょうか。
本記事ではヘッダーとは何かということから、ヘッダータグについてベストなSEO対策まで紹介していきます。
ぜひ最後まで読んで参考にしてみてください。
最適化すべきヘッダータグを理解して具体的なSEO対策ができるようにしましょう。
ヘッダーとは
ヘッダーとは、そのデータに関する説明書きが書いてある部分のことです。
データの中身はデータ本体と、そのデータの説明書きの2つから構成されています。
その2つのうち、データの説明書きの部分がヘッダーで、データの送り先などの補足情報が書いてあります。
イメージとしては、お手紙の宛先や差出人などの説明が書いてある封筒がヘッダーで、便箋がデータ本体だと思ってください。
Webサイト上では、ヘッダーはHTMLというソースコードを使用しています。
HTMLファイルの中の、<head>～</head>タグの部分をヘッダーといいます。
ヘッダーの中には、このHTMLファイルの説明が書いてあるのです。
ヘッダーがSEOで重要な理由
ヘッダーはなぜSEOで重要なのでしょうか。
ヘッダータグは、サイトのコンテンツ内容を検索エンジンに理解してもらうために必要なものです。
Googleなどの検索エンジンは、ロボットがWebページをクロール（＝巡回）することでページを読み込み、検索エンジンのデータベースに登録します。
このことをインデックスといいます。
一度だけでなく、何度もロボットがサイトを訪れることにより、より正確にインデックスされるようになり、検索結果の順位にも影響するでしょう。
つまり、クロールされやすいWebサイトを作成することはSEOではとても重要なのです。
Webサイト上のコンテンツ内容をロボットに理解してもらいやすくするためにヘッダーは非常に重要な役割を果たしています。
ヘッダーのSEO対策はどんなものがある？
ヘッダーでSEO対策に関係するものは以下のものがあります。
- タイトル：
タイトルタグは、検索順位やクリック率に影響を与える重要な要素です。 - メタキーワード：
HTMLページ内のキーワードを指定するために使用します。 - メタディスクリプション：
メタディスクリプションは、検索順位には影響しませんがクリック率に大きく影響を与えます。 - DOCTYPE宣言の有無：
DOTYPE宣言とは、HTMLソースがどのバージョンを利用して記述されているかを宣言することです。 - URLの正規化：
こちらは検索順位に貢献するというよりも、マイナス評価を避けるために用います。 - XML宣言の位置・数
- クローラーを制御する記述(メタ・robots.txt)
- スタイルシートの記述
- JavaSriptと<noscript>
ヘッダーで重要なタグ2つの使い方
検索エンジンにサイトを認識してもらうためにはタグが重要です。
タグはいろいろな種類がありますが、ここでは特に重要な2つのタグを紹介します。
- タイトルタグ
- URLの正規化
この2つのタグは、SEOにおいて検索順位やクリック率に影響を与える非常に重要な要素です。
タイトルタグとURLの正規化の特徴や使い方を理解して、しっかり使いこなしましょう。
タイトルタグ
まずはタイトルタグです。
タイトルタグで記述するタイトルは、ページそのもののタイトルのことを指します。
<title>サイトのタイトル</title> というコードで記載します。
このタイトルは、検索結果で各サイトの説明文の上に表示される文言になるので、非常に重要です。
わかりやすく、アクセスしたくなるようなタイトルにしましょう。
タイトルを記述する時は以下のことに気を付けてください。
- 30字以内で書く
- 重要なキーワードは左詰めで書く
- キーワードは1回のみ
- キーワードの詰め込みすぎや羅列はNG
- ユーザーがクリックしたくなるようなタイトルにする
URLの正規化
次に、URLの正規化です。
URLの正規化とは、内容が重複するページがあった場合、どのページを優先してGoogleに評価してもらうかを指定することです。
これはcanonicalタグで指定することができ、<link rel=”canonical” href=”正規化するURL” />というコードで記述します。
URLの正規化は、検索順位に貢献するというよりも、Googleからのマイナス評価を避けるために使用されるものです。
重複コンテンツがあると、コピーコンテンツと認識されてペナルティを受ける可能性があります。
マイナス評価を受けないために必ず行いましょう。
ヘッダーで使う他のタグ6つの使い方
次に、SEOに間接的に影響する可能性があるタグを6つ紹介します。
SEOに直接影響するわけではありませんが、使いこなせるようになっておきましょう。
- メタキーワードタグ
- メタディスクリプションタグ
- OGPタグ
- viewport設定
- InternetExplorer用の設定
- DOCTYPE宣言
メタキーワードタグ
まずはメタキーワードタグです。
これはキーワードを指定するためのタグです。
<meta name=”keyword” content=”キーワード1,キーワード2,……”>というコードで記述します。
キーワードは盛り込みすぎるとマイナス評価を受けてしまう可能性もあるので、キーワードの数は2,3つ程度にしておきましょう。
記述する際には、数よりもどのようなキーワードで検索したユーザーの集客を目的としているのか、という観点から考えて設定することがおすすめです。
メタディスクリプションタグ
2つ目はメタディスクリプションタグです。
メタディスクリプションタグとは、Webページの概要を表すために使用するタグのことを指します。
<meta name=”description” content=”ページの説明”/> というコードで記述しましょう。
このタグの中に記載した文面は、検索結果の画面に説明文として表示されます。
メタディスクリプションを最適化するためのポイントを紹介します。
- キーワードを含める
- 検索結果に表示される文字数に収める（PCは約130字、スマホは約80字）
- ユーザーの検索意図を考慮する
OGPタグ
3つ目はOGPタグです。
OGPタグは、HTMLの内容をFacebookやTwitterなどのSNS上でそのページのURLや画像、サイトの種別などを正確に伝えるためのタグです。
SEOと直接関係はありませんが、SNS上でコンテンツを拡散されると大きな集客効果があるので最適化しておきましょう。
OGPタグのコードは以下の6つがあります。
- <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=”サムネイル画像のURL” />
viewport設定
4つ目はvieport設定です。
vieport設定は、ページの表示領域をPCやスマホ、タブレットなどさまざまなデバイスに最適化させるためのタグです。
vieport設定をしていないPC用のページをスマホで閲覧すると、文字がかなり小さく見にくくなってしまいます。
vieport設定がされていないページは小さな文字を読むのにストレスを感じ、ユーザーの離脱率が上がってしまうので必ず設定しておきましょう。
vieport設定では、wideft（横幅）とinital（初期倍率）を設定する必要があります。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>というコードで記述します。
InternetExplorer用の設定
5つ目は、InternetExplorer用の設定です。
InternetExplorerには旧バージョンの「下位互換モード」があります。
この「下位互換モード」で閲覧すると表示ズレを起こすことがあるので、防止策として強制的に最新のInternetExplorerで表示するために使用されるものです。
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />というコードで記述します。
このタグもSEOには直接関係ないですが、表示ズレが起こるとページが見にくく、ユーザーが離脱してしまう原因になるので設定しておきましょう。
DOCTYPE宣言
最後は、DOCTYPE宣言です。
DOCTYPEとは、HTMLやXML文書の先頭に記載する文書型宣言のことです。
DTDのバージョン（＝文書のルール）や言語を正しくWebブラウザに伝える役割があります。
このDOCTYPEは書き方によって検索結果の表示にも影響するため、非常に重要です。
HTML5以降の環境では、<!DOCTYPE html>というコードで記述します。
HTML4.01の古いバージョンでは記述方法が異なるので注意してください。
DOCTYPEは記述しなくてもある程度はブラウザが勝手に解釈してくれるので、他のタグに比べて優先度は低めです。
デザインに関連するタグ
タグには画像を埋め込んだり、レイアウトを整えたりするデザインに関連するものがあります。
サイトを見やすいものにするためには、このデザインに関連するタグを使用するといいでしょう。
デザインに関連するタグは以下のものがあります。
- ファビコン
- 外部CSSとJSファイル読み込み
それぞれ特徴を説明していきます。
ファビコン
まずはファビコンです。
ファビコンとはアイコン画像を指定することで、iconタグを使用して記述します。
具体的には、ブラウザのタブや、ブックマークした時に表示されるアイコン画像を設定することができるものです。
また、スマホで検索した時に検索結果にも表示されます。
アイコンが設定されていないサイトもありますが、他サイトとの差別化を図るブランディングとしてアイコンは設定しておくほうがいいでしょう。
画像ファイルをicon形式に変換し、アップロードしてタグに入れ込むことで画像を指定できます。
<link rel=”icon” href=”favicon.ico”>というコードで記述します。
ユーザーの目を引くようなアイコンを設定しましょう。
外部CSSとJSファイル読み込み
次に、外部CSSとJSファイル読み込みです。
CSSとは、Webページのデザインを定義・記述するためのもので、スタイルシートと呼ばれます。
文字の画像や配置などを細かく設定することができたり、ページのデザインの変更が一括でできたりする便利なものです。
スタイルシート（CSS）を読み込むためにはstylesheetタグを使用します。
また、<link>タグを入れると複数のページに同一のスタイルを設定することが可能です。
<link rel=”styleshee” href=”CSSファイルのURL”> というコードで記述します。
JSファイルとはJavaScriptのことで、Webサイトを作るために欠かせないものです。
Webサイトに動きを付けたり、ボタンの動作を制御したりと、Webサイトに関わる大抵のことはJavaScriptで可能です。
script scr属性を使用するとJavaScriptを実行できます。
script scr属性は、スクリプトファイルの読み込みを行うために使用され、音声や動画、メニューに動きを付けることができます。
script scr属性にファイル名を指定すれば、自動的にファイルの中身を解析してJavaScriptの処理が可能です。
<script src=”スクリプトファイルのURL”>というコードで記述します。
ヘッダータグを最適化してSEO対策をしよう！
ヘッダーとは、そのデータに関する説明書きが書いてある<head>～</head>タグの部分です。
ヘッダータグは、サイトのコンテンツ内容を検索エンジンに理解してもらうためには非常に大切になります。
タイトルタグやURLの正規化などはタグの使い方として特に重要です。
その他にも、
- メタキーワードタグ
- メタディスクリプションタグ
- OGPタグ
- viewport設定
- InternetExplorer用の設定
- DOCTYPE宣言
などのタグの使い方は知っておいてください。
最適化すべきタグを理解し、SEO対策をしましょう。
