HTMLのヘッダー区を理解する ~無料ホームページの作り方~

HOME > 無料で作成講座 > 無料ホームページの作り方 > HTMLのヘッダー区を理解する

無料ホームページの作り方
弊社では「自分で作成してみたい!」という方も応援しています

3.HTMLのヘッダー区を理解する

ヘッダーで指示するものの種類と作用

よくあるヘッダーの例:
これは基本的なヘッダーの一例です。
ではひとつひとつ説明をしていきましょう。

Content-Typeについて

例:<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
まずはコンテンツタイプの説明です。
これは「ファイルの種類」と「漢字コードの指定」を行っています。
WEBで扱われるファイルの種類は幾つもありますが、最も多く使われている一部をご紹介します。
  • text/html(webページ)
  • text/css(cssファイル)
  • text/javascript(javascriptファイル)
  • image/jpeg(JPEG画像)
  • image/gif(GIF画像)
  • image/png(PNG画像)
と色々な種類があるわけなのですが、ホームページのHTMLで使われるものは「text/html」のみです。

その次にある「charset」は文字コードもしくは漢字コードと呼ばれるものの指定です。
HTMLの中に全角の文字が使われる場合は、この指定をしておかないと文字化けする可能性があります。
日本において代表的な文字コードは「シフトJIS」「JIS」「EUC」「UTF-8」の4つです。
数年前までシフトJISで書かれたページが多かった印象ですが、現在の主流はUTF-8でしょう。
これは日本語のみならず世界標準とされている文字コードなので、中国語や韓国語を用いる場合にも使えます。
ヘッダーに記載する場合は「shift_jis」及び「utf-8」と小文字の半角アルファベットで記載します。

タイトルについて

例:<title>ページタイトル</title>
これはページをブラウザで見た時にタブに表示されるタイトルの指定になります。
ブックマークした時にもこの文字が使われますので、ページの目的を明確に示す必要があります。
また、タイトルなので長すぎても分かりにくいですし、短すぎても意味が伝わりません。
のちほど説明されるSEO対策としても、このタイトルはしっかりと命名する事を心がけましょう。
もちろん全てのページでタイトルを変える必要もあります。
同じページが複製されているではないので、そのページにあったタイトルを付けましょう。

Descriptionについて

例:<meta name=”description” content=”これはサンプルページです”>
これはページ自体の説明を簡単に記載するところです。
このページがどういったものなのか、というものをより的確に説明することが大事です。
もちろんこれもSEO的には大変重要な箇所になりますので、明確かつ丁寧に説明しましょう。
長さの目安としてはタイトルよりも長く、おおよそ全角50~80文字程度で記載するのが良いでしょう。

Keywordsについて

例:<meta name=”keywords” content=”サンプル,HTML,ヘッダー”>
これはこのページのコンテンツ内容がどのようなキーワードで検索されるべきなのかを明示的に記載するところです。
半角のカンマで句切られたキーワードを5個程度記載しておくのが最適とされています。
欲張ってここに大量のキーワードを入れてしまうと、SEO的にマイナス要素となる可能性もあります。
また、ページの内容と合っていないキーワードを用いることも同じようにマイナス評価になるようです。
キーワードの選定ですが、例えば「湘南地区の海が見える不動産情報」等のページをキーワード設定する場合、 そのままの文章で記載するのではなく、細かく単語に分ける必要があります。
例えば「不動産,湘南,海」などのように記載するのが最適になります。

その他

前述したものはヘッダーの中身として必要最低限の内容でした。
この他にもヘッダーには様々な情報を記載することがあります。
例えばページ内のレイアウトや文字の装飾を行うCSSファイルなどを指定したり、動的要素を賄うJavaScriptなどを読み込ませたりなどです。
ここで全てを説明するのはとても困難ですので、のちほど随時説明させて頂きますね。