コンテンツ
タイトルや紹介文などを記述します
こんにちは、ホームページ制作のオイゾウです！
今回はHTML文書内のヘッダと呼ばれる、head要素に記述する内容について説明していきます。
上記の画像のhead要素（
の部分）は、このHTML文書の様々な定義をブラウザに知らせる役割を持っています。このhead要素は実際にブラウザに表示されるわけではないのですが、とても重要な項目がいくつも含まれているのでしっかり覚えましょう！
今回はそのhead要素の中に記述する要素のうち、
[html]<meta charset="◯◯◯◯◯◯">
<title>◯◯◯◯◯◯</title>
<meta name="description" content="◯◯◯◯◯◯">
<meta name="keywords" content="◯◯◯◯◯◯">[/html]
という4項目について説明します。
まずは「しのだ屋」さんという川越にあるお土産屋さんのホームページを想定し、「◯◯◯◯◯◯」に文字を入れてみると、以下のようになりました。
[html]<meta charset="utf-8"><title>しのだ屋</title>
<meta name="description" content="しのだ屋のホームページ。">
<meta name="keywords" content="和菓子,老舗,川越,芋">[/html]
いかがでしょうか？
最初の1行以外はなんとなく意味が分かりますでしょうか？
では順に説明します。
<meta charset="utf-8">
文字コード
この文字コードと、その次のタイトルについては、前回「HTMLタグの種類を覚えよう～HTML文書の基本構造」の記事で説明してありますので、詳しくはそちらをご参照ください。
文字コードは「UTF-8」を指定しています。
ポイントとしては、title要素より前に指定する必要がありますので、head要素の最初に書きましょう。
<title>しのだ屋</title>
タイトル
こちらも前回触れていますが、ページのタイトルをここに書きます。
これはhead要素内に1つ、なくてはならないものなので、必ず入れましょう！
通常、ブラウザのタブ部分にこのタイトルが表示されます。
<meta name="description" content="しのだ屋のホームページ。">
メタディスクリプション
メタディスクリプションとは、ページの概要のことです。
この要素と前述のタイトルは、サイトへの訪問者を増やすための効果としてとても重要です。
何故かと言うと、これらはGoogleなど検索エンジンでの検索結果に、タイトルは文字通りサイトのタイトルとして、メタディスクリプションはサイトの紹介文として表示されるからです。
ちなみにメタディスクリプションの内容による、Googleでの検索順位への影響はありません。
ではまず、実際にどのように表示されるかを見てみましょう。
<meta name="description" content="しのだ屋のホームページ。">[/html]
このように記述した場合、Googleの検索結果には以下のように表示されます。
どうでしょう？！
なんかさみしいですよね・・・。
これだと何のお店かまるで伝わりませんし、とてもクリックしようとは思えませんね。
まずタイトルについて、お店の名前をそのままタイトルにすること自体は正しいですが、もう少し具体的に書いた方が良いです。
それからメタディスクリプションですが、これでは何のお店かすら分かりません。
しのだ屋の特徴は「小江戸」「川越」にある、「芋」の「まんじゅう」などを販売する「蔵づくり」の「老舗」「和菓子屋さん」ですから、これらのキーワードを盛り込むことで「どんなお店か」を明確にするべきです。
タイトル、メタディスクリプションともに、もっと文字数を増やす必要があることまではご理解頂けるかと思いますが、では文字数が多ければ多いほどいいかというとそういうわけではありません。
タイトル
- 30文字前後
メタディスクリプション
- 124文字（PC）
- 50文字前後（スマホ）
これはGoogleの検索結果に表示される文字数です。
これ以上の文字数になった場合、当然のことながらオーバーした分はカットされます。
そして単純に文字数以内に納めれば何でもいいわけではなく、要点を「簡潔」に「分かりやすく」まとめてある紹介文が望ましいので、余計な単語を無理やり含ませてメタディスクリプションを124文字いっぱいにするよりは、狙いたいキーワードを的確にかつ絞って含ませつつ、読みやすい文章を心がけましょう。
またスマホではさらに文字数が短くなるため、オーバーした分はそのままカットされます。
スマホからのアクセスも重視するのであれば、50〜60文字程度が理想と言えます。
これらを踏まえて書き直した結果、以下のようになりました。
<meta name="description" content="安政3年創業、蔵づくりが並ぶ小江戸川越の老舗和菓子店。お芋のまんじゅうやお土産などを販売しています。通販も可能。" />[/html]
ちなみにあるユーザーがGoogleで「川越 和菓子」というキーワードで検索したときにそれらのキーワードがメタディスクリプションに含まれている場合は、以下の画像のように太文字になり「そのキーワードが含まれている」と分かりやすく表示してくれます。
このように、タイトルとメタディスクリプションは検索したユーザーにアクセスしてもらうための手段として、どのように書くかということがとても重要です。
<meta name="keywords" content="和菓子,老舗,川越,芋">
キーワード
最後にキーワードですが、これはページ内容を検索エンジン向けに単語で知らせ、SEO対策（内部SEO対策）するという役割があります。
ただし現在はあまり重要ではないと言われていまして、その理由はGoogleがこのメタキーワードをここ何年も無視し、この方針を変えることは今のところないとしているからです。
Google以外にも検索エンジンはありますが、Googleのアルゴリズムを利用しているYahoo! JapanとGoogleで国内での検索シェアが9割以上であることを考えると、ほとんど影響がないと言えるでしょう。
ではキーワードの設定は必要ないかどうかと言えば、ないよりはあった方が良いです。
キーワードがあることによるデメリットはありませんし、今後Googleが方針を変更する可能性もあり、またその他の検索エンジンでは検索順位に影響があるからです。
キーワードはカンマ（,）で区切ります。
あまりたくさん入れすぎるよりも、狙いたいキーワードを厳選した方が効果的です。
SEOとは
キーワードの説明の中で「SEO対策」という言葉が出てきましたので、この「SEO」について簡単に説明したいと思います。
SEO対策とは、YahooやGoogleで検索をしているユーザーに向け、ページを最適化し検索結果で多くを露出することでアクセスを集める一連の流れのことを指します。
引用元：ferret
せっかくホームページがんばって作ったのに、誰も見に来ない！
初めて作ったホームページであればそんなことは当たり前です。
でも作ったからには集客できるようにしたいですよね。
簡単に言えば、そのために行なうのがSEO対策です。
このSEO対策には「外部SEO対策」と「内部SEO対策」があり、それぞれ対策方法が変わります。
内部SEO対策を行なうことによって検索エンジンでの検索順位を上げることが可能になり、検索順位が上がれば上がるほどページヘの訪問数が増えるというわけです。
この内部SEO対策の具体的な方法はいつか詳しくまとめるつもりですが、その重要性はここ数年で特に高まってきていますので、今後もこの「ホームページ講座」の連載中に必要に応じて紹介していきます。
他にもありますが・・・
今回はhead要素に入れる内容を紹介しました。
他にもスタイルを指定するCSSへのリンクやスクリプト言語のJava Scriptを使うときの記述などもこのhead要素に記述しますが、それはまた違う機会（CSSの説明をするときなど）に詳しく触れたいと思います。
次回はいよいよHTMLの本題、ページの内容を表示するbody要素について詳しく説明します！
[…] 心者の方にまず最低限知っておいて頂きたいタグをご紹介します。 前回「HTMLタグの種類を覚えよう～ヘッダ情報」ではhead要素（<head></head>）内に記述する要素についてでしたが […]
[…] 次ページ⇒HTMLタグの種類を覚えよう～ヘッダ情報 […]