← 1.6 XHTMLの文法チェックをしよう 目 次 1.8 XHTMLをHTMLにしてみよう →
せっかくWebページを作成しても,そのページをできる限り多くの人に,また,正しく見てもらう必要がある。そのためには,ページの内容がもっとも大切であるが,それ以外にも補助的な情報が必要になる。ここでは,その補助的な情報について説明する。
サーチエンジンの上位に自分のWebページが表示されるようにする技術を「サーチエンジン最適化(SEO:Search Engine Optimization)」といい,非常に重要視されている。
この SEO を一から学ぶことも大事だが,まずは,どうすればできるのか?もっとも基礎となる具体的方法を見よう。これらのことを指定するためには meta要素を使用する。
ページ作成者,エンコーディング方式,検索用キーワードなど補助情報のことをメタ情報と呼ぶ。このメタ情報は,meta要素によって記述される。具体的にはmeta要素はmetaタグを使って記述される。このmetaタグには大きく分けて2種類の書き方がある。
書き方1:<meta http-equiv="属性値" content="属性値" />
書き方2:<meta name="属性値" content="属性値" />
また,このmeta要素は,これまでの要素(html要素,head要素など)と異なり,開始,終了タグが他の要素を囲む形式ではなく,タグ単独で要素を表す。すなわち,入れ子となる内側要素を持たない要素である。このような要素を空要素と呼ぶ。空要素は,以下の形式で記述する。
<要素名 属性 />
XHTMLの場合,第1行目のXML宣言で文字エンコーディングを指定したが,ブラウザによってはこれを無視するものもある。そこでHTML文書内にmeta要素を使って,文字エンコーディングを明示的に指定する必要がある。具体的な書き方としてはmeta要素の「書き方1」を使用し,http-equiv属性の属性値に「Content-Type」を指定し,content属性の属性値に「ファイル形式」及び「エンコーディング方式」を指定する。
XHTMLを完全なXML文書として扱う場合,本来,拡張子を「.xhtml」とし,以下のようなmeta要素で文字エンコーディングを指定する。
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
XHTMLに対応していないブラウザもあるので,XHTMLをHTMLと互換が保てる文書として扱う場合,拡張子を「.html」とし,以下のようなmeta要素で文字エンコーディングを指定する。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
本Webページでは,2番目の互換性を考慮した書き方を使用する。
ページの概要を記述する。この場合,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="キーワード1,キーワード2,・・・,キーワード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" />
<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) 御隠居" />
<title>とにかく作ろう</title>
</head>
<body>
<p>初めてのWebページ</p>
</body>
</html>