< meta > 要素

概要

metaタグはHTMLドキュメントに関するメタデータを提供します。メタデータはページには表示されませんが、機械にとっては読み取り可能です。ブラウザ（コンテンツの表示方法やページの再読み込み）、検索エンジン（キーワード）、または他のウェブサービスで使用できます。

必須属性

属性	值	説明
content	some text	http-equivまたはname属性に関連するメタ情報を定義します。

任意属性

属性	值	説明
http-equiv	content-type / expire / refresh / set-cookie	content属性をHTTPヘッダーに関連付けます。
name	author / description / keywords / generator / revised / others	content属性を名前に関連付けます。
content	some text	content属性値を解釈するための形式を定義します。

SEO最適化

参考ドキュメント

ページのキーワード、各ウェブページには、そのページの内容を説明する一意のキーワードのセットが必要です。
人々が検索しそうで、かつウェブページで提供される情報を正確に説明する、説明的かつ代表的なキーワードやフレーズを使用してください。タグの内容が短すぎると、検索エンジンはそれらのコンテンツを関連性があると見なさない可能性があります。また、タグは874文字を超えてはなりません。

<meta name="keywords" content="your tags" />

ページの説明、各ウェブページには、150文字以内でウェブページの内容を正確に反映する説明タグが必要です。

<meta name="description" content="150 words" />

検索エンジンのインデックス方法、robottermsはカンマ(,)で区切られた値のセットで、通常次の値があります：none、noindex、nofollow、all、index、follow。nofollowとnoindexの属性値を正しく使用してください。

<meta name="robots" content="index,follow" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。
 -->

ページリダイレクトとリフレッシュ：content内の数字は時間（秒）を表し、つまり何秒後にリフレッシュするかを示します。URLを追加すると、指定したウェブページにリダイレクトされます（検索エンジンは自動的に検出でき、エンジンに誤誘導とみなされてペナルティを受けることも非常に簡単です）。

<meta http-equiv="refresh" content="0;url=" />

その他

<meta name="author" content="author name" /> <!-- 定义网页作者 -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

モバイルデバイス

viewport：モバイルブラウザの表示を最適化できます。レスポンシブサイトでない場合は、initial-scaleを使用したり、ズームを無効にしたりしないでください。
ほとんどの4.7〜5インチデバイスのviewport幅は360pxに設定；5.5インチデバイスは400px；iPhone 6は375px；iPhone 6 Plusは414pxに設定。

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

width：幅（数値 / device-width）（範囲は200〜10,000、デフォルトは980ピクセル）
height：高さ（数値 / device-height）（範囲は223〜10,000）
initial-scale：初期のズーム比率（範囲は>0から10）
minimum-scale：ユーザーがズームできる最小の比率
maximum-scale：ユーザーがズームできる最大の比率
user-scalable：ユーザーが手動でズームできるかどうか (no,yes)
minimal-ui：ページ読み込み時に上下のステータスバーを最小化できます。（非推奨）

注意：多くの人は、非レスポンシブサイトにinitial-scale=1を使用しています。これによりサイトは100%幅でレンダリングされ、ユーザーは手動でページを移動またはズームする必要があります。initial-scale=1と同時にuser-scalable=noまたはmaximum-scale=1を使用すると、ユーザーはウェブページを拡大/縮小して全体の内容を見ることができなくなります。

WebAppフルスクリーンモード：アプリを装い、オフラインで使用できるようにします。

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

ステータスバーを非表示/ステータスバーの色を設定：WebAppフルスクリーンモードを有効にした場合のみ有効です。contentの値は default | black | black-translucent です。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

ホーム画面に追加した後のタイトル

<meta name="apple-mobile-web-app-title" content="标题">

meta123

数字を自動的に電話番号として認識しないようにする

<meta content="telephone=no" name="format-detection" />

メールアドレスを自動認識しないようにする

<meta content="email=no" name="format-detection" />

スマートApp広告バナー（Smart App Banner）を追加：ブラウザにこのサイトに対応するアプリを伝え、ページにダウンロードバナーを表示します（下図参照）。参考ドキュメント

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

その他 参考ドキュメント

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

ウェブページ関連

文字コードの宣言

<meta charset='utf-8' />

IEの最新バージョンとChromeを優先的に使用

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

ブラウザエンジンの制御：中国国内のブラウザの多くはデュアルエンジン（WebKitとTrident）です。WebKitエンジンは高速に閲覧でき、IEエンジンはウェブページや旧バージョンのサイトと互換性があります。metaタグを追加したサイトは、ブラウザがどのエンジンを選択してレンダリングするかを制御できます。参考ドキュメント

<meta name="renderer" content="webkit|ie-comp|ie-stand">

中国国内のデュアルエンジンブラウザのデフォルトのエンジンモードは次のとおりです：
1. 搜狗高速浏览器、QQ浏览器：IEエンジン（互換モード）
2. 360极速浏览器、遨游浏览器：WebKitエンジン（高速モード）

ブラウザがローカルコンピュータのキャッシュからページコンテンツにアクセスすることを禁止します：このように設定すると、訪問者はオフラインで閲覧できなくなります。

<meta http-equiv="Pragma" content="no-cache">

Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

サイト適応：主にPCとモバイルページの対応関係に使用されます。

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
 -->

トランスコード宣言：百度でウェブページを開くと、そのページがトランスコードされることがあります（例えば広告を貼られる）。トランスコードを避けるには、次のmetaを追加します。

<meta http-equiv="Cache-Control" content="no-siteapp" />

その他の参考ドキュメント

COMPLETE LIST OF HTML META TAGS
W3C META TAGS
METATAGES in HTML5
MDN META TAGS

出典：http://segmentfault.com/a/1190000002407912

よく使うmeta整理

カテゴリプログラミング技術

< meta > 要素

概要

SEO最適化

モバイルデバイス

ウェブページ関連

その他の参考ドキュメント

よく使うmeta整理

カテゴリ プログラミング技術

< meta > 要素

概要

SEO最適化

モバイルデバイス

ウェブページ関連

その他の参考ドキュメント

カテゴリプログラミング技術