小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

SEOとメタ要素とタイトル要素

CSSレイアウト

解説第二弾です。
このカテゴリーは、前回ご紹介した以下のソースをソース単位に解説するシリーズになります。


今回は、CSSレイアウトとは直接関係のない内容になります。
しかし、SEO（サーチ エンジン オプティマイゼーション）と関係がありますので、知っておくとお得かもしれません。


以下の引用で順番に、html要素の開始、head要素の開始、meta要素が５個、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="キーワード１,キーワード２,キーワードｅｔｃ">
<title>テスト</title>
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

はじめのhtml要素は、lang属性が指定されています。
これは、当該要素の属性値及び内容テキストの基本言語を指定します。
jp以外には以下のようなものが少なくともあるようです。

  • en...英語
  • fr...フランス語
  • de...ドイツ語
  • it...イタリア語

head要素は割愛して、次のmeta要素の上３つは順番に以下を指定しています。

尚、文字コードでの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レイアウトとは無関係の内容でした。つづく･･･。

関連ページ：