みんなの知識【ちょっと便利帳】
 
Google

メタタグ自動生成ツール
[ Meta Tag Generator ]

《ここは、Webページ制作支援のページです》

　メタタグ[Meta Tag]は、Webページに関する情報などをブラウザで見た際のページに表示させずに埋め込んでおくためのものです。言語の設定や、著作者、ページ内容の要約など様々な情報を書き込める他、検索エンジン対策[SEO]にキーワードや検索方法の指示なども書くことが出来ます。
  • この『メタタグ自動生成ツール』は、メタタグを簡単に書き出すことができます。
  • ただし、ここにあるメタタグ全てを書く必要はありません。逆に、本文より前に多くの情報があると、検索エンジン対策の邪魔になることもあるということで、必要なのは「文字コード」「タイトル」「紹介・説明文」「キーワード」のみとも言われます。その他は「全く必要なし」とする専門家もいます。
  • 検索エンジンで上位にリスティングさせたりするための、Webページの最適化（SEO=Search Engine Optimization=検索エンジン最適化）の一つとしては、「タイトル」「紹介・説明文」は必ず、また「キーワード」も書くようにしましょう。
  • このページは、あれを使いたいと思った時に、その書き方のヒントが得られるよう、メタタグ[Meta Tag]の一部をまとめたものです。（メタタグではないものも含まれています）

このページの使い方

  • 必要な項目を記入もしくは選択して、ページ最下部の枠に表示されるコードをコピーし、あなたのHTMLの中の <head> と </head> の間にペーストしてください。
  • 『ドキュメントタイプ』はページ先頭行に、『HTMLでの言語の明示』は<html>タグそのものの中に書きます。
  • このプログラムで書き出されるメタタグは、「XHTML 1.0」でのドキュメントタイプの宣言を前提にしています。
