HITP 広島工業大学専門学校

ホームページの基礎(1. XHTML 編)

← 1.6 XHTMLの文法チェックをしよう  目 次  1.8 XHTMLをHTMLにしてみよう →

  1. 1.7 補助情報を付加しよう
    1. 1.7.1 meta要素
    2. 1.7.2 文字エンコーディングを指定する
    3. 1.7.3 ページ概要を記述する
    4. 1.7.4 検索用キーワードを記述する
    5. 1.7.5 作成者を記述する
    6. 1.7.6 著作権情報を記述する

1.7 補助情報を付加しよう

せっかくWebページを作成しても,そのページをできる限り多くの人に,また,正しく見てもらう必要がある。そのためには,ページの内容がもっとも大切であるが,それ以外にも補助的な情報が必要になる。ここでは,その補助的な情報について説明する。

1.7.1 meta要素

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

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

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

書き方1:<meta http-equiv="属性値" content="属性値" />

書き方2:<meta name="属性値" content="属性値" />

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

<要素名 属性 />

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

XHTMLの場合,第1行目のXML宣言で文字エンコーディングを指定したが,ブラウザによってはこれを無視するものもある。そこでHTML文書内にmeta要素を使って,文字エンコーディングを明示的に指定する必要がある。具体的な書き方としてはmeta要素の「書き方1」を使用し,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ページでは,2番目の互換性を考慮した書き方を使用する。

1.7.3 ページ概要を記述する

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

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

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

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

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

1.7.5 作成者を記述する

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

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

1.7.6 著作権情報を記述する

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>
(C)Copyright 2010 HIROTAKA.YAMASHITA. HITP 広島工業大学専門学校. All Rights Reserved.