head情報

前回までに、DOCTYPE、HTML情報を書きました、今回はHEAD要素に書くhead情報を書きます。

HEAD情報とは

HEAD情報は、<head>から</head>まで、ヘッド要素の中に記述する情報で、ホームページを表示するために必要なデータ、定義などが書かれます。
ヘッド要素に書かれた文字列は<>記号で囲まれており、先に書いたようにホームページ本体には表示されません。

それは次のような情報です。

メタ要素
タイトル
リンク要素
スクリプト

それでは、1項目ずつ見ていきましょう。

meta要素

meta要素は、ホームページ本体のさまざまなメタデータを定義します。
必要最小限のメタデータの種類には次のようなものがあります。

使用する文字コード
ビューポート
ディスクリプション
キーワード

それでは、meta要素を1項目ずつ見ていきましょう。

文字コード

日本語でコンテンツを書いているホームページは「Shift_JIS」、「UTF-8」の2種類の文字コードから選びますが、shift_JISは文字化けすることがあります。

管理者の場合はホームページからメール送信すると文字化けしたので、以来UTF-8を設定しています。

htmlソース

<meta charset="utf-8">

viewport

ホームページを表示する広さや範囲、領域などを想定する設定です。
スマホ、タブレットでホームページを表示する場合に、必須の設定で、画面表示を修正してくれます。

今回はPC表示だけですが、ビューポートを書いてないとgoogleから「書いてないよ」と言ってきます。
HTML5では必須情報です。

htmlソース

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

ディスクリプション

そのページの説明文を160文字ほどで書きます。
この説明文は検索結果のスニペットに表示されます。

htmlソース

<meta name="description" content="　ダブルクォーテーションの間に説明文を書く　">

キーワード

そのページが、どんな情報について書かれているかを、説明する代表的な単語（キーワード）10個ほどをコンマで区切って書きます。
3つ目くらいまでは本文内容に強力な関係性のあるキーワードあるいは複合キーワードにしましょう。
また、このキーワードは本文の中にちりばめて入っていれば、SEO的にGOODです。

htmlソース

<meta name="keyword" content="キーワード,キーワード,キーワード,,,,">

title

ホームページのタイトル、本で言えば題名にあたる文字列で、最も大切な語句です。

htmlソース

<title>ホームページを自作するサイト</title>

link要素

外部ファイル、例えばスタイルシートを外部ファイルにした場合は、ここでリンクし関連づけます。

htmlソース

<link rel="" href="">

script

そのページで使うスクリプト「script」があればhead要素内に書きます。

head要素ソースコードのまとめ

上に書いたhead要素のソースコードをまとめると次のようになります。

htmlソース

<!--===head情報===-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="description" content="　ダブルクォーテーションの間に説明文を書く　">
<meta name="keyword" content="キーワード,キーワード,キーワード,,,,">
<link rel="" href="">
<title>ホームページを自作するサイト</title>
</head>

ファイルを書く

head情報をデスクトップに保存しているindex.htmlに書きましょう。
index.htmlにすでに書いてある<head>と、</head>の間に書き込みます。
打ち間違いがないようにコピペしましょう。

次回からはホームページの本体に入ります。
この辺から少しヤヤコシヤーになってきますよ。