SEOを意識したhtmlヘッダの書き方
まず、HTMLの書き出しから主に<head>～</head>部分のことについて記載します。
DOCTYPE宣言
htmlの先頭に書いておかなければならないのが、DOCTYPEです。
HTMLやCSS等、どのバージョンに対応したサイトなのかを先頭に記載しておきます。
DOCTYPEと<html>のサンプルを以下に書いておきます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
そして、ヘッダ内の構成要素として重要なものがMETAタグとTITLEタグ。
METAは、ページの各種属性を意味し、文字コードの指定やページの概要、キーワードなどを記述します。
TITLEは、その名のとおり、ページのタイトルを記述します。
METAタグによる文字コードの指定
まずはMETAタグを使ってサイトの文字コードを書きます。
文字コードを指定するMETAタグはTITLEタグよりも上が好ましいと言われています。
サンプルは以下のようになります。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
TITLEタグ
そしてTITLEタグですが、サイトの内容を示すタイトルを記載します。
このとき、ページのテーマを意味する重要な(SEOで狙う)キーワードを先頭から順に使用するようにしましょう。
文字コード以外のMETAタグ
まずは検索エンジンにインデックスしてもらえるようにrobotsを設定します。
このページをクロールしてインデックスしなさいという意味のfollow,indexを設定しておいてください。
そしてページの概要を表すkeywordsとdescription、Abstractです。
keywordsは、ページのテーマとなるキーワードを先頭から順に2～3つほど記述します。
あまりたくさん並べすぎないよう、サイト内の別のページと重複しないように注意してください。
descriptionは重要なキーワードを含む文章とします。
何より検索結果として表示されますので、ユーザビリティ面を考えてもしっかりと概要を記載しておいた方が良いでしょう。
また、Abstractは、descriptionの補助的要素と言われていますので、descriptionとは異なる文章で、重要なキーワードを含むようにセットしてください。
Abstractは必要はないとの考え方が多いですが、時々Yahoo!でAbstractが有効に働いているサイトも見かけますので、一応入れておく程度に考えておけば良さそうです。
keywordsとdescription、Abstractを指定する上で以下の点だけは特に気をつけておきましょう。
- キーワードが重複しすぎないように
1回ぐらいであれば多めに見てもらえる傾向がありますが、重複は基本的にNGです - BODY部分にないワードは使わない
スパムと判定される場合がありますし、BODY部にないキーワードを入れておいたところで、検索キーワードとして有効とはされないようです。
これ以外にも、長すぎず短すぎずというところには注意しておいてください。
ヘッダ部のその他のタグ
特筆すべきことでもありませんが、クロール時にHTML容量は小さいほうが読みやすくなると書きました。
CSSやJavascriptを別ファイルとして、ヘッダ部分で呼び出すようにしておくと良いでしょう。