head内に書くべきタグを総まとめ:SEO対策に有効なものは?

今回はhead内に書いておきたいタグを総まとめしていきます。

HTMLのheadタグとは?

みなさんが普段ネットサーフィンするときに見ているWebページはHTMLにより作られています。HTMLは、大きくheadと、bodyに分けることができます。

記事図表

  • head<head>...</head>ではさまれた部分。訪問者に直接は見えないタグを入れる
  • body<body>...</body>ではさまれた部分。訪問者に見える部分がここに書かれる

皆さんが今この瞬間に見ているこのページの文字や画像は、bodyタグ内に書かれています。

headタグ内には、検索エンジンやブラウザに情報を提供したり、指示を出したりするためのタグを書きます。調べない限り、訪問者の目には触れません。

headタグ内には主にmetaタグとlinkタグを入れる

metaタグと呼ばれるものをheadタグ内に書くことで、文字コードの指定や、ブラウザでの表示のさせ方、検索エンジンへのインデックス(掲載)有無の指定をします。

linkタグと呼ばれるものをhead内に書くことで、CSSファイルの読み込み指定をしたり、ページ同士の関係性を検索エンジンに伝えたりすることができます。

サルワカくんの顔(通常)
サルワカくん

メタタグ、linkタグともにたくさんの種類があります。それゆえに、Web制作やブログのカスタマイズをしていると「結局何を入れるべきなのか」「何がSEO的に効果があるのか」迷ってしまうのですよね。

というわけで、今回はheadタグ内に書くべきものを、meta、linkタグ合わせて総まとめします。

headタグ内に書くべきもの一覧

それぞれのタグには重要度に応じてラベルをつけました。

  • 重要:必ず書いておきたい
  • 推奨:できれば書いておきたい
  • SEO対策:SEO対策に関わるもの

1. 文字のエンコード

<meta charset="utf-8">

重要 文字コードを指定するためものです。日本語のサイトであれば、必ず書いておきましょう。

2. Internet Explorer用の設定

<meta http-equiv="X-UA-Compatible" content="IE=edge">

重要 IEには過去のバージョンで表示させる「互換モード」という機能があります。訪問者がこれを有効にしている場合に、古いIEと同じように表示され、デザインが崩れてしまう場合があります。
こちらのmetaタグを指定することで、常に標準モードで表示させることができます。

3. viewport設定

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

重要 スマホ/タブレット表示にも対応した「レスポンシブデザイン」のサイトを作るためには、viewport設定タグを書いておく必要があります。

4. タイトルタグ

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

重要 SEO対策
titleタグ内で指定したテキストは、検索結果やブラウザのタブに表示されます(検索結果では反映されない場合もありますが)。また、必ず書いておくようにしましょう。人気のブログサービス(WordPress、はてなブログ、アメブロなどなど)では、まず間違いなく自動出力されるようになっています。

titleタグはブラウザのタブに表示される

titleタグは検索エンジンにも使われる

5. メタディスクリプション

<meta name="description" content="ページの内容を表す文章">

推奨 ページの内容を表す文章を100字以下程度で書きます。このタグで指定した文章は、検索結果のタイトル下に表示されます(されない場合もあります)。そのため、ユーザーのクリック率を高めるために重要です。
ただし、メタデスクリプションを書いたからと言って、直接的な検索順位上昇効果はありません。検索ユーザーのために書くようにしましょう。

メタタグがどう表示されるか

メタデスクリプションについての詳しい解説を見る

6. meta robots

<meta name="robots" content="noindex,nofollow">

重要 SEO対策
検索エンジンに対して「このページをインデックス(掲載)しないで!」という指示をします。content="noindex,follow"と書けば、「このページを掲載しないで!けどページのクロール(巡回)はして!」という指示になります。
インデックス・クロール共に普通にしてもらいたい場合には、何も書かなければOKです。content="index,follow"と書いても、意味はありません。

meta robotsの詳しい解説を見る

7. OGPタグ/twitterカード

<meta property="og:url" content="ページのURL" /> <meta property="og:title" content="ページのタイトル" /> <meta property="og:type" content="ページのタイプ"> <meta property="og:description" content="記事の抜粋" /> <meta property="og:image" content="画像のURL" /> <meta name="twitter:card" content="カード種類" /> <meta name="twitter:site" content="@Twitterユーザー名" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:locale" content="ja_JP" /> <meta property="fb:app_id" content="appIDを入力">

