IT Design 旅 PetLife Life RenojiStock AboutUs
ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs（Mozilla）
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ（空白）」を表示する方法
「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon（ファビコン）」の作り方他のページに移行する「リンク」の作り方 表の作り方Webページに「画像」の埋め込む方法Webページに「動画」を埋め込む方法Webページに「音声ファイル」を埋め込む方法地図を埋め込む方法入力フォームの作り方
「HTML」タグ
【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト（箇条書き）で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素





IT Memo >>> HTML >>> 【HTML】「meta」タグ - 「Webページ」の設定をする「HTMLタグ」

【HTML】「meta」タグ - 「Webページ」の設定をする「HTMLタグ」

【HTML】
「meta」タグ
「Webページ」の設定をする「HTMLタグ」




「meta」タグは、
「HTML文書」の

・文字コード
・概要
・キーワード

などを設定できる「HTMLタグ」。


「文字化け対策」や、
「検索エンジン対策」など
需要な設定があります。


詳しくは、
下記をご参照ください。



「meta」タグとは


「meta」タグは、
「HTML文書」の

・文字コード
・概要
・キーワード

などを設定できる「HTMLタグ」。


記述しなくても、
「Webページ」は表示されるが、
「文字化け」や「検索エンジンへの登録」などの対策として、
必ず記述すべき内容はある。


Back

「meta」タグの書式


「meta」タグの記述方法は、
シンプルで、記述方法も決まっているので、
決められた書式通りに、内容を記述する。


「meta」タグの基本書式

<meta 属性名="値">
<meta 属性名="属性値" content="内容">


<meta charset="UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes">
<meta name="Description" content="Webページの説明文">
<meta name="keywords" content="キーワード,キーワード,キーワード,キーワード,・・・・・・・">


文字コード
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5 では、下記記法も可能。HTML文書先頭1024バイト以内に記述する。

<meta charset="Shift_JIS">
<meta charset="euc-jp">
<meta charset="iso-2022-jp">
<meta charset="UTF-8">

基準スクリプト言語
イベントハンドラのonclick="..." などで利用される基準スクリプト言語を指定。
HTML5では、標準スクリプトがjavascriptとなったため、JavaScriptの場合は記述不要。

<meta http-equiv="Content-Script-Type" content="text/javascript">

基準スタイルシート言語
文書中の style 属性の基準言語を指定。
HTML5では、CSSが標準となった為記述不要。

<meta http-equiv="Content-Style-Type" content="text/css">

文書の著者
文書の著者を明記。
画面上の変化なし。
contentの部分にはメールアドレスを記入してもOK。

<meta name="Author" content="Tohoho">

文書のキーワード
文書に関連するキーワードを指定。
検索ロボットの中にはこのキーワードを解釈するものもある。
<meta name="Keywords" content="HTML,CSS,javascript">

文書の概要
文書に関連する説明（description）を記述。
検索ロボットの中には、文章を解釈するものある。
<meta name="Description" content="説明文章">

画面の再描画
文書を 10秒毎に再描画。
この機能をクライアントプルという。
<meta http-equiv="Refresh" content="10">

別ページへの自動ジャンプ
10秒後にURL=...で指定したURLに移動。
ホームページの移動の際に用いている例がある。
<meta http-equiv="Refresh" content="10;URL=http://●●●.com/">

キャッシュの有効期限
文書がキャッシュから消去されるべき時刻を指定。
過去の時刻＝キャッシュが無効化。
0 や -1 のような無効な値を指定＝キャッシュ無効化。
<meta http-equiv="Expires" content="Mon, 11 Feb 2013 15:30:11 GMT">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Expires" content="-1">

キャッシュ制御
文書がブラウザ側にキャッシュされないようにする。
アクセスする度に最新のページを読み込ませる。
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

検索ロボット制御
goo や Google などの検索ロボットへの指示を記述。
index＝検索を許可
noindex＝は検索を禁止
follow＝リンク先をたぐることを許可
nofollow＝リンク先参照を禁止。
<meta name="robots" content="noindex,nofollow">

トランジション指定
ページを移動する時のビジュアル効果を指定。→「トランジション」。
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.8)">

イメージツールバーの無効化
IE6.0 でサポートされたイメージツールバー（画像にマウスを乗せたときに表示される印刷・保存などのツールバー）を無効化。
<meta http-equiv="imagetoolbar" content="no">

作成エディタ
使用されたHTMLエディタ名を指定。
<meta http-equiv="Generator" content="Simple HTML Editor V2.5">

IEのレンダリングモード指定
IE独自の機能で、指定したIEのバージョンモードでレンダリングを行う。
<meta http-equiv="X-UA-Compatible" content="IE=7">




「meta」タグで使用できる属性
属性説明
charset 「HTML文書」の「文字コード」を指定する「属性」。
content 「name」「http-equiv」属性のコンテンツ内容を記述するのに使用する「属性」。
http-equiv 以下の属性値を指定し、文書の処理方法などを指定する。

content-language文書の記述言語を指定するために使用するが、「非推奨」の指定方法。文書の記述言語は、「lang」属性を使用する。
content-type「文字コード」を指定する。
default-style「優先スタイルシート」を指定する。
refresh「自動更新」「リダイレクト」を指定する。
set-cookie「Cooki」eを設定する。この指定は「非推奨」。「HTTPヘッダー」の使用が「推奨」。
name「要素」に名前を付与する「属性」。内容を「content」属性で指定する。
「name」属性の値説明
application-name文書が「Webアプリケーション」を利用している場合、「アプリケーション名」を指定する。
author文書の「著作者」の名前を記述する。
description文書の「概要」を記述する。
generator文書がソフトウェアによって記述・作成されている場合に、ソフトウェア名を記述する。
keywords文書の内容を表す「キーワード」を記述する。「content」属性の値に、「カンマ（,）」区切りで複数のキーワードを入力する。



Back

「meta」タグの「記述位置」と「サンプルコード」


「meta」タグの記述位置とサンプルコードは、
下記のようになっています。



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes">
<meta name="Description" content="Webページの説明文">
<meta name="keywords" content="キーワード,キーワード,キーワード,キーワード,・・・・・・・">

<link href="./「CSS」外部ファイル.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="./「Javascript」外部ファイル名.js"></script>

<link rel="shortcut icon" href="./ファビコンイメージファイル名.ico">
</head>
<body>
「Webページ」の「コンテンツ内容」を記述する場所
</body>
</html>



Back