この記事ではhead内に書いておきたいタグを総まとめしていきます。
目次
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内に書くべきタグとは
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>titleタグ内で指定したテキストは、検索結果やブラウザのタブに表示されます（検索結果では反映されない場合もありますが）。また、必ず書いておくようにしましょう。人気のブログサービス（WordPress、はてなブログ、アメブロなどなど）では、まず間違いなく自動出力されるようになっています。
5. メタディスクリプション
<meta name="description" content="ページの内容を表す文章" />ページの内容を表す文章を100字以下程度で書きます。このタグで指定した文章は、検索結果のタイトル下に表示されます（されない場合もあります）。そのため、ユーザーのクリック率を高めるために重要です。
ただし、メタデスクリプションを書いたからと言って、直接的な検索順位上昇効果はありません。検索ユーザーのために書くようにしましょう。
6. meta robots
<meta name="robots" content="noindex,nofollow" />検索エンジンに対して「このページをインデックス（掲載）しないで！」という指示をします。インデックス・クロール共に普通にしてもらいたい場合には、何も書かなければOKです。content="index,follow"と書いても、意味はありません。
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などのソーシャルメディアでシェアされたときに、リンクを魅力的に表示させるための設定です。ソーシャルメディアからの流入を伸ばすために必須です。
8. URLの正規化（link rel=”canonical”）
<link rel="canonical" href="正規化するURL" />SEO的にも重要なlinkタグです。複数の内容が重複するページが生まれてしまった場合に、検索エンジンからのページ評価が分散してしまうのを防ぐことができます。
例えば、PC表示ページと、スマホ用ページでURLが異なるとします。見た目は違っても内容が同じなのであれば、評価は統一されるべきですよね。
そこで、スマホ用ページのhead内に<link rel="canonical" href="PCページのURL">と書けば、PCページのURLに検索からの評価をまとめることができるのです。
ただし、内容が被っている（似ている）だけの記事同士で使うものではありません。あくまでもURLや見た目は違うけど、内容は全く同じページ同士で使うためのものです。
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）"/>
Windows8〜登場したピン留め機能用の「画像」と「色」の設定です。サイトがピン留めされたときのタイル画像と背景色を指定しておくことができます。
12. CSSやJavaScriptファイルの読み込み
<link rel="stylesheet" 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です。
チェックテスト
チェックテストを確認する
下記2つのタグ名を設定すべき属性付与した状態にてdiscordにて共有ください。
①スマホ/タブレット表示にも対応させるためのタグ及びその属性
②文字コードを指定するタグ及びその属性
