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

LINEで送る
Pocket

一度サイトを作ってしまうと、あまり見直すことのない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(日本国内・世界)参照)のようなので、もういらないかも。。



関連記事

WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


WordPressでGIFアニメが動かない時の対処法


今回アイキャッチ画像にGIFアニメを登録したのですが、登録時、また、メディアライブラリ内ではしっかりGIFアニメとして動…

記事を読む▷


Thumbnail_Icon_firefox_bug

Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法


Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…

記事を読む▷


[http] から [https] へ。常時SSL化対応:ワードプレス、エックスサーバー環境にて


今更ですが、、、SSL化対応することにしました。 Googleが『SSL化されたWebサイトはランキング評…

記事を読む▷


OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定


今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…

記事を読む▷


opacityの書き方 クロスブラウザ


今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…

記事を読む▷


2015最新版:PING送信先リスト20(WordPress Ping Optimizerへ登録するPingのURL)


色々と設定の見直し中なのですが、PingはSEO対策では大切なんですよね?正直まだイマイチPingは把握しきれていません…

記事を読む▷


SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.)


一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイト…

記事を読む▷


SyntaxHighlighter Evolved のサムネイル

WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法


よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、 …

記事を読む▷


Database Search and Replace Script in PHP

ドメイン&WordPressを含むサイトの引越しでの、URL変更作業:『DATABASE SEARCH AND REPLACE SCRIPT IN PHP』を使って


最近サーバー移転をして、その時々に起こった問題や注意点を記事にしてましたが(301リダイレクトの記述方法、URLの正規化…

記事を読む▷


Message

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

参考にさせていただいてるサイト

PAGE TOP