<head>タグの記述例=順番等もきちんと考えた雛形(テンプレート)

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

<head>タグの雛形(テンプレート)

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="robots" content="index, follow">
  <title>【 1:title 】</title>
  <meta name="description" content="【 2:description 】">
  <meta name="keywords" content="【 3: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="【 1:title 】">
  <meta property="og:description" content="【 2:description 】">
  <meta property="og:url" content="【 4:ページURL 】">
  <meta property="og:image" content="【 5:ページURL/ogp.png 】">
  <meta property="og:site_name" content="【 6:サイト名 】">
  <meta property="og:locale" content="ja_JP">
  <meta property="fb:app_id" content="【 7:FBのapp_id 】">
  <!-- ▼Twitter Cardsの設定-->
  <meta name="twitter:card" content="summary"><!--大きい画像があればsummary_large_image-->
  <meta name="twitter:site" content="【 6:サイト名 】">
  
  <link rel="shortcut icon" href="/favicon.ico"><!--ファビコン-->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!--スマホ用アイコン-->
  <link rel="canonical" href="【 5:ページURL(上の4と別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の観点からの簡単な説明も記載しておくので、それを読んで作成してください。

【 1:title 】

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

【 2:description 】

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

【 3:keywords 】

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

【 4,5:ページURL 】

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

【 6:サイト名 】

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

【 7: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(上の4と別URLになる場合あり) 】”>

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

cssファイル

適宜そのページに必要なcssファイルを記載する。

jsファイル

適宜そのページに必要なjsファイルを記載する。

<script src=”/js/html5shiv.js”></script>

IEの8以前Ver.対策用。IE8以前を使っている人の割合は現在1%前後(WebブラウザシェアランキングTOP10(日本国内・世界)参照)のようなので、もういらないかも。。

Google AdS



関連記事

WordPressでリダイレクト:『.htaccess』の書き方まとめ


『.htaccess』は変更する頻度が少ないので、変更する時に勉強して把握しても、一度変更してしまえばそれでおしまい!と…

記事を読む▷


ページネーションがおかしい!次のページに行かない原因と解決方法|サムネイル

ページネーションがおかしい!次のページに行かない原因と解決方法|WP-Pagenavi・表示設定を見直す


今まで何度もWordPressのテンプレートをカスタマイズし、問題なくページネーションは機能していたのですが、なぜか今回…

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


共通パーツ(header,footer等)を読み込んで編集を楽にする方法:PHP編 サムネイル

共通パーツ(header,footer等)をPHPで読み込んで編集を楽にする方法


headerやfooterに限らず、同じパーツを使っている場合は、共通パーツを読み込ませて管理した方が断然楽ちんです。で…

記事を読む▷


no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Google AdS

  • 人気の記事

    デザイン・撮影サービス

    3STARS DESIGN(スリースターズ デザイン) |デザインサービス 3STARS(スリースターズ)|スタジオサービス

新着記事

  • デザインサービス

    3STARS DESIGN(スリースターズ デザイン) |デザインサービス