＜head＞タグの記述例＝順番等もきちんと考えた雛形（テンプレート）

2021/05/20
2019/05/19
HowTo, SEO
コピペ

一度サイトを作ってしまうと、あまり見直すことのないheadタグ内の記述。新たなLPを作ったりする時でも、以前作ったもののコピペで何も考えずに作ってしまうのですが、SEO対策を見直してるうちに、今後のことも考えて順番等もきちんと考えた雛形（テンプレート）を作っておこうかな。という気になったので作ってみました。

＜head＞タグの雛形（テンプレート）

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="robots" content="index, follow">
  <title>【　１：title　】</title>
  <meta name="description" content="【　２：description　】">
  <meta name="keywords" content="【　３：keywords　】">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--IE対策-->
  <!-- ▼OGPの設定 -->
  <meta property="og:type" content="article">
  <meta property="og:title" content="【　１：title　】">
  <meta property="og:description" content="【　２：description　】">
  <meta property="og:url" content="【　４：ページURL　】">
  <meta property="og:image" content="【　５：ページURL/ogp.png　】">
  <meta property="og:site_name" content="【　６：サイト名　】">
  <meta property="og:locale" content="ja_JP">
  <meta property="fb:app_id" content="【　７：FBのapp_id　】">
  <!-- ▼Twitter Cardsの設定-->
  <meta name="twitter:card" content="summary"><!--大きい画像があればsummary_large_image-->
  <meta name="twitter:site" content="【　６：サイト名　】">
  
  <link rel="shortcut icon" href="/favicon.ico"><!--ファビコン-->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!--スマホ用アイコン-->
  <link rel="canonical" href="【　５：ページURL（上の４と別URLになる場合あり）　】">
  <!-- ▼CSS -->
  <link rel="stylesheet" type="text/css" href="/css/リセットのstyleや、ベースのstyle.css">
  <link rel="stylesheet" type="text/css" href="css/そのページのstyle.css">
  <!-- ▼JS -->
  <script type="text/javascript" src="/js/jqueryのjs.js"></script>
  <script type="text/javascript" src="js/そのページのcommon.js"></script>
 
  <!-- ▼IE8以前Ver.対策 -->
  <!--[if lt IE 9]>
  <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head>

順番の説明

＜title＞タグの前には、＜meta charset=”utf-8″＞と＜meta name=”viewport”＞の2つのタグを置いておけば問題ないのですが、＜meta name=”robots”＞はこのページをindexするかしないか、のタグなので、＜title＞タグの前に持ってきてます。

変更する項目の説明

基本的にはそのページごとに事なる項目です。
SEOの観点からの簡単な説明も記載しておくので、それを読んで作成してください。

【　１：title　】

対策キーワードをなるべく文頭に置き、全角30文字前後（～33文字目安）になるように記載。
Google, Yahooで検索した時にでてくるタイトルに、そのまま出て来やすいと思われる。
（文字数が33文字以上になったり、記号が使われると、はみ出た部分が削除されたり、勝手に変更されて表示されたりする。）

【　２：description　】

全角120文字以内に収めるとベター。
（文字数が約120文字以上になると、省略されたり、勝手に変更されて表示されたりする。）

【　３：keywords　】

基本は4つまで。でも、Googleはkeywordsを参照してないと公言してるので重要では無い=基本はいらないが念のため入れてる。

【　４,５：ページURL　】

このページの正規化されたURLを記載。４と５は基本同じURLだが、５は似たようなページがあり、そちらを優先させたい場合に使用。５=canonicalは省略可。詳細は下記に記載。

【　６：サイト名　】

そのページのサイト名を記載。

【　７：FBのapp_id　】

お持ちのFBのapp_idを記載。

各タグの簡単な説明

＜meta charset=”utf-8″＞

文字化けを防ぐために必ず必要。他に『Shift_JIS』『EUC-JP』もあるが、html5の推奨＝『UTF-8』なので、基本は『UTF-8』で。

＜meta name=”viewport” content=”width=device-width”＞

スマホ、タブレットでレスポンシブ対応するには『widthはdevice-width』が必要。
『initial-scale=1.0』も書いているページも多いが、基本的に自動的に”1″になるので記載は不要。
レスポンシブでないページは『width=1100』等、任意の値を設定する。

＜meta name=”robots” content=”index, follow”＞

検索エンジンにインデックス（掲載）させたくない場合は、”noindex”を、
クローラーにリンクを辿らせたくない場合は、 “nofollow”に設定する。

＜meta name=”format-detection” content=”telephone=no”＞

iOSのSafariでは、ページ内の電話番号と思われる数字の羅列を自動的にリンク化するので、誤認識で自動リンク化させないために『telephone=no』を設定しておく。
電話番号をリンク化したい場合は＜a href=”tel:000000000″＞000000000＜/a＞タグで。

＜meta http-equiv=”X-UA-Compatible” content=”IE=edge”＞

IEには「互換表示」と「標準モード」の2つの表示方法があり、ユーザーの環境によっては最新のバージョンでない場合があるので、そのような場合のレイアウト崩れ防止のため、記載しておく。
※IE11では互換表示ボタンが表示されなくなったようなので、今後必要ないかも？

OGP、Twitter Cards

SNS（主にFacebook と Twitter）でシェアした時等にでてくる表示のために設定しておく。
表示される画像は基本は同じなので、シェアを重要視したい場合は違う画像を作り、個別に設定する。

＜link rel=”shortcut icon” href=”/favicon.ico”＞
＜link rel=”apple-touch-icon” href=”/apple-touch-icon.png”＞

Windows用アイコンも必要との記事も見ますが、基本はこの2つで問題なし。
最上位階層に「favicon.ico」と「apple-touch-icon.png」を置いていれば、この2つも必要なし。
ちなみに当方管理のサイト（数百ページの大規模サイト）で、最上位階層に上記2つのファイルを置いていただけで全て問題なくファビコン、スマホ用アイコンも表示されているのを確認済み。

＜link rel=”canonical” href=”【　5：ページURL（上の４と別URLになる場合あり）　】”＞

基本は似たようなページがあり、そちらを優先させたい場合に使用し、評価の統合をさせる。それ以外は省略可。
また、きちんとGoogleに認識させたい場合にも使用。例えばindex.htmlのある、なしの2ページがあれば、どれが正しいURLか検索エンジンは判断できない。これは「重複コンテンツ」とみなされたり、評価が分散したりするので、そういう問題を防ぐためにここに正規化されたURLを記載し、検索エンジンに正しいサイトのURLとして認識させる。