メタタグを利用しよう

トップページ / メタタグを利用しよう
広告欄

htmlにメタタグを使おう

※当ページは、htmlについてある程度勉強してから読む事をお勧めします。

メタタグとは<head>〜</head>の中に記述するタグの事です。
(headはhtmlの頭の部分の事でそのhtmlの情報をここに書きます)

検索エンジンはロボットですからhtmlを上から下まで見ていきますが、
headはそのhtmlの最初の方にあるため、
この欄が正しく記述していないと検索エンジンが正しく見る事ができません。

アクセスアップに直接繋がるという訳ではありませんが、
検索エンジンに「拾ってもらう」という意味では有効なので、メタタグは是非使いましょう。
(追記:最近はあまり重要視しない?詳細不明)



メタタグは様々な使い方ができて非常に便利です。
以下に使い方の例を書きましたので参考にして下さい(htmlの例です)。

-ここから-
<head>
<meta http-equiv="Content-Type" content="text/html; charset=〜">
<meta http-equiv="Content-Language" content="ja">
<title>〜</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="keywords" content="〜">
<meta name="description" content="〜">
<link href="〜.css" rel="stylesheet" type="text/css">
</head>
-ここまでです-

metaタグは基本的にはheadタグの中に書き、<meta=〜>の形で記述します。

では、一つ一つ説明していきます。
<meta http-equiv="Content-Type" content="text/html; charset=〜">
と書かれた部分では、このhtmlがどの文字コードを使っているかを表しています。
日本語で使われる文字コードは、
「Shift-JIS」「EUC-JP」「JIS」「UTF-8」「UTF-16」があります。
これを「charset=〜"」の「〜」の部分に記述します。
WindowsやMacでは「Shift-JIS」にしておいた方がいわゆる文字化けを防ぐ事ができます。

<meta http-equiv="Content-Language" content="ja">
これはこのhtmlで使われている主言語を指定します。
日本語を使う場合は「ja」で良いでしょう。

タイトルタグについてはこちら

<meta http-equiv="Content-Style-Type" content="text/css">
これはスタイルシートを使う際に必要な記述です。

<meta http-equiv="Content-Script-Type" content="text/javascript">
こちらは「javascript」を使う場合に必要になりますが、通常のホームページではいらないでしょう。

上記のタグは必要な場合にないと問題ありますので、必ず記述しましょう。



続いて、
<meta name="keywords" content="〜">
これはサイトのキーワードを「〜」の部分に書きます。
(キーワードについてはこちら)
自分のサイトのキーワードを入れる事で、検索の際に多少有利になります。

<meta name="description" content="〜">
これでサイトの説明文を「〜」に書きます。
説明文は検索された際のサイトの下の所に出るものですので、
分かりやすいような、たくさんの人が見てくれるような文を書きましょう。

この2つはSEOに有効です。
必ず記述するようにしましょう。

そして最後に、
<link href="〜.css" rel="stylesheet" type="text/css">
これはメタタグではないのですが、スタイルシートの場所を指定します。
スタイルシートを使う場合は必ず記述しましょう。



上の例には書きませんでしたが他にも、
<meta name="Author" content="〜">
これはサイト作成者の名前を「〜」に入れます。

下3つはメタタグではないのですが、
<link rel="next" href="sitemap.html">
これは検索エンジンに次に見てもらいたいページ?サイトマップを指定?(正誤不明)

<link rel="shortcut icon" href="favicon.ico">
これはそのページに使うショートカットアイコンの場所を指定します。
このhtmlと同じ階層にアイコンがあればこの記述はいりません。

icoは画像ファイルを変換したものでショートカットアイコンに使えます。
(アイコン変換サイトはこちら→外部サイト:対応ファイル:GIFかPNG)
ちなみにアイコンは一から自作する事もできますし、インターネット上には素材もあります。

<link rev="made" href="mailto:〜">
これはサイト作成者のメールアドレスを表しますが、特別必要無いですね。

これら3つはなくても良いですし、
書くと長くなってしまうのでむしろ書かない方が良いかもしれません。

head内にメタタグを入れ過ぎるといわゆる「頭でっかち」な状態になり、
これはSEO的にはマイナス要素になってしまう可能性があります。

便利だからと言ってメタタグをたくさん入れ過ぎて頭でっかちにならないように気をつけて下さい。

前のページへ戻る
サイトマップはこちら
Copyright (C) 2012-20XX By SaruyaMichael all rights reserved.