補助情報を付加しよう〜御隠居のホームページ基礎

７. 補助情報を付加しよう

せっかくWebページを作成しても、そのページをできる限り多くの人に見てもらう。また、正しく見てもらうことが重要だ。

特にサーチエンジンの上位に自分のWebページが表示されるようにする技術を 「サーチエンジン最適化（SEO：Search Engine Optimization）」といい、非常に重要視されている。

これを一から学ぶことも大事だが、まずは、どうすればできるのか？その具体的方法を見よう。これらのことを指定するためには meta要素を使用する。

meta要素

ページ作成者、エンコーディング方式、検索用キーワードなど補助情報のことをメタ情報と呼ぶ。このメタ情報は、meta要素によって記述される。具体的にはmeta要素はmetaタグを使って記述される。このmetaタグには大きく分けて２種類の書き方がある。

書き方１：<meta http-equiv="属性値" content="属性値" />
書き方２：<meta name="属性値" content="属性値" />

また、このmeta要素は、これまでの要素（html要素、head要素など）と異なり、開始、終了タグが他の要素を囲む形式ではなく、タグ単独で要素を表す。すなわち、入れ子となる内側要素を持たない要素である。このような要素を空要素と呼ぶ。空要素は、以下の形式で記述する。

<要素名　属性 />

文字エンコーディングを指定する

XHTMLの場合、第１行目のXML宣言で文字エンコーディングを指定したが、ブラウザによってはこれを無視するものもある。そこでHTML文書内にmeta要素を使って、文字エンコーディングを明示的に指定する必要がある。具体的な書き方としてはmeta要素の「書き方１」を使用し、 http-equiv属性の属性値に「Content-Type」を指定し、 content属性の属性値に「ファイル形式」及び「エンコーディング方式」を指定する。

完全なXHTMLの場合

XHTMLを完全なXML文書として扱う場合、本来、拡張子を「.xhtml」とし、以下のようなmeta要素で文字エンコーディングを指定する。

<meta http-equiv="Content-Type"
      content="application/xhtml+xml; charset=UTF-8" />

互換性を考慮したXHTMLの場合

XHTMLに対応していないブラウザもあるので、XHTMLをHTMLと互換が保てる文書として扱う場合、拡張子を「.html」とし、以下のようなmeta要素で文字エンコーディングを指定する。

<meta http-equiv="Content-Type"
      content="text/html; charset=UTF-8" />

本Webページでは、２番目の互換性を考慮した書き方を使用する。

ページ概要を記述する

ページの概要を記述する。この場合、name属性の属性値に「description」を指定し、 content属性の属性値としてページ概要を記述する。また、通常は、日本語で記述するので、 言語コードを意味するxml:lang属性、lang属性を指定する。

<meta name="description"
      xml:lang="ja" lang="ja"
      content="ここにページの概要を記述する" />

検索用キーワードを記述する

ロボット型検索エンジンに探してもらえるように検索用キーワードを記述する。この場合は、name属性に「keywords」、 content属性に複数の検索用キーワードをカンマで区切って記述する。また、日本語を使用している場合は、言語コードも合わせて指定する。

<meta name="keywords"
      xml:lang="ja" lang="ja"
      content="キーワード１,キーワード２,・・・,キーワードn" />

作成者を記述する

Webページの作成者を記述します。この場合は、name属性に「author」、 content属性に作成者名を記述する。また、日本語を使用している場合は、言語コードも合わせて指定する。

<meta name="author"
      xml:lang="ja" lang="ja"
      content="作成者名" />

著作権情報を記述する

Webページの著作権情報を記述します。この場合は、name属性に「copyright」、 content属性に著作権情報を記述する。また、日本語を使用している場合は、言語コードも合わせて指定する。

<meta name="copyright"
      xml:lang="ja" lang="ja"
      content="著作権情報" />

以上のようなメタ情報を付加したサンプルのページ「test.html」のコードを下に掲載しておく。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
      content="text/html; charset=UTF-8" />
<title>とにかく作ろう</title>
<meta name="description"
      xml:lang="ja" lang="ja"
      content="御隠居のホームページ作成法で使用するサンプルページです。" />
<meta name="keywords"
      xml:lang="ja" lang="ja"
      content="御隠居,ホームページ,Webページ,HTML,XHTML,CSS,W3C" />
<meta name="author"
      xml:lang="ja" lang="ja"
      content="御隠居" />
<meta name="copyright"
      xml:lang="ja" lang="ja"
      content="Copyright (C) 御隠居" />
</head>
<body>
<p>初めてのWebページ</p>
</body>
</html>

ページの先頭に戻る