【SEOの基本】<head>内タグ（titleタグ・metaタグ）の正しい記述方法

2020.12.092016.11.14SEO記事一覧

コンテンツ制作ノウハウ内部施策SEO

13_correct-description-of-head-tag

自然検索からの流入が増えない…。狙ったキーワードの検索順位が上がらない…。
そんな悩みをかかえている、Web担当者の皆さま。<head>内タグの最適化はできていますか？

せっかく手間を掛けて作ったコンテンツも、内容が検索エンジンに伝わらないと評価されません。
ではどうすれば、検索エンジンに対して内容を伝えれば良いのでしょうか。

答えは、SEOの内部施策を行うこと。正確に検索エンジンにコンテンツを伝えるためには、この内部施策が非常に重要です。今回は、SEO内部施策の基礎である<head>内タグの最適化についてご説明します。

1 <head>タグとは？
2 各種タグの紹介と最適化のポイント
3 Google Search Consoleを使用したチェック方法
4 まとめ

<head>タグとは？

まず、<head>タグとはどんな役割を果たすタグなのでしょうか。

<HTML>～</HTML>はその文書がHTML文書であることを宣言するタグであり、文書の最初と最後に記述します。 <HTML>～</HTML>の間には、文書のタイトル等のヘッダ情報を記述します。そして<BODY>～</BODY>の間には、実際にブラウザに表示される文書の本体を記述します。

引用元：HTMLクイックリファレンス

形式的に説明されると難しい…と感じるかと思いますが、HTMLの文書に必要な要素です。

Webサイトを構成するHTML文書は、<html>、<head>、<body>の3種類のタグから成り立っており、それぞれで全体の構成を定義しています。その中でも<head>はHTML文章のタイトルはヘッダ情報を記載します。検索エンジン向けの情報を記述する場所でもありますので、<head>タグの最適化は非常に重要なのです。

各種タグの紹介と最適化のポイント

ここからは、各種タグのご紹介とあわせて、最適化のポイントをご説明します。

<title>タグ

名前のとおり、タイトルをつけるためのタグです。このタグに設定した内容が検索エンジンの検索結果画面に説明文（スニペット）として表示されます。また、ブラウザでページを開いた際にタグの内容が表示されたり、ブックマークした際にも記述内容が引用されるケースもあります。

⇒ リッチスニペットとは？種類と設定方法について

correct-description-of-head-tag-01

Googleでの表示イメージです。一番目立つところに表示されますね！

ただし、検索するキーワードによっては検索エンジン側の調整により、タグの記述とは異なる表示がされるケースがありますので、注意してください。

correct-description-of-head-tag-02

これはFirefoxの例ですが、ブラウザによってはこのようにタブに表示され、マウスオンで全文表示できます。そんな<title>の最適化のポイントは以下のとおりです。

自然検索で上位表示を狙いたいキーワードを盛り込む
文字数は70バイト（全角35文字）以下
ページで訴求したいポイントを文字数の制限内でまとめる
サイト内の各ページで個別の内容になるように設定すること

<title>タグは検索エンジンがページの内容を理解しようとする際に重要視するポイントです。Googleの「検索エンジンスターターガイド」でも、適切なページタイトルをつけるように解説されています。

文字数については、「70文字では収まらない！」と思う方もいらっしゃると思いますが、検索エンジンの検索結果に表示される文字数が限られているため、長くなりすぎると途中で切れてしまい、内容が伝わらない可能性もあります。

どうしても文字数がオーバーする場合、後半部分が省略されてしまうので、訴求ポイントはできるだけ前半部分に記述することをおすすめします。（キーワードを意識しすぎて伝わりづらくならないようにしましょう！）

また、検索結果の画面に表示されるページの数はひとつではありませんので、記述する内容はクリック率にも影響します。できるだけ検索したユーザーにとって魅力的になると好ましいですね。

最後に「サイト内の各ページで個別の内容になるように設定すること」ですが、サイト内で同じタイトルのページがあると、内容まで重複しているように認識されてしまう可能性があります。評価を下げてしまうことを避けるために、出来る限り個別の内容を設定してください。

⇒titleタグ（タイトルタグ）とは？SEOを意識した最適な文字数と記述方法

⇒titleタグの文字数分しかない限られたサイト資産を100%活用しよう

⇒企業秘密大公開！コンテンツマーケティングを成功させるタイトルの作り方

<meta name=”description”>

correct-description-of-head-tag-03

上記画像はGoogleでの表示イメージです。検索したキーワードが文中に含まれていると太字（ボールド）になります。タグの記述内容が省略されたり、ページ内のテキストを引用されたり、検索エンジン側の調整により表示が異なるケースがありますので、注意してください。

自然検索で上位表示を狙いたいキーワードを盛り込む
文字数は160～220バイト（全角80～110文字）以内
ページで訴求したいポイントを文字数の制限内でまとめる
サイト内の各ページで個別の内容になるように設定すること

文字数については<title>と似た理由ですが、ポイントは下限を設定しているところです。
文字数が少なくなりすぎると、説明文が1行になってしまい、他の検索結果よりも専有面積が狭くなってしまいます。

correct-description-of-head-tag-04

3行が1行になると、こんなにも差がでます。

表示できる文字数は<title>よりも多いですが、できるだけわかりやすく訴求ポイントを記述しましょう。
また、<title>と一緒に表示されますので、お互いの内容を工夫して記述すると、より魅力的に見せることができます。

⇒meta description（メタディスクリプション）とは？SEOを意識した文字数と記述方法

<meta name=”keywords”>

参考：Google does not use the keywords meta tag in web ranking

同様に、Bingなどの検索エンジンでもサポートはしていませんが、記述の内容によってはマイナスの評価をする可能性があることを発表しています。

参考：Bing blogs Blame The Meta Keyword Tag

一見、設定の必要がなさそうな<meta name=”keywords”>ですが、Google Adwordsの動的検索広告を利用する場合は、<meta name=”keywords”>の内容が出稿内容を決定するために利用されていますので、設定しておきましょう。

設定する際は、上述したとおりマイナスの評価を受けないために、タグの中に記述するキーワードのが数は2～5つ以内で設定するようにしてください。

⇒メタキーワード：<meta name=”keywords”>は設定すべき？

<link rel=”canonical”>と<link rel=”alternate”>

一方、<link rel=”alternate”>は、デスクトップPCユーザー用のページとモバイルユーザー用のページの双方が用意されている場合、PCユーザー用サイトに「Mobile Link Discovery」と呼ばれるlinkタグを設置することにより検索エンジンにモバイルユーザー用ページの存在を通知できます。

主にURLの正規化のために使用するタグですが、サイトの構成によって使い方が異なるために、注意が必要です。それぞれのタグの使い方は当サイト「デジ研」でも解説していますので、ご参考ください。

⇒URLの正規化とは？正規化が必要な理由と実践方法

OGPタグ

OGPは「Open Graph Protocol」の略称で、HTMLの内容をSNS上などでそのページのURLや画像、サイトの種別などを正確に伝えるために必要な情報です。

OGPタグを設定するとFacebookやGoogle+などのSNSでシェアされた際に表示されるタイトルや説明文、サイトのURLや画像などさまざまな内容をリッチに見せることが可能です。SEOとは直接的に関係がありませんが、SNS上での拡散も大きな集客効果があります。SNS運用している方は、ぜひ参考にしてみてください。

correct-description-of-head-tag-05

OGPを設定すると、コンテンツの訴求ポイントである画像など、SNS上での見せ方が大きく変わります！

DOCTYPE宣言

DOCTYPE宣言とは、HTMLソースがどのバージョンを利用して、どのDTD（文書型定義）に従って記述されているかを文頭で宣言することです。

ブラウザで実際にページを開いたときに表示されるものではありませんが、検索結果画面で発生することのある文字化けを未然に防いだり、サイトのテーマを明確化したり、あるいは検索結果画面の説明文（スニペット）をコントロールするなど、SEOにおいては非常に重要な箇所です。

XHTMLでは、XML宣言をするように強く求められていますが、冒頭の一文を挿入することでレイアウトが崩れてしまうことがあります。また、XML宣言を追加してもGoogleからの評価がよくなるということはありません。どうしてもきっちりとコードを記述したい、という方はXML宣言文を追加してください。

なお、文字コードにUTF-8を使用すればXML宣言を省略することが可能です。IE6・7への対応が楽になります。

XML宣言の注意点

<html>の開始タグには「lang」属性を指定してください。
（XHTMLの場合は「xml:lang」及び「xmlns=”http://www.w3.org/1999/xhtml”」も必要）
Strictでのコーディングは困難を極めます。
コーディングの際には、Transitionalでの記述をオススメします。
“encoding”、”charset”は基本的にグローバルスタンダードであるUTF-8を推奨します。
<script>を使用する際は、<meta http-equiv=”content-script-type” content=”text/javascript”>を設定して下さい。
“style”属性を使用する際は、<meta http-equiv=”content-style-type” content=”text/css”>を設定して下さい。
<style>の使用は避け、スタイルシートに外部化してください。
動作上問題なければ<script>～</script>は外部化してください。
重複インデックスによる弊害を避けるため、<link rel=”canonical”>を設定してください。
（<link rel=”canonical”>の”href”属性には各ページ固有のURLを指定します。
全てのページに同一の内容を記述してしまうことが絶対に無いよう、ご注意ください。）

記述サンプル（HTML4.01）

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>○○○○</title>
<meta name=”description” content=”80～100文字程度の説明文”>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<meta http-equiv=”Content-Style-Type” content=”text/css”>
<link rel=”stylesheet” type=”text/css” href=”◯◯◯.css”>
<link rel=”canonical” href=”http://www.example.com/01/”>
<script type=”text/javascript” src=”△△△.js”></script>
</head>

記述サンプル（XHTML）

※ 文字コードをutf-8に指定する場合は一行目のXML宣言は不要

<?xml version=”1.0″ encoding=”shift_jis”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html lang=”ja” dir=”ltr” xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” />
<title>○○○○</title>
<meta name=”description” content=”キーワード○○を含む、100文字程度の説明文。” />
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<link rel=”stylesheet” type=”text/css” href=”◯◯◯.css” />
<link rel=”canonical” href=”△△△” />
</head>