WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

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

SEO歴16年、継続率90%以上の良質なSEO会社をお探しの方へ

SEOのアウトソーシングがはじめての人でも大丈夫!当社のSEOコンサルティングは、お客様に合わせて施策をカスタマイズするこだわりのサービスです。

SEOコンサルティングサービスを見る
このエントリーをはてなブックマークに追加

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

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

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

誰でも簡単にSEO対策ができるIntimateSEO

<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>の最適化のポイントは以下のとおりです。

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

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

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

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

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

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

titleタグ(タイトルタグ)とは?SEOを意識した最適な文字数と記述方法

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

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

<meta name=”description”>

<meta name=”description”>は、HTML文書(ページ)の概要を記述するタグです。
<title>と同じく、検索結果の画面に説明文(スニペット)として表示されます。

correct-description-of-head-tag-03

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

<meta name=”description”>の最適化のポイントは以下のとおりです。

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

<meta name=”description”>に狙いたいキーワードを盛り込むと、検索結果画面に表示される説明文(スニペット)が太字で表示されるため、クリック率に影響が出ます。太字の前後に訴求したいポイントを記述すると目立たせることができますね!

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

correct-description-of-head-tag-04

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

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

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

<meta name=”keywords”>

<meta name=”keywords”>はHTML文書(ページ)のキーワードを指定するタグです。
Googleは公式に<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=”canonical”>と<link rel=”alternate”>も<head>内に記述するタグです。

<link rel=”canonical”>は、検索エンジンに対し、そのページを指定先のURLのコピーとして扱うべきだということと、検索エンジンが適用するリンクとコンテンツの指標はすべてこのURLに還元すべきだということを伝えるためのタグです。

一方、<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宣言の注意点

  1. <html>の開始タグには「lang」属性を指定してください。
    (XHTMLの場合は「xml:lang」及び「xmlns=”http://www.w3.org/1999/xhtml”」も必要)
  2. Strictでのコーディングは困難を極めます。
    コーディングの際には、Transitionalでの記述をオススメします。
  3. “encoding”、”charset”は基本的にグローバルスタンダードであるUTF-8を推奨します。
  4. <script>を使用する際は、<meta http-equiv=”content-script-type” content=”text/javascript”>を設定して下さい。
  5. “style”属性を使用する際は、<meta http-equiv=”content-style-type” content=”text/css”>を設定して下さい。
  6. <style>の使用は避け、スタイルシートに外部化してください。
  7. 動作上問題なければ<script>~</script>は外部化してください。
  8. 重複インデックスによる弊害を避けるため、<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>

headタグ内に記述してはいけない要素

headタグ内で今回紹介した有効なメタデータを記述すると、Googleなどの検索エンジンがページのHTMLマークアップを処理できるようになります。ところがheadタグ内に非推奨の要素を記述すると、Googleのクローラーは記述された非推奨の要素以降を読み込まなくなる可能性があります。

まずはheadタグ内で有効な要素を把握しましょう。

headタグ内で有効な要素

  • title
  • meta
  • link
  • script
  • style
  • base
  • noscript
  • template

上記の要素以外を入れてしまうと、Googleのクローラーが記述された要素以降を読み込まなくなる可能性があります。

headタグ内に不要な要素の中でも特に注意が必要な要素は以下です。

特に注意が必要な要素

  • iframe
  • img
  • その他のHTML要素

headタグ内に避けるべき要素が実際に記述されるミスは、あまり発生しませんが、独自のCMS開発やSEO要件を調整できない制作会社に依頼している場合は注意すべきポイントと言えるでしょう。

マークアップに不安なら内部施策の診断がおすすめ

もし本記事で紹介したheadタグの使用が適切にできているか不安になった場合は、内部施策が出来ているかの診断をするとよいでしょう。検索エンジンのクローラーに支障がないかの視点に基づいたチェック項目を診断したい場合は、専門のSEO会社に依頼するのが早いでしょう。当社はSEO歴16年以上に亘ってSEOサービスを行ってきましたので、内部施策の診断を網羅的に行うことが可能です。

内部施策の相談サービスを見る

まとめ

いかがでしたか?
<head>内のタグの最適化は、SEOの内部施策における基本ですが、設定次第では、集客状況が改善する可能性もあります。細かいポイントに気をつけて、ぜひ実践してみてください。

このエントリーをはてなブックマークに追加
The following two tabs change content below.
Avatar photo

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
お役立ち資料ダウンロード
SNSでフォロー
問い合わせ数5倍 1,000社以上の実績
ウルロジ EC事業特化型 物流アウトソーシング
セルマーケ
月額3万円で始められるSEO対策なら「IntimateSEO」

今話題のAIによるコンテンツ自動生成機能も!SEO対策に本当に必要な機能だけを搭載した使いやすさとコストパフォーマンスに優れたWeb集客支援ツールです。


Contactお問い合わせ

Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。

関連資料ダウンロードはこちら
サービスのお問い合わせはこちら

Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中!

Webマーケティング最新情報をお届けするDMSメールマガジン
東京営業所
東京都武蔵野市御殿山1-1-3 クリスタルパークビル2F
電話番号 0422-77-1087 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2024 DM SOLUTIONS Co.,Ltd. All rights reserved.