重要 facebookやtwitterなどのソーシャルメディアでシェアされたときに、リンクを魅力的に表示させるための設定です。ソーシャルメディアからの流入を伸ばすために必須です。

Twitterカードとは

詳しくはこちらの記事をどうぞ。

8. URLの正規化(link rel=”canonical”)

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

推奨 SEO対策
SEO的にも重要なlinkタグです。複数の内容が重複するページが生まれてしまった場合に、検索エンジンからのページ評価が分散してしまうのを防ぐことができます。
例えば、PC表示ページと、スマホ用ページでURLが異なるとします。見た目は違っても内容が同じなのであれば、評価は統一されるべきですよね。
そこで、スマホ用ページのhead内に<link rel="canonical" href="PCページのURL">と書けば、PCページのURLに検索からの評価をまとめることができるのです。

サルワカくんの顔(通常)
サルワカくん

ただし、内容が被っている(似ている)だけの記事同士で使うものではありません。あくまでもURLや見た目は違うけど、内容は全く同じページ同士で使うためのものです。

canonicalの詳しい解説を見る

9. サイトアイコンの指定

<link rel="icon" href="画像URL" sizes="16x16" type="image/png"> <link rel="icon" href="画像URL" sizes="32x32" type="image/png"> <link rel="icon" href="画像URL" sizes="48x48" type="image/png"> <link rel="icon" href="画像URL" sizes="62x62" type="image/png">

ファビコン

推奨 ブラウザのタブに表示されたり、ブックマークしたときのサイトアイコンとして使用される画像を指定します。様々な環境に対応するように、「16×16」のようにサイズごとにタグを用意します。
上のサンプルは、png画像を使う場合のコードです。gif画像を使いたい場合には、type="image/gif"とします。JPEG画像は使わないようにしましょう。

IE8〜10に対応する方法

さきほどのコードでほとんどのブラウザに対応していますが、IE8〜10には対応していません。IE8〜10では、PNGやGIFではなく.icoという画像形式で指定する必要があるのです。

<link rel="shortcut icon" href="画像URL(.ico)" type="image/x-icon">

↑上記のタグで指定することで、これらのブラウザにも対応できます。とはいえ、今やシェアも限られていますし、指定しなくてもアイコンが表示されないだけなので、基本的には不要な気がしますが…。

10. スマホ用アイコン画像

<link rel="apple-touch-icon-precomposed" href="画像のURL" />

サイトのブックマークアイコンとしても使われる

推奨 スマホでホーム画面にページを保存したときに使われるアイコンです。PNG形式の画像を用意・指定しましょう。150×150くらいのサイズにしておくと良いのではないかと思います。

11. Windows用タイル設定

<meta name="msapplication-TileImage" content="画像のURL" /> <meta name="msapplication-TileColor" content="カラーコード(例:#F89174)"/>

Windowsのピン止めWindows8のピン留め機能

Windows8〜登場したピン留め機能用の「画像」と「色」の設定です。サイトがピン留めされたときのタイル画像と背景色を指定しておくことができます。

12. CSSやJavaScriptファイルの読み込み

<link rel="styleshee" href="CSSファイルのURL"> <script src="JavaScriptファイルのURL"></script>

紹介するまでも無いかもしれませんが、外部のスタイルシート(CSS)やスクリプトを読み込むためのタグになります。

13. フィードページのURLを指定

<link rel="alternate" type="application/rss+xml" title="フィード" href="フィードページのURL" />

RSSリーダーに対して「このサイトのフィードはこのページで取得できるよ」と伝えるものになります。WordPressだと自動出力されます。

14. 分割ページ用のタグ

<link rel="prev" href="前のページのURL"> <link rel="next" href="次のページのURL">

主に1つの記事を複数ページに分割したときに使います。1ページ目のhead内には<link rel="next" href="2ページ目のURL">、最後のページには<link rel="prev" href="1つ前のページのURL">、それ以外のページにはprev、nextの両方を使って、前後のページのURLを指定します。

15. 電話番号やメールアドレスの変換設定

