サイトのheadタグ内に最低限必須でSEO対策の上でも重要なタグや記述をまとめました。
Webページのheadタグの役割〜bodyタグとの違い
ウェブページはHTMLによって書かれていますが、大きく「headタグ」と「bodyタグ」に分かれています。
「bodyタグ」内には訪問者が検索した時に表示される情報（つまりコンテンツ）を書きますが、「headタグ」内には、このサイトがどんなものかをwebブラウザや検索エンジン（Goolge）などのコンピューターロボットに認識させる情報を書きます。
| head | body | |
|---|---|---|
| 内容 | webブラウザや検索エンジン（Goolge）などのコンピューターロボット知らせたい情報 | 訪問者に閲覧して欲しい文章や画像などのコンテンツ |
| 表示 | ブラウザに表示されず訪問者に直接みえない | ブラウザに表示され、訪問者が直接閲覧できる |
headに書くタグの種類
headタグに記載する内容は、大きく分けて「metaタグ」と「linkタグ」の2種類です。
metaタグでは、文字コードの指定、ブラウザ表示のさせ方、検索エンジンへのインデックス（掲載）有無、サイトタイトルや説明文などを指定をします。
linkタグでは、ページ同士の関係性、css・javascriptファイルの読み込み先などを記載します。
【metaデータ】headタグに必ず記載するべきリスト
正常に表示させるために必須の項目をまとめました。
- 文字のエンコード：
- viewport設定（レスポンシブサイト）
- Internet Explorer用の設定
文字化けを予防する【文字のエンコード】
文字化けを防ぐために必須のコードで、日本語サイトであれば、html5推奨の「UTF-8」を記載しましょう。
<meta charset="utf-8" />
レスポンシブサイトに必須【viewport設定】
スマホやタブレットに対応したレスポンシブデザインのサイト作成に必須のタグです。
<meta name="viewport" content="width=device-width,initial-scale=1" />
Internet Explorer用の設定
Internet Explorer（IE)での表示を常に「標準モード」にして、デザインが崩れるのを予防します。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
【metaデータ】headタグにSEO対策として書くべきリスト
- ページタイトル
- メタディスクリプション
- meta robots（noindex,nofollow）
- OGPタグ/twitterカード
- URLの正規化
- サイトアイコンの指定（ファビコン）設定
検索ユーザーにサイトをアピール【ページタイトル】
タイトルタグでは、検索結果やブラウザのタブ名として表示されるサイト（ページ）のタイトルを設定できます。
ページの内容を的確に伝えるタイトルにすることで、Googleからの信頼度も上がり、検索結果でユーザーにクリックしてもらう（選んでもらう）確率を上げることができます。
検索ユーザーが1番最初に目にするサイトの情報なので、Googleの検索結果に表示される文字数が30文字程度（スマホだと50文字程度）なので、長くなりすぎないように、重要な情報を前の方に入れましょう。
<title>ページのタイトル</title>
検索ユーザーにサイトをプレゼン【メタディスクリプション】
メタディスクリプションでは、検索結果のタイトルの下に表示される説明文を設定できます。
簡潔かつ正確にページの内容を要約してプレゼンすれば、タイトル同様にGoogleからの信頼度も上がり、検索結果でユーザーにクリックしてもらう（選んでもらう）確率を上げることができます。
検索結果に表示される文字数が120文字程度であることも考慮して作成しましょう。
<meta name="description" content="ページの概要">
検索して欲しくないページを隠してGoogleの手間を省く【meta robots（noindex,nofollow）】
noindexを記載するとGoogleの検索結果に表示されなくなりますので、ユーザーが検索しないような「お問い合わせ」などのページに設定します。
noindexはあくまでGoogleの検索結果に表示されないだけなので、URLを入力したりページ内繊維でWEBページは表示されます。
nofollowを記載するとGoogleの検索エンジンはページ内のリンクを辿らなくなりますので、リンク先のコンテンツがあまり重要でないものや質が低いものである場合、Googleの評価が下がったり、Googleがサイトをクロールする時間が無駄になってしまうのを防ぐ効果があります。
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<meta name="robots" content="noindex,nofollow">
noindexとnofollowはまとめて記載もできます。
もちろん、ほとんどのページは、リンクも含めてページとして評価されて、Googleの検索結果に表示されたいと思いますので、その場合は一切記載は不要です。
SNSシェア時代に必須【OGPタグ/twitterカード】
facebookやtwitterなどのSNS(ソーシャルメディア)でシェアされた時のリンクの設定です。
リンクが魅力的になればシェアやクリックが増えますし、ソーシャルシェアが増えるとサイトのGoogle評価も高くなるので検索順位に良い影響があります。
<!-- facebookのOGPタグ -->
<meta property="og:site_name" content="サイト名" />
<meta property="og:url" content="ページURL" />
<meta property="og:type" content="ページタイプ（website,article）" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページ説明文"/>
<meta property="og:image" content="サムネイル画像URL" />
<meta property="fb:app_id" content="appIdを入力" />
<meta property="og:locale" content="ja_JP" />
<!-- twitterのOGPタグ -->
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:description" content="ページ説明文" />
<meta name="twitter:image:src" content="サムネイル画像URL" />
重複ページのGoogle評価をまとめる【URLの正規化】
例えば全く同じ内容のページなのに、スマホとPCでURLが違う場合など複数の内容が重複するページができてしまう時に設定します。
重複ページはGoogleの評価を大きく下げるので（ペナルティの対象になることも）、重複ページのほhead内に設定してGoogleに同じページとして評価してもらいましょう。
<link rel="canonical" href="正規化するURL" />
ちなみにスマホ用ページを別に作成した場合は、スマホページの方に以下の記述を追加して、どの条件でスマホページを表示させるかGoogleに明示しておきましょう。
<link rel="alternate" media="only screen and (max-width: 640px)" href="スマホURL" />
サイトの目印【サイトアイコン（ファビコン ）設定】
サイトアイコン（ファビコン）は、ブラウザのタブに表示されたり、ブックマークしたときのサイトアイコンとして使用される画像です。
<link rel="icon" href="favicon.ico">
<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" />
【linkタグ】headタグに必ず記載するべきリスト
外部ファイル（cssとjavascript）の情報を読み込ませたい時にheadタグに記載する内容です。
CSSファイルを読み込ませたい時
cssファイルを外部から読み込む場合にはlinkタグで記載します。
<link rel="ファイルの種類" href="ファイルの場所（パス）">
jsファイルを読み込ませたい時
javascriptファイルを読み込む場合は、scriptタグで記載します。
<script src="ファイルの場所（パス）"></script>
ユーザビリティを高める設定
必須の項目ではありませんが、やっておくとユーザビリティを高められるのでファンづくりやリピート戦略には有効です。
webクリップアイコンを設定する
スマホのホーム画面にショートカットを追加した時に表示されるアイコンです。
150×150くらいの.ping形式の画像が最適です。
<link rel="apple-touch-icon-precomposed" href="画像のパス/apple-touch-icon-precomposed.png">
Windows用タイル設定
Windows8以降のピン留め機能用の「画像」と「背景色」が設定できます。
<meta name="msapplication-TileImage" content="画像のURL" />
<meta name="msapplication-TileColor" content="カラーコード（例：#F89174）"/>
フィードページのURLを指定
WordPressだと自動出力ですが、RSSリーダーに対して通知する設定です。
<link rel="alternate" type="application/rss+xml" title="フィード" href="フィードページのURL" />
分割ページの評価をまとめるタグ
ひとつのページを複数に分割している場合、ページの評価をひとつにまとめるように通知する設定ですl。
<link rel="prev" href="前のページのURL" />
<link rel="next" href="次のページのURL" />