SEO対策で本当に必要なヘッダーの必要要素(10 要素 )について説明します。
htmlをざっくり分割するとすれば、検索エンジンやブラウザに向けた情報を記載するheader部分とユーザーに見える部分（本文）のbodyにわかれます。
- head・・・<head>～</head>タグで囲まれた部分です。titleタグ以外はブラウザ上で表示されません。ドキュメント全般の情報やcss 、js等の外部ファイルを指定します。
- body ・・・<body>～</body>タグで囲まれた部分です。ブラウザの画面上に表示される部分となります。
ヘッダーに記載すべき要素としては、エンコードやtitleやcanonicalタグ・mataタグやOGPタグ/twitterカードなどがあります。
ここでは、ヘッダーに書くべき内容についての解説と、特に検索エンジン経由ユーザーのクリック数向上につながるtitleタグの記載方法や、mata description(ページの説明文）について詳しく解説します。
ヘッダーに書くべき10の事内容
1.文字のエンコード
<meta charset="utf-8" />文字コードを指定するためのmata タグです。utf-8でも大文字のUTF-8でも問題はありません。
文字コードの指定はShift-JISやEUC-JP等ありますが、ほとんどがutf-8なのでutf-8を指定すれば良いでしょう。
ちなみにutfは文字符号化方式の文字コードで世界で最もポピュラーです。
2.titleタグ
SEOにおいてtitleタグは、検索順位やクリック率に影響を与えるため本当に重要な要素です。
titleタグ:書き方のポイント
- 30文字以内で書く
- 重要なキーワードは先頭付近に
- キーワードは１回で、繰り返さない
- 複合キーワードを意識する
- 詰め込ませ過ぎや、羅列はNG。
- 他ページと文言を重複・競合させずに、全ページ固有のタイトルにする
- ユーザーがクリックしたくなるように記載する
タイトルタグの最適化については、「SEO効果の高いtitleタグの書き方教えます。」をご覧ください。
3.viewport設定
<meta name="viewport" content="width=device-width,initial-scale=1">スマホやタブレット表示でも最適化されている「レスポンシブデザイン」の場合は、viewport設定が必要となります。
メジャーなWordpressのテーマを利用している場合、ほとんどレスポンシブ対応となっており、header内にviewport設定が記述されているので
特に意識する必要はありません。
4.Internet Explorer用の設定
<meta http-equiv="X-UA-Compatible" content="IE=edge" />IEの機能である旧バージョンで表示させる「下位互換モード」がありこのモードが使われると表示ズレを起こす事があり、その防止として強制的にそのIEの最新モードで表示させる設定です。
IEのシェアも昔ほど高くないので、絶対に必要な設定かと言えるか微妙です。
5.meta descriptionタグ
検索順位には影響しませんがクリック率に大きく影響するのが、ページ内の内容説明に使われるmeta descriptionタグです。
meta descriptionタグに書きたい要素
- 重要なキーワード
- 電話番号や場所、店舗所在地、住所、営業時間、用途、対象など
- 自社の強み
- titleタグに入れられなかったこと
- 行動を促す文言
膨大なページ数を抱えるサイトを運営している場合、全てのページにmeta descriptionタグを書くのは困難かと思います。
その場合は、重要なページのみ記載しましょう。
ちなみに、ページ内に使われているキーワードを記述するmeta descriptionタグは、現在では記載する必要はありませんので 設置不要です。
6.urlの正規化
<link rel="canonical" href="正規化するURL" />内容が重複するページがあった場合、どのページを優先的に評価してもらうかを指定するcanonicalタグは超重要です。
検索順位に貢献すると言うよりもマイナス評価を避けるために用います。
このタグの詳しい説明や、urlの正規化については改めて記載します。
7.OGPタグ
OGPタグは、FacebookやTwitter、Google+、mixiなどのSNSでシェアされた際に、そのWEBページのタイトルやurl・概要やイメージ画像などを、制作者側の意図したとおりに正しく伝えるためのタグです。
SNSでの拡散を通じて多くの人に記事をみてもらうためには、大切な設定と言えます。
8.ファビコン
ブラウザのタブや、ブックマークしたときのアイコンとして使用される画像を指定します。
9.スマホ用アイコン
<link rel="apple-touch-icon-precomposed" href="画像のURL" />スマホでホーム画面にページを保存したときに使われるアイコンを指定します。
10.ページのインデックスを拒否したい場合
<meta name="robots" content="noindex,nofollow" />検索エンジンに対して、ページをインデックスして欲しくない時のみ記述します。