<meta name="format-detection" content="email=no,telephone=no,address=no">

ブラウザによっては、ページ内の電話番号やメールアドレス、住所を自動でリンクに変換してくれます。勝手にリンクにして欲しくないという場合に、こちらのmetaタグを指定しておきます。

サルワカくんの顔(通常)
サルワカくん

この他にもたくさんの種類のlinkタグやmetaタグがありますが、基本的にはここまで紹介してきた内容を抑えておけばOKです。

書く必要のないもの

  • メタキーワード:現在ではSEO効果はありません。<meta name=”keywords” content=”キーワードを,で区切って指定”>
  • 言語設定:不要です。<meta name=”language” content=”Japanese” />
  • 著者名の明記:SEO効果はありません。<meta name=”author” content=”著者名”>

SEOに強いメディアが書いているheadタグ

ここで気になるのが「SEOに強い」と言われるWebメディアがheadタグ内に何を書いているのか、ということですよね。というわけで、いくつか調べてみました。

Google公式ブログ

google公式ブログ

検索エンジンを開発している会社の公式ブログなので、きっと必要なものは網羅されているはずです。

  • 文字エンコード<meta charset=”utf-8″ />
  • IE対応<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  • タイトルタグ<title>~</title>
  • viewport設定<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  • メタデスクリプション<meta name=”description” content=”〜”/>
  • 外部CSSの読み込み<link rel=”stylesheet” href=”〜” />
  • 各種OGPタグ&Twitterカード

headタグ内に書かれているものはとてもシンプル。上で紹介したタグのうち、重要をつけたものが中心ですね。

キナリノ

キナリノ

カカクコムが運営する大手のキュレーションメディアです。月間のPV数は、2017年6月時点で4000万超えだそうですが(参考)、そのほとんどは検索流入だと予想されます。

  • IE対応<meta http-equiv="X-UA-Compatible" content="IE=Edge">
  • タイトルタグ<title>〜</title>
  • メタデスクリプション<meta name="description" content="〜" />
  • メタキーワード<meta name="keywords" content="" />
  • スマホページURL<link rel="alternate" href="~" media="only screen and (max-width: 640px)" /&gt
  • URLの正規化<link rel="canonical" href="~" />
  • OGPタグ/Twitterカード設定
  • 外部CSSの読み込み<link rel="stylesheet" media="all" href="~" />
  • 外部JavaScriptファイルの読み込み<script src="~" ></script>
  • Windows用タイルカラー設定<meta name="msapplication-TileColor" content="#FFFFFF">
  • Windows用タイル画像設定<meta name="msapplication-TileImage" content="~">
  • アイコン/ファビコン設定<link rel="icon" type="image/png" href="~" sizes="~">
    <link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />

↑こちらもあまり目新しいタグはありませんね。

NAVERまとめ

naverまとめ

国内最大手のまとめメディアですね。Googleの検索エンジンのアルゴリズム変更により、キュレーションメディアが軒並み検索順位を落としている中、NAVERまとめはその影響をあまり受けていないようです。

  • 文字エンコード<meta charset="UTF-8">
  • IE対応<meta http-equiv="X-UA-Compatible" content="IE=Edge">
  • タイトルタグ<title>〜</title>
  • メタデスクリプション<meta name="description" content="〜" />
  • リファラの設定解説はこちら<meta name="referrer" content="unsafe-url">
  • NOYDIR設定解説はこちら<meta name="robots" content="noydir">
  • フィーチャーフォン用のURL<link rel="alternate" media="handheld" href="~" />
  • Android用のURL<link rel="alternate" href="android-app://~"/>
  • iPhoneアプリ用のURL<link rel="alternate" href="ios-app://~"/>
  • URLの正規化<link rel="canonical" href="~"/>
  • 外部CSSの読み込み<link rel="stylesheet" href="~" />
  • 外部JavaScriptファイルの読み込み<script src="~" ></script>

↑ユニークなタグが並びます。1記事が複数ページに分割されているにも関わらずrel="next"rel="prev"のlinkタグは使われていません。
その代わりに2ページ目以降では、URLの正規化タグ(link rel="canonical")で1ページ目を指定し、評価を集中させています。
NAVERまとめがやっていることはつくづく不思議ですね・・・。

サルワカ