メタタグの書き方


  メタ文字が出てきたついでにMATA TAGについて説明します。
 メタタグ<meta 〜>は<head>〜</head>の間に書きます。
 

  ★例えば一例をあげると

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
  <html lang="ja">
  <head>
    <title>ホームページ</title>
    <META http-equiv="Content-Type" CONTENT="text/html;charset=Shift_JIS">
    <META name="keywords" content="キーワード1,キーワード2,キーワード3">
    <META name="description" content="サイトの説明文">   
<link rel="stylesheet" type="text/css" href="../****/***.css">
  </head>
  <body>
     略
  </body>
</html> 


メタタグは次のようなものがあります。
--------------------------------------------------

★サイトの説明 
<meta name="description" content="xxx">
 xxxには検索された時に表示する説明文を明記します。
  検索エンジンのスニペットで使用されたり、SEOでとても重要なので、必ず記述しましょう。
  GoogleやYahooでは、全角で100文字程度が良いとされています。
---------------------------------------------------
★サイトのキーワード 
<meta http-equiv="keyword" content="xxx,yyy,zzz">
<meta name="keyword" content="xxx,yyy,zzz">
 xxx、yyyやzzzにはキーワードになる言葉を明記します。
  ページの内容に関連するキーワードをカンマ区切りで記述します。
  記述したワードがページに含まれていないと無効になります。
----------------------------------------------------
★ロボットの操作 
<meta name="robots" content="xxx">
 xxxには次のキーワードを指定します。
  noindex:METAタグがあるページを検索エンジンに許可しない
  nofollow:METAタグがあるページからリンクされているページ許可しない
  noarchive:ページをキャッシュしない
  none: METAタグがあるページとリンクされている全てのページを許可しない
  all: METAタグがあるページとリンクされている全てのページを許可する 
  index:METAタグがあるページ許可する
  follow: METAタグがあるページからリンクされているページ許可する 
  -----------------------------------------------------
★言語の指定 
<meta http-equiv="content-language" content="xxx">
<meta name="content-language" content="xxx">
    HTMLにおける主言語を指定します。
   xxxには次のキーワードのいずれかが入ります。
   ja :日本語 
   en-gb: 英語(イギリス) 
   en-us :英語(アメリカ) 
   it :イタリア語 
   de :ドイツ語 
   fr :フランス語 
   ko :韓国語 
  キーワードはこの他にも多数あります。
    <html lang="ja"> や <body lang="ja"> などHTMLタグにも記述できますが、
    metaタグで指定することが推奨されています。また、metaタグが優先されます
----------------------------------------------
★表示時の文字コードを指定 
<meta http-equiv="content-type" content="text/html;charset=xxx">
 xxxには次のキーワードのいずれかが入ります。
    utf-8
  shift_jis 
  euc-jp 
  iso-2022-jp
 Content-Typeでは、。
-------------------------------------------------------
★別のページへ移動 
<meta http-equiv="refresh" content="N;url=xxx">
  Nには指定ページへジャンプするまでの秒数を指定します。
  xxxにはジャンプするページのURLを指定します。
   urlを指定しない場合は、そのページが再読み込みされます。
-----------------------------------------------
★ページの有効期限 
<meta http-equiv="expires" content="N">
  "N"にはページの期限が切れる日時を指定します。
  書式:曜日, 日 月 年 時 分 秒 GMT 
  (例:Fri, 22 Feb 2002 22:22:22 GMT)
   過去の日付や、無効な値を指定するとキャッシュが無効になります。

------------------------------------------------
★キャッシュの無効 キャッシュの有効期限
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
   no-cache を指定することでページキャッシュを無効にします。
   ブラウザが対応している場合のみ有効です。
--------------------------------------------------
★スタイルシート言語とスクリプト言語を指定
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 今では標準で、スタイルは text/css、スクリプトは text/javascript
 と定められているので、特に記載する必要はありません。
----------------------------------------------------
★著作権を表記します。
<meta name="author" content="xxx">
<meta name="copyright" content="xxx">
  xxxには作成者・著作権者を明記します。
   著作権は特に明記する必要がないので、設定しなくても問題ありません。
-----------------------------------------------------
★作成者
<meta name="author" content="hoge">
  著者を明記します。
-------------------------------------------------
★連絡先
<meta name="reply-to" content="zzz">
  zzzには連絡先のメールアドレスを明記します。
-----------------------------------------------
★作成年月日
<meta name="build" content="N">
  Nにはページが作成された年月日を明記します。
----------------------------------------------------
★ページの使用言語を記述します。
<meta name="language" content="Japanese">
  Japanese、Englishなど英語で記述します。
  その他にもいろいろあります
----------------------------------------------------
★イメージツールバーを無効
<meta http-equiv="imagetoolbar" content="no" />
 (画像にマウスを乗せた時に表示されるツールバー)
----------------------------------------------------
★表示の幅などを指定します
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 たとえば、width=320 とすると320pxに設定されます。
 こうすることで、この幅に調整して画面が表示されます。
 レスポンシブWebデザインでは、width=device-widthと指定します。
-----------------------------------------------------
★HTMLを作成した時に使用したエディタ名
<meta name="generator" content="hoge">
-----------------------------------------------------
★サービス提供範囲を指定
<meta name="coverage" content="worldwide">
  worldwide、asia、japan などの地域名や国名を記述します。
------------------------------------------------------
★ページの地理的な対象範囲
<meta name="Targeted Geographic Area" content="Japan">
  asia、japan などの地域名や国名を記述します。
------------------------------------------------------
★ページのジャンルを指定
<meta name="classification" content="general">
  business, computers, entertainment, internet, miscellaneous, personalなどを記述します。
-----------------------------------------------------------
★ページの閲覧対象年齢層
<meta name="rating" content="general">
   safe for kids、adultなどがあり、閲覧制限のない場合は、generalを記述します。
----------------------------------------------------------
★検索エンジンが次に訪れるまでに日数
<meta name="revisit_after" content="20 days">
   実際に訪れるかどうかは謎です。
------------------------------------------------------------
★他のmetaタグの対象範囲が外部なのか、内部なのかを指定
<meta name="distribution" content="Global">
  通常は、トップページには Global、その他の各ページには Local を指定します。
  全てのページをindexさせたい場合は Global で問題ありません。
----------------------------------------------------------
★ページの切り替え(トランジション) 
<meta http-equiv="page-enter" content="RevealTrans(Duration=N,Transition=xxx)">
 Nには効果の長さを指定します。
 xxxには次の番号のいずれかが入ります。
番号と効果 
0 :Box in 
1 :Box out 
2 :Circle in 
3 :Circle out 
4 :Wipe up 
5 :Wipe down 
6 :Wipe right 
7 :Wipe left 
8 :Vertical blinds 
9 :Horizintal blinds 
10: Checkerboard across 
11: Checkborard down 
12: Random dissolve 
13: Split vertical in 
14: Split vertical out 
15: Split horizontal in 
16: Split horizontal out 
17: Strips left down 
18: Strips left up 
19: Strips right down 
20: Strips right up 
21: Random bars horizontal 
22: Random bars vertiacal 
23: Random 
----------------------------------------------------
★Facebookで使用する情報
<meta property="og:title" content="タイトル" />
<meta property="og:description" content="説明文" />
<meta property="og:type" content="タイプ" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="こサムネイル画像のURL" />
   ページがシェアされた時などに、そのページ情報をFacebookに伝えるために設定します。
   このようにpropertyを使用して、一部アプリの用にmetaタグを記述することもあるのです。



  正規表現記述法..........トップ