DAINASHI YESTERDAY

SEOの基本!metaタグ設定を見直してhead内を整備しよう

20140114

head要素内には、Googleなどの検索エンジンに向けたホームページの情報を記述します。ここをしっかり作りこむことで、検索エンジンに自分のホームページの情報を拾ってもらいやすくなり、検索結果の順位に好影響を期待できます。

では、以下のサンプルを元に、上から順に説明していきたいと思います。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>ホームページのタイトル</title>
<meta name="description" content="ホームページの概要" />
<meta name="keywords" content="キーワード" />
<link rel="altarnate" type="application/rss+xml" title="sitemap" href="サイトマップのURL" />
<link rev="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/js/sample.js"></script>
</head>

文字コードの指定

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

これはSEOとは直接関係ありませんが、ブラウザがホームページを表示するときに「どの文字コードで読み込めばよいか」を知らせるためのものですので、一番最初に書いておく必要があります。ISO-2022-JP、EUC-JP、Shift_JISなどがありますが、現在はUTF-8が多いでしょう。

クローラーに全てのページの閲覧を許可する

<meta name="robots" content="all" />

検索エンジンは巡回ロボットと呼ばれるプログラムをインターネット上に常時巡回させて、より質の高い検索結果を表示するためWeb上のコンテンツをチェックしています。この記述はその巡回ロボットに、「このホームページ内のすべてのページを見ていってください」と伝えるためのものです。ホームページ内の全てのページが検索結果に反映される確立があがりますので、この記述は必須と言えます。

タイトルタグの指定

<title>ホームページのタイトル</title>

このtitleタグは以上に重要です。検索エンジンがキーワードをあまり重要視しなくなったと言われる現在でも、titleタグ内は重要視されている可能性が高いです。そのため、ここに狙いたいキーワードを入れておく必要があります。

ここでのポイントは、重要と思われるワードほどはじめに書くということです。

  • × スタジオフリータウン | ホームページ制作会社
  • ○ ホームページ制作会社スタジオフリータウン

「ホームページを作りたい」と考えている人は、まず「ホームページ制作」で詮索しますよね?スタジオフリータウンを知らない人が、いきなり「スタジオフリータウン」で検索することはないはずです。そのため、検索エンジンでの上位表示を意識するのであれば、固有名詞よりもニーズのあるキーワードを先に記述する必要があります。

下層ページのタイトルの付け方

下層ページ(トップページ以外のページ)のタイトルをそれぞれページの内容に沿ったものにしておけば、そのホームページのメインキーワードだけでなく、いろいろなキーワードで検索エンジンに引っ掛かる可能性が高くなります。

もし現在、下層ページのタイトルがトップページのタイトルと同じでしたら、すぐに個別のものに書き換えてください。WordPressを使用している場合はAll In One SEO Packというプラグインで、投稿の編集画面にて個別にタイトルの指定が可能です。

下層ページでのタイトルの付け方も、基本的にはトップページのタイトルの付け方と考え方は同じです。重要なキーワードほど先に記述するようにしましょう。ただ、いくらキーワードをはじめの方に書きたいからと言って、全てのページでキーワードを一番初めに持ってこないようにしてください。あくまでも自然に、クローラーに不自然さを感じさせないことを意識しましょう。

また、数ページに1ページくらいの割合で、キーワードを使わずに記述したり、キーワードを後ろの方に持っていったりするといいです。こんな言い方をすると元も子もないですが、タイトルは自然に付けるのが一番です。すべてのページのタイトルが同じだったり、すべてのタイトルでキーワードが先頭だったりしたら不自然ですよね?あくまでも自然に、クローラーが見ても人が見ても違和感のない記述をしましょう。

ページの概要を記述する

<meta name="description" content="ホームページの概要" />

ここに記述した内容が、検索結果のタイトル下に表示されます。ユーザーはここを見てあなたのホームページを見るか否かを判断しますし、巡回ロボットもここの内容を見てホームページの概要を把握しますので、非常に重要な箇所です。

全ページで共通した内容にせず、各ページそれぞれの内容に沿った記述をしてください。またその際、できるだけはじめの方にキーワードを入れ込んでください。できるだけ自然に、1~2回入れ込めれば完璧です。

キーワードを指定する

<meta name="keywords" content="キーワード" />

ページのキーワードを指定します。現在の検索エンジンはここでの指定を重要視しませんので、1つ指定すれば十分です。逆にたくさん詰め込みすぎるとよくありませんので、多くても3つまでにしておいてください。

サイトマップのURLを記述する

<link rel="altarnate" type="application/rss+xml" title="sitemap" href="サイトマップのURL" />

ここで言うサイトマップとは、ユーザー向けに全ページをリストアップして一覧表示したページのことではなく、巡回ロボットが全ページをくまなく回れるように案内するためのxmlファイルのことです。

サイトマップのXMLファイルは下記のサイトで作成することができます。

sitemap.xml Editor

作成したら、ルートディレクトリ(index.htmlと同じ階層)にアップロードしてください。最後に、Googleウェブマスターツールにてサイトマップを送信します。

WordPressの場合は、Google XML Sitemapsというプラグインを使えば、簡単にサイトマップの作成・送信ができますので、こちらの記述は必要ありません。

ファビコンを指定する

<link rev="shortcut icon" type="image/x-icon" href="favicon.ico" />

ファビコンとは、ブラウザでホームページを開いたときに、アドレスバーのURLの先頭に表示されるアイコンのことです。ブックマーク(お気に入り)に登録されたときも、リスト表示された際に表示されます。

特に指定しなくてもブラウザ標準のアイコンが差し込まれますが、ユーザーからの信頼感の獲得や差別化を図るためには独自のものを用意することをおすすめします。

CSSやJavascriptを読み込む

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/js/sample.js"></script>

最後にCSSやJavascriptを読み込みます。この記述はSEOには直接関係ありませんが、タイトル、概要、キーワードのあとに記述するようにしてください。そうしないとJavascriptの読み込みに時間が掛かった場合などに、ブラウザがタイトルを正常に表示できないことがあります。

なお、jQueryを利用する際には、はじめにライブラリーのファイルを読み込む必要があります。そのため、下記のコードをjQueryを読み込むソースの一番上になるように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

いかがでしたか?今回はSEOに関係する設定のみに絞って説明しましたが、head要素内にはこの他にもいろいろ設定できます。興味がありましたら調べてみてくださいね。それでは!

投稿者: