metaタグを知ろう！

ホームページを作成して間もない頃は、見た目だけにとらわれてしまって、肝心な検索エンジンに対しての対策を全く出来ていなかったりします。ホームページビルダーやGoLiveなどのホームページ作成ソフトに頼りすぎるのは良くありません。中身の手直しも必要になります。

Sponsor

メニュー一覧

記事一覧

・Firefox3 公開！IE7より9.3倍早い！！！・自宅サーバーでの検索エンジン対策・相互リンクと被リンク・metaタグを知ろう！・go-pear.phpが実行できない場合・SEOを考慮したサイトの引越し（301リダイレクト）・IE7でのレイアウトずれ対処・バックリンク（被リンク）について・Thumbs.db ファイルをFTPに残さない（作らない）・自宅サーバでのwmv埋め込み+Firefox・Mozilla（Apache）・サイト整理=リンク切れのチェック・FireFox Add-ons Edit CSS ・Flash(.swf)の埋め込み-IE・Mozilla系共有・wmvファイル埋め込み（Java Script 編）・wmv動画の埋め込み（IE・Mozilla系共用）・IEでのレイアウトずれ対処（css）・IE6以前でpng透過画像を使用する・フレームセットの利点と欠点・htmlファイル整理｜ディレクトリ毎のファイル整理・検索エンジンを意識したサイトを作る・ホームページのタイトルと内容・MT作成サイトのPHP化手順・さくらサーバーでのPHPサイト構築・PEARのインストール（さくらサーバー編）・サクラエディターの使い方・サクラエディターのインストール

ホームページを作ってしばらくすると、metaタグと言う言葉を耳にすると思います。

では一体metaタグとは何なのでしょう？

その辺りを初心者にも出来るだけ解りやすく説明します。

metaタグの概要

metaタグとは、html（またはphp）ページをソース表示したときに出てくる、

<head>～</head>

間に記述するタグのことです。

このタグの中身は実際にページに表示されることはありません。

では、なぜこのタグが存在するのか？

それはWebページのお約束事みたいなものです。

しかし実は、ここは検索エンジン対策（SEO対策）に重要な部分だったりします。

metaタグの中身の例

当サイトのmetaタグのはこんな感じになっています。（実際はもっと記述がありますが...）

尚、当サイトは、XHTML1.0 Transitionalで作成していますので、ホームページビルダーなどの場合とは若干異なります。
一般のホームページ作成ソフトの場合、多くはHTML4.01 Transitionalで作成されていると思います。

<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta content="ALL" name="ROBOTS" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="http://www.seo-maniax.com/favicon.ico" />
<title>ホームページ作成SEOマニアックス</title>
<meta name="keywords" content="ホームページ,作成,マニュアル,SEO対策,検索エンジン,サーバー,Apache,swf,wmv,flv,埋め込み,設定,PHP,HTML,CSS,MT" />
<meta name="description" content="ホームページ作成の基礎知識から、スタイルシートの使い方やレンタルサーバーの設定などを解説します。" />
<link rel="start" href="http://www.seo-maniax.com/" title="ホームページ作成SEOマニアックス" />
<link rel="next" href="http://www.seo-maniax.com/archives.php" title="ホームページ作成SEOマニアックスサイトマップ" />
</head>

HTML4.01 Transitionalの場合は、各タグの最後にある /（半角スペースとスラッシュ）を削除すれば使用できます。

meta http-equiv="content-type"

ここに記されているのは、このコンテンツ（ホームページ）がどんな文字セットを使用しているのかの記述です。

これが記述されていないと、ブラウザによってはどんな文字セットを使用しているかを判断できずに文字化けすることが有りますので必ず記述しましょう。

当サイトはutf-8を使用していますので

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

のように記します。

shift_jisを使用している場合は、

<meta http-equiv="content-type" content="text/html;charset=shift_jis" />

となります。
ちなみにこれはXHTML1.0 Transitionalの文法になりますので、HTML4.01 Transitionalの場合はタグの最後にある /（半角スペースとスラッシュ）を削除して、

<meta http-equiv="content-type" content="text/html;charset=shift_jis">

となります。

meta name="robots" content="INDEX,FOLLOW"

この部分は検索エンジンの巡回ロボットに、このページをキャッシュさせるかさせないかの記述です。

ページを検索エンジンにキャッシュさせたい場合は
XHTML1.0 Transitionalの場合 <meta content="ALL" name="ROBOTS" /> <meta name="robots" content="INDEX,FOLLOW" /> HTML4.01 Transitionalの場合 <meta content="ALL" name="ROBOTS"> <meta name="robots" content="INDEX,FOLLOW">

