SEOとメタ要素とタイトル要素
解説第二弾です。
このカテゴリーは、前回ご紹介した以下のソースをソース単位に解説するシリーズになります。
- http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010
- サンプルページ:http://chaichan.lolipop.jp/src/sright.htm
今回は、CSSレイアウトとは直接関係のない内容になります。
しかし、SEO(サーチ エンジン オプティマイゼーション)と関係がありますので、知っておくとお得かもしれません。
以下の引用で順番に、html要素の開始、head要素の開始、meta要素が5個、title要素が記述されています。
<html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="Description" content="ページの概要"> <meta name="Keywords" content="キーワード1,キーワード2,キーワードetc"> <title>テスト</title>http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010
はじめのhtml要素は、lang属性が指定されています。
これは、当該要素の属性値及び内容テキストの基本言語を指定します。
jp以外には以下のようなものが少なくともあるようです。
- en...英語
- fr...フランス語
- de...ドイツ語
- it...イタリア語
head要素は割愛して、次のmeta要素の上3つは順番に以下を指定しています。
尚、文字コードでのShift_JIS以外の指定は、以下を参照のこと。
また、http-equiv属性は、本来、サーバーがHTML文書を出力する時に、このmeta要素の内容を使ってHTTPヘッダを生成するものだったのですが、実際はブラウザがmeta要素を見て文字コードを判断するのに使用されています。
あと、http-equiv属性で、基準スタイルシート言語や基準スクリプト言語を指定するのは、上記の役割を拡張し、「デフォルト情報」として明示します。これは、style要素やscript要素でなく、要素毎のstyle属性やonclick属性などでスタイルやスクリプトを定義する場合に必要なのです。
次のmeta要素のDescriptionは、html文書の概要を指定します。
必ずではないですが、グーグルとヤフーでは、ここに書かれている概要が検索内容で表示されることがあります。
次のmeta要素のKeywordsは、html文書のキーワードを複数指定します。
本html文書に関係のあるキーワードを沢山記述しておきましょう。
最後にhtml文書の最重要要素のtitle要素です。
要素内容がブラウザのタイトルバーに表示されたり、検索内容のタイトルになったりしますので、必ず、意味のあるタイトルを記述しましょう。
最重要キーワードなども括弧して、タイトルの一部に入れたりするとSEO的にはよいかもです。
尚、一言、言っておくと・・・HTML文書は、文書を構造化するものであって、サーチエンジン(グーグルやヤフー)の検索順位を上げるためのものではありません。
しかし、メタ要素とタイトル要素を上手く記述することで、検索順位が上がるのも事実なのです。
ということで、今回はCSSレイアウトとは無関係の内容でした。つづく・・・。
関連ページ:
- 解説第一弾:ドキュメントタイプと表示モード
http://d.hatena.ne.jp/chaichanPaPa/20090303/1236082845 - 解説第三弾:HTMLマーキングで文章構造化
http://d.hatena.ne.jp/chaichanPaPa/20090306/1236343007 - 解説第四弾:段組みレイアウトの解説
http://d.hatena.ne.jp/chaichanPaPa/20090308/1236483305 - 解説第五弾:CSS詳細部の解説1
http://d.hatena.ne.jp/chaichanPaPa/20090311/1236774374 - 解説第六弾:CSS詳細部の解説2
http://d.hatena.ne.jp/chaichanPaPa/20090312/1236860887