ドキュメントタイプの定義 (DTD)
HTMLで言語明示 文字コード 言語 タイトル
紹介・説明文 キーワード JavaScriptを使う CSSを使う
主題 要約・抜粋 著作者・制作者 オーナー
デザイナー 出版者 メールアドレス 制作日
著作権表示 電話番号 ファクス番号 国番号
制作ソフト ブラウザ用アイコン ナビゲーション start ナビゲーション next
地理的エリア タグ適用範囲 提供対象 カテゴリ・分類
Document Class 対象年齢層 検索ロボットへの指示 ロボット保存 NO
キャッシュ NO 画像検索 NO 画像リンク NO 有効期限
ロボット再巡回 秒数指定ページ移動 ページ再読み込み ツールバー非表示
NO-ODP NO-YDIR 外部CSS 外部JavaScript
<head>タグを書く 　 　 　
ドキュメントタイプの定義 (DTD)
・ドキュメントタイプ = Document Type Definition <!DOCTYPE> は、ページの先頭行に記述し、そのHTMLファイルで使用しているHTMLバージョンを宣言します。メタタグではありません。
・「XHTML 1.0 トランジッショナル(Transitional)」を選択した場合、次のように書き出されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
・各タイプの詳しいことは、専門書やWeb上で「ドキュメントタイプ」で検索するなどしてお調べ下さい。
HTMLでの言語の明示
・<HTML>には、LANG属性を使ってその文書の言語を明示しておくことが薦められています。<HTML>タグ内に、LANG属性を指定するようにしましょう。日本語を選択した場合、次のように書き出されます。
<html lang="ja">
・なお「ドキュメントタイプの定義」を選択した場合は、<html>タグも書き出されますので、その中に書くといいでしょう。
・「HTML 4.01」を宣言した場合は「lang="ja"」を記述し、<html lang="ja">となり、「XHTML 1.0」を宣言した場合は「xml:lang="ja" lang="ja"」を記述し、<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">となります。
Type : 文字コード［Charset］
・文字コードを設定すると文字化けを防げます。日本語を使う場合は、通常「シフトJIS日本語 = Shift_JIS」を設定しますが、ページで使うスクリプトやサーバーの設定などによっては、「EUC-JP」、「UTF-8」などの場合もあります。
・ちなみに、無料ホームページサービス の「GeoCities」は「EUC-JP」です。 また、Google Maps APIを使って地図ページを作る場合などは「UTF-8」を設定します。文字コードは、<title>より 前に置きます。 『シフトJIS』を選択した場合、次のように書き出されます。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
Language : 言語
・Webページで使う言語を設定します。日本語を選択した場合、次のように書き出されます。
<meta http-equiv="content-language" content="ja" />
Title : タイトル
・タイトルは、ブラウザの最上部に表示されます。検索にヒットする条件にもなります。また、ブックマーク登録をした際の名前になります。検索エンジン対策としても、キーワードになりそうな言葉も含める工夫をして、ページ内容にあったタイトルを付けましょう。
・字数に制限はありませんが、ブラウザでの表示や、検索サイトでの検索結果の表示などを考えると、20文字程度(半角で40文字)を一応の目安とするのがよいようです。『みんなの知識 《ちょっと便利帳》 [メタタグ自動生成ツール]』と入力した場合、次のように書き出されます。
<title>みんなの知識 《ちょっと便利帳》 [メタタグ自動生成ツール]</title>
Description : 紹介・説明文
・Webページの紹介・説明文を書きます。多くの検索エンジンで検索結果として表示されます。字数は全角で 100 文字位が目安とされているようですが、このページの制作時点で、 infoseek では80字（160バイト）を超すとサイト登録ができません。『メタタグ自動生成ツールです。』と入力した場合、次のように書き出されます。
<meta name="description" content="メタタグ自動生成ツールです。" />
Keywords : キーワード
・キーワードは半角カンマ","で区切ります。 キーワードは、多くても10個位までに、また、本文と関係のないキーワードや大量のキーワードを入れたり、 同じキーワードを何度も繰り返したりすると、検索エンジンからはじかれることもあるということです。『ちょっと便利帳,メタタグ,自動生成』と入力した場合、次のように書き出されます。
<meta name="keywords" content="ちょっと便利帳,メタタグ,自動生成" />
JavaScript を使う
・スクリプトを使用する場合は、 <meta> 内にまずベースとなるスクリプト言語を明示します。選択した場合、次のように書き出されます。
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
CSS を使う
・スタイルシートを使用する場合は、<meta> 内にまずベースとなるスタイル言語を明示します。選択した場合、次のように書き出されます。
<meta http-equiv="Content-Style-Type" content="text/css" />
Subject : 主題
・何に関するWebページかなどを記入します。上の「紹介・説明文」や下の「要約・抜粋」ともダブルような場合は、「紹介・説明文」だけを記入すればいいでしょう。『メタタグ自動生成ツールです。』と入力した場合、次のように書き出されます。
<meta name="subject" content="メタタグ自動生成ツールです。" />
Abstract : 要約・抜粋
・「紹介・説明文」とほぼ同じ意味です。「紹介・説明文」と全く同じ文章を二重に入れているサイトもあります。『メタタグ自動生成ツールです。』と入力した場合、次のように書き出されます。
<meta name="abstract" content="メタタグ自動生成ツールです。" />
Author : 著作者・制作者
・Webページの著者やWebページを開設している会社名などを記入します。『ちょっと便利帳』と入力した場合、次のように書き出されます。
<meta name="author" content="ちょっと便利帳" />
Owner : オーナー
・Webページを開設している会社名などを記入します。Authorと使い分けをすることもできます。『ちょっと便利帳』と入力した場合、次のように書き出されます。
<meta name="owner" content="ちょっと便利帳" />
Designer : デザイナー
・デザイナーが関わった際に記入します。Webmasterを記入することもあります。『Sa.Ka』と入力した場合、次のように書き出されます。
<meta name="designer" content="Sa.Ka" />
Publisher : 出版者
・ウェブサイトで公開している資料などを販売している場合に、AuthorやOwnerの他に「出版者」として会社名などを記入します。『ちょっと便利帳』と入力した場合、次のように書き出されます。
<meta name="pubrisher" content="ちょっと便利帳" />
Mail Address : メールアドレス
・Webページを開設している人や会社などのEメールアドレスです。必ずしも記入する必要はありません。記入する際は、迷惑メール対策として、「@マーク」を、「 %40 」 または 「 &#64; 」の記号にすることをお薦めします。『web***@***.jp』を『web***&#64;***.jp』と入力した場合、次のように書き出されます。

<link rev="made" href="mailto:web***&#64;***.jp" />
Creation Date : 作成日
・ページの制作日を記入します。2004.11.10 や Novenbar 10, 2004 などと記入します。『Novenbar 10, 2004』と入力した場合、次のように書き出されます。
<meta name="creation date" content="Novenbar 10, 2004" />
Copyright : 著作権表示
・AuthorやOwnerなどとダブりますが、通常、 Copyright © 2004 みんなの知識委員会 などと記入します。『©』は、『&copy;』と書きます。『Copyright &copy; 2004 みんなの知識委員会』と入力した場合、次のように書き出されます。
<meta name="copyright" content="Copyright &copy; 2004 みんなの知識委員会 " />
Telephone : 電話番号
・電話番号を記入します。　『000-000-0000』と入力した場合、次のように書き出されます。
<meta name="tel" scheme="000-000-0000" />
Facsimile : ファクス番号
・ファクシミリ番号を記入します。　『000-000-0000』と入力した場合、次のように書き出されます。
<meta name="fax" scheme="000-000-0000" />
Country Code : 国番号
・国番号を記入します。日本は「81」です。『81』と入力した場合、次のように書き出されます。
<meta name="country code" scheme="81" />　　　[リンク：国番号]
Generater : ページ作成ソフト
・ページを作成したソフトウエア（オーサリングソフト）を書いておくことができます。ただし、このメタタグは書かないことの方が多いようです。逆に、自動的に書き込まれてしまうソフトもあるので、このメタタグの削除を勧める専門家もいるようです。『**soft**』と入力した場合、次のように書き出されます。
<meta name="generater" content="**soft**" />
Favicon : ブラウザ用アイコン
・ブラウザのアドレスバーに表示される小さいアイコンを設定することができます。アイコンを ルートディレクトリに「favicon.ico」の名前で保存した場合は、「favicon.ico」と記入してください。それ以外のフォルダに保存した場合は、http:// から始まる URL を記入するのが無難です。 アイコンは、別途作成する必要があります。フリーウエアのアイコン作成ソフトがウェブ上にあります。『favicon.ico』と入力した場合、次のように書き出されます。
<link rel="shortcut icon" href="favicon.ico" />
ちなみに、このサイトでは左のようなアイコンを使用しています。ブラウザのアドレスバーをご覧ください。(一部、表示されないブラウザがあります)
ナビゲーション用リンク［start］
・検索エンジンに対して、最初に読んでもらいたいページを示します。通常は、TOPページのURLを記入します。『http://www.***.co.jp/』と入力した場合、次のように書き出されます。
<link rel="start" href="http://www.***.co.jp/" />
ナビゲーション用リンク［next］
・ページが続く場合、このタグを設定すると「次」のページを先読みし、ダウンロード時間を節約することができます。『http://www.***.co.jp/***.html』と入力した場合、次のように書き出されます。
<link rel="next" href="http://www.***.co.jp/***.html" />
Targeted Geographic Area
　: 地理的対象エリア
・Webページが対象とする地理的エリアを指定します。対象が日本国内であれば「Japan 」、アジアを対象にしていれば「Asia 」とします。『Japan』を選択した場合、次のように書き出されます。
<meta name="Targted Geographic Area" content="Japan" />
Distribution
　: メタタグの適用対象範囲
・他のメタタグが外部に対して指定されているのか、内部に対して指定されているのかを表します。通常、トップページや主なページに対して「 Global 」を、その他のページには「 Local 」を割り当てます。検索ロボットにすべてのページを検索させたければ「 Global 」で指定してもかまいません。『Global』を選択した場合、次のように書き出されます。
<meta name="distribution" content="Global" />
Coverage : サービス提供対象
・ウェブサイトで扱っている商品やサービスについて、提供する対象範囲を指定します。対象が日本国内であれば「Japan 」、世界中の国々を対象にしていれば「 worldwide 」とします。『Japan』を選択した場合、次のように書き出されます。
<meta name="coverage" content="Japan" />
Classification : カテゴリ・分類
・Webページのカテゴリを指定します。多くの検索エンジンが、Webページの分類にこのタグを使用します。例えば、「インターネット」と指定すれば、「インターネット」のカテゴリーにあなたのサイトは分類されます。『インターネット』と入力した場合、次のように書き出されます。
<meta name="classification" content="インターネット" />
Document Class
・文書が完成しているのか、制作中か、出版されているのかなどを記述します。 「Completed」「Draft」「Living Document」「Published」など。『Completed』を選択した場合、次のように書き出されます。
<meta name="doc-class" content="Completed" />
Rating : 対象年齢層
・見てもらいたい年齢層を指定します。すべての年齢層を対象とすれば、「General」もしくは「All Ages」を、子どもに特に見てもらいたいページでは、「Safe For Kids」もしくは「Child」を設定することもできます。『一般』を選択した場合、次のように書き出されます。
<meta name="rating" content="General" />
Robots : 検索ロボットへの指示
・通常は、特に設定する必要はないようですが、設定するとすれば「INDEX,FOLLOW」を選びます。
・ロボットに検索をさせない、つまり、ウェブ上であなたのページを検索して欲しくない場合は、「NOINDEX,NOFOLLOW」を選んで下さい。ただし、絶対に有効という保証はないようです。『INDEX,FOLLOW』を選択した場合、次のように書き出されます。
<meta name="robots" content="INDEX,FOLLOW" />
［指示内容の説明］
・INDEX,FOLLOW : すべてのページの検索を許可。　[ALL]も同じ意味です。
・INDEX,NOFOLLOW : 当該ページのみ検索を許可、他ページは不許可。
・NOINDEX,FOLLOW : 当該ページの検索を不許可、他ページは許可。
・NOINDEX,NOFOLLOW : すべてのページの検索を不許可。　[NONE]も同じ意味です。
No Archive : 保存させない
・検索ロボットに、ページを保存（アーカイブ）させないようにします。頻繁に更新するサイトでは、ロボットがクロールした時点の古い情報を残さないようにするため使います。選択した場合、次のように書き出されます。
<meta name="robots" content="NOARCHIVE" />
Pragma : キャッシュさせない
・ブラウザにページをキャッシュさせないようにします。 アクセスする度に最新のページを見てもらうことができます。選択した場合、次のように書き出されます。
<meta http-equiv="pragma" content="no-cache" />
No Image Index
　: 画像を検索させない
・ページ内の画像が検索対象にならないようにします。選択した場合、次のように書き出されます。
<meta name="robots" content="NOIMAGEINDEX" />
No Image Click
　: 画像へリンクさせない
・ページ内の画像への直接リンクができないようにします。選択した場合、次のように書き出されます。
<meta name="robots" content="NOIMAGECLICK" />
Expires : 有効期限
・ブラウザからページのキャッシュを消去する日時を指定します。ブラウザによって対応が異なるので必ずしも有効とは言えません。あまり使用されないタグです。「 Wed, 10 Nov 2004 22:10:30 JST 」や、「 Novenbar 10, 2004 」などと記入します。『Novenbar 10, 2004』と入力した場合、次のように書き出されます。
<meta name="expires" content="Novenbar 10, 2004" />
Revisit-After : ロボット再巡回
・自動巡回ロボットが訪れた際に、再度、何日後にまた訪問して欲しいと命令します。数字を入力します。ただし、最近はロボットが頻繁に巡回しているので、特に設定する必要はないでしょう。『5』と入力した場合、次のように書き出されます。
<meta name="revisit-after" content="5 days" />
Refresh : 秒数指定でページ移動
・秒数を指定して自動的に別のページへ移動します。
・秒数に続けて「;URL=」を入力し、さらに続けて移動させるページのURLを入力します。
［入力例］　5秒でhttp://www.***.co.jp/へ移動　→　5;URL=http://www.***.co.jp/　と入力すると、次のように書き出されます。
<meta http-equiv="refresh" content="5;URL=http://www.***.co.jp/" />
Refresh : 秒数指定で再読み込み
・短時間に、更新を頻繁に行う場合などに設定します。スポーツの結果などをリアルタイムで見てもらう時などに、ユーザーがページを更新しなくても、ブラウザ側が自動的に指定した秒数でそのページを更新します。秒数を入力します。『30』と入力した場合、次のように書き出されます。
<meta http-equiv="refresh" content="30" />
No Image Toolbar
: ツールバーを表示させない
・Internet Explorer6.0以降で、200×200ピクセル以上の画像にカーソルを乗せると「イメージツールバー」といわれる画像が出ます。ここでは、その「イメージツールバー」を出さないように設定することができます。これを選択した場合、次のように書き出されます。
<meta http-equiv="imagetoolbar" content="no" />
この「ツールバー」は、便利な反面、サイトの性格によっては邪魔になることもあります。

※上記の設定をした場合、全ての画像に適用されますが、画像ごとに個別に指定することもできます。
●上記の設定をしたが、特定の画像には「表示させる」…イメージタグの中に「galleryimg="yes"」を書く。（"yes"は、"true"でも可）
《例》<img src="ファイル名" galleryimg="yes" />
●上記の設定をせずに、特定の画像にのみ「表示させない」…イメージタグの中に「galleryimg="no"」を書く。（"no"は、"false"でも可）
《例》<img src="ファイル名" galleryimg="no" />

※ユーザー側で設定することもできます。
〔1〕イメージツールバーを右クリックし、表示されたメッセージに従って「無効」にする。
〔2〕[ツール]→[インターネットオプション]→[詳細設定]を開き設定する。
NOODP：DMOZデータ、Yahoo!カテゴリデータを検索結果に表示させない
・検索結果に、DMOZ (ODP, Open Directory Project)やYahoo!カテゴリデータに登録されているデータを表示させないようにします。
・登録されているデータが、現在のサイトを表す内容として適切な場合は問題ありませんが、制作者の意図する内容になっていない場合、そのデータを表示させず、ページに書かれた説明文などを表示させるようにします。
検索エンジン3社にDMOZデータ、Yahoo!カテゴリデータを表示させない
・検索エンジン3社(Yahoo,Google,MSN)の結果に、DMOZやYahoo!カテゴリのデータを表示させないようにします。選択した場合、次のように書き出されます。
<meta name="robots" content="NOODP" />
Yahoo!検索の結果にのみDMOZデータ、Yahoo!カテゴリデータを表示させない
・Yahoo!検索の結果にのみ、DMOZやYahoo!カテゴリのデータを表示させないようにします。選択した場合、次のように書き出されます。
<meta name="Slurp" content="NOODP" />
NOYDIR：Yahoo!カテゴリデータを検索結果に表示させない
・Yahoo!検索の結果に、Yahoo!カテゴリに登録されているデータを表示させないようにします。
・登録されているデータが、現在のサイトを表す内容として適切な場合は問題ありませんが、制作者の意図する内容になっていない場合、そのデータを表示させず、ページに書かれた説明文などを表示させるようにします。選択した場合、次のように書き出されます。
<meta name="robots" content="NOYDIR" />
外部CSSを読み込む
・使用するCSSを当該文書の中に書かずに、CSSファイルとして外部に保存した場合、そのファイルを読み込む（リンクさせる）ためのコードです。外部に置いたCSSファイルの拡張子は、「***.css」となりますので、読み込むCSSファイル名を、「.css」まで入力してください。例えば「css」というフォルダに保存したとして、『css/***.css』と入力した場合、次のように書き出されます。
<link rel="stylesheet" type="text/css" href="css/***.css" />
外部JavaScriptを読み込む
・使用するJavaScriptを当該文書の中に書かずに、JavaScriptファイルとして外部に保存した場合、そのファイルを読み込む（リンクさせる）ためのコードです。外部に置いたJavaScriptファイルの拡張子は、「***.js」となりますので、読み込むJavaScriptファイル名を、「.js」まで入力してください。例えば「js」というフォルダに保存したとして、『js/***.js』と入力した場合、次のように書き出されます。
<script type="text/JavaScript" src="js/***.js"></script>
ヘッドダグ <head></head> を書く 開始；
終了：
・メタタグではありませんが、ここでヘッドタグ(<head>)を書き出すことができます。
・ドキュメントタイプの定義を設定し、ヘッドの「開始」と「終了」を選択すると、ボディタグ(<body>)の前に書くべき必要なコードが、必要な順序で全て書き出せます。








　

 

Google
 
 
   
ちょっと便利帳目次へ

●お気付きの点，情報などがごさいましたら，こちらからお知らせください。
●ご質問にはお答え致しかねます。ご了承下さい。
© みんなの知識委員会. All rights reserved.