ページを検索エンジンにキャッシュさせたくないい場合は
XHTML1.0 Transitionalの場合 <meta content="ALL" name="ROBOTS" /> <meta name="robots" content="NOINDEX,NOFOLLOW" /> HTML4.01 Transitionalの場合 <meta content="ALL" name="ROBOTS"> <meta name="robots" content="NOINDEX,NOFOLLOW">

と記します。

meta http-equiv=

この部分は、javascriptや、スタイルシートを使用している場合に記述します。
<meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" />

link rel="shortcut icon

この部分は、ショートカットアイコン（favicon.ico）を作成していない場合は記述しなくて良い部分です。

ショートカットアイコンとは、ブラウザのURLバーの先頭や、お気に入りにサイトを追加した時に出来るアイコンの事です。

当サイトをブラウザで表示したときに、IE7以降やその他のブラウザで開くと、URLバーとタブバーにアイコンが表示されていると思います。
必要が無いといえば無いものなのですが、オリジナリティーを出したいのなら作ると良いかもしれません。

ショートカットアイコン（favicon.ico）を作りたいなら、自分で画像を用意すればFavIcon from Picsと言うサイトで無料で作成できます。

titleタグ

最も重要なmetaタグのひとつになります。

要するにここは、ページのタイトル部分になりますので、絶対に入っている必要があります

ホームページビルダーやアドビのGoLive（ゴーライブ）などで作成されているページで、このタイトルが書かれていないページをかなり見かけます。

特に酷いのが、アドビのGoLiveで作成されたページで、タイトルがデフォルトのままの<title>Untitled Page</title>
となっているページ。

中には<title>Adobe GoLiveへようこそ</title>
なんてなっているところも見かけます。

一体誰のページなのでしょう？Adobe GoLiveのページですか？（汗）

折角一生懸命に作ったのに、ページのタイトルがAdobeの宣伝なんてシャレになりません...
知らずに作っているのですから仕方が無いのですが、ゾッとしませんか？

絶対にtitleはページ毎にちゃんとしたタイトルを入れるように心がけましょう！

meta name="keywords" content=""

ここはページのキーワードを入れる部分になります。

キーワードとは、そのページにとって重要なキーワード、または記載されている内容に沿ったキーワードで、検索エンジンで検索されるであろう単語のことになります。

酷いサイトになると上位表示させたいがために、ページと全く関係の無いキーワードを入れているところもあります。
たとえば、釣りのページなのに上位表示させたいが為に有名芸能人の名前が入っていたり...

それではキーワードの意味を全く成しません。
逆に検索エンジンからはスパム行為とみなされてしまいますので、そのような行為は絶対にしないでください。

書式は<meta name="keywords" content="" />の""の中身に、自分の作ったページの内容に合うキーワードを入れていきます。

キーワードは単語で書き、各キーワードを,で区切ります

また、キーワードを多く入れ過ぎても意味がありませんので、10個程度にします。

meta name="description" content=""

この部分はページの説明文になります。

検索エンジンなどで検索したときに、リンクの下に文章が出てくると思います。
（画像赤枠部分）

descriptionタグを使用していない場合は、この部分にページの本文が表示されます。

しかし、検索エンジン対策としてはdescriptionタグにキーワードとなる要素を入れつつ、ページの説明を記述するようにします。

そうすることでライバルサイトよりも上位表示される可能性が高くなります。
上位表示されるには他にも要因がありますが、やらないよりやったほうが良いです。

書式は<meta name="description" content="ページの説明文" />

のようになります。ページの説明文の部分を、ご自分のページの説明文と入れ替えてください

link rel="start"　link rel="next"

出来ればlink rel="start"　タグlink rel="next"　タグは入れた方が好ましいです。

このタグは検索エンジンを、元のページ（link rel="start"）の所在地と、次のページ（link rel="next"）への誘導をスムーズに行うために入れるmetaタグになります。

ブログの場合はこのタグは自動に入るものが多いですが、手打ちページの場合は製作者が自分で考えURLを記述する必要があります。

当サイトで言うと、トップページは<link rel="start" href="http://www.seo-maniax.com/" title="ホームページ作成SEOマニアックス" /> <link rel="next" href="http://www.seo-maniax.com/archives.php" title="ホームページ作成SEOマニアックスサイトマップ" />のようになっています。