IT Design 旅 PetLife Life for English RenojiStock AboutUs
ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs（Mozilla）
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ（空白）」を表示する方法【XML】サイトマップ作り方
「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon（ファビコン）」の作り方他のページに移行する「リンク」の作り方 表の作り方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】「ルビ」をふるための要素
SEO（Search Engine Optimization）
「SEO対策」の具体的な方法「検索エンジン」に登録する方法「SEO対策」に有効な「ページタイトル」の記述方法「SEO対策」に有効な「キーワード」の記述方法「SEO対策」に有効な「ディスクリプション」の記述方法





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