WebStationビジネス書の書評を中心に、Webデザインなどの情報を紹介しています。
  • toshi@Twitter
  • Facebookページ
  • RSSリーダーの登録

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HEADタグ内の記述 その①(meta, title)

html_03.jpg

今回は「HEADタグ」内に「meta」「text」タグを記述していきます。

文字エンコーディングの指定

パソコンに文字を識別させるために、「utf-8」「shift_jis」「euc-jp」といった文字コードが規定されています。ブログも同様に、どの文字コードで文章が書かれているかを明示しておく必要があります。指定しないと、ブラウザによっては文字化けが起こることがあります。

HTML
<head>
<meta charset="utf-8">
</head>

ここで、<meta>タグとはHTML文章に関するさまざまな情報をブラウザや検索エンジンに知らせるためのものです。<title>(タイトル)・<link>(リンク情報)・<style>(スタイルシート)・<script>(スクリプト)など、標準で用意されていない情報を指定する際に使います。

ちなみに、文字コードを"utf-8"と宣言しているのは、FC2ブログのサーバーが"utf-8"の文字コードに対応しているためです。

検索エンジン向けの設定

●keywordsの指定
検索エンジン向けのキーワードを指定します。複数のキーワードを指定する場合には、半角カンマ(,)区切りで指定します。

HTML
<head>
<meta charset="utf-8">
<meta name="keywords" content="読書, Webデザイン">
</head>

ただし、以前はSEO対策として効果があったのですが、一部のユーザーが乱用した結果、ほとんどの検索エンジンで無視されるようになりました。しかし、一部の検索エンジンでは効果がありますので一応記載しておきましょう。

●descrptionの指定
googleの検索結果などで表示される"description"を指定します。

HTML
<head>
<meta charset="utf-8">
<meta name="keywords" content="読書, Webデザイン">
<!--index_area-->
<meta name="description" content="<%introduction>" >
<!--/index_area-->
</head>

<%introduction>はFC2独自の変数で、【環境設定の変更】>【ユーザー情報の設定】>【ブログの説明】、に入力した内容を取得して反映されます。

<!--index_area-->~<!--/index_area-->もFC2独自の変数であり、この間に記述した内容はトップページのみ有効になります。

<%introduction>をトップページのみ有効にしているのは、<meta name="description">がない条件では、グーグルなどの検索エンジンが自動的に検索キーワード周辺の文字を検索結果に表示してくれるからです。

反対に、全ての条件で<%introduction>を有効にしておくと、検索エンジンで検索したキーワードに関わらず、常に同じ説明文が検索結果に表示されてしまうため、クリックしてもらえる確率が減ってしまいます。

文章の作者を指定

文章(ブログサイト)の作者を指定します。

HTML
<head>
<meta charset="utf-8">
<meta name="keywords" content="読書, Webデザイン">
<!--index_area-->
<meta name="description" content="<%introduction>" >
<!--/index_area-->
<meta name="author" content="<%author_name>" />
</head>

<%author_name>はFC2独自の変数で、【環境設定の変更】>【ユーザー情報の設定】>【あなたのお名前】、で入力した名前を取得して反映されます。

タイトルを指定

検索エンジンの検索結果画面やブラウザのブックマーク欄に表示されるタイトルを指定します。

HTML
<head>
<meta charset="utf-8">
<meta name="keywords" content="読書, Webデザイン">
<!--index_area-->
<meta name="description" content="<%introduction>" >
<!--/index_area-->
<meta name="author" content="<%author_name>" />
<title>
<%blog_name>
</title>
</head>

タイトルは<title>~</title>の間に記述します。<%blog_name>はFC2独自の変数で、【環境設定の変更】>【ユーザー情報の設定】>【ブログの名前】、で入力した名前を取得して反映されます。

しかし、このままでは記事のタイトルが検索結果画面に表示されないので、次のように記述します。

HTML
<head>
<meta charset="utf-8">
<meta name="keywords" content="読書, Webデザイン">
<!--index_area-->
<meta name="description" content="<%introduction>" >
<!--/index_area-->
<meta name="author" content="<%author_name>" />
<title>
<!--permanent_area-->
<%sub_title> |
<!--/permanent_area-->
<%blog_name>
</title>
</head>

<%sub_title>は、FC2独自の変数で、固定リンク画面(個別記事を表示している画面)では記事のタイトルを、カテゴリーページではカテゴリー名を、というように条件に応じて必要な情報を表示してくれます。

<!--permanent_area-->~<!--/permanent_area-->もFC2独自の変数であり、この間に記述した内容は個別記事ページのみ有効になります。

つまり、上記の記述では個別ページを表示したときのタイトルは、"記事タイトル | ブログ名"となります。

他にも、カテゴリ別ページ(<!--category_area-->~<!--/category_area-->)やタグ検索結果ページ(<!--tag_area-->~<!--/tag_area-->)、検索結果ページ(<!--search_area-->~<!--/search_area-->)なども必要に応じて追加してください。

HTML
<head>
<meta charset="utf-8">
<meta name="keywords" content="読書, Webデザイン">
<!--index_area-->
<meta name="description" content="<%introduction>" >
<!--/index_area-->
<meta name="author" content="<%author_name>" />
<title>
<!--permanent_area-->
<%sub_title> |
<!--/permanent_area-->
<!--category_area-->
<%sub_title> |
<!--/category_area-->
<!--search_area-->
「<%sub_title>」の検索結果 |
<!--/search_area-->
<!--tag_area-->
「<%sub_title>」の検索結果 |
<!--/tag_area-->
<%blog_name>
</title>
</head>

title要素はSEO対策としても大変重要な意味を持ちます。検索結果で上位に表示させたいキーワードがある場合には、<title>~</title>の中に自然な形で配置しておくのも手です。

最後に

長々と説明してきましたが、HEADタグ内の設定はまだ終わっていません。引き続き理解しながら記述していきましょう。

ソーシャルリンク

トラックバック

トラックバックURL

この記事にトラックバックする(FC2ブログユーザー)

コメント

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。