サーチ…
前書き
HTML文書のメタタグは、説明、キーワード、著者、変更日、約90の他のフィールドを含む文書に関する有用な情報を提供する。このトピックでは、これらのタグの使用方法と目的について説明します。
構文
-
<meta name="metadata name" content="value"> -
<meta http-equiv="pragma directive" content="value"> -
<meta charset="encoding label">
備考
メタタグは、HTML文書のメタデータを設定するためのHTMLタグです。メタタグはhead要素に入る必要があります。ページには任意の数のメタタグが含まれています。
メタタグのkeywordsは、通常、ロボットによって使用されるものではありません。ほとんどの検索エンジンは、どのキーワードがウェブページのコンテンツに適合しているかを判断します。それは言われて、何もあなたはもはやキーワードのメタタグを含めるべきではないことを言う。
ページのメタデータは主にブラウザ（文書のスケーリングなど）や検索エンジン（Google、Yahoo！、Bing）が使用するウェブクロール用のスパイダーで使用されます。
この仕様では、 <meta name>で使用する標準化されたメタデータ名と、 <meta http-equiv>で使用するための標準化されたメタデータプラグマディレクティブを提供しています。しかし、インターネット（Webクローラ、オーサリングツール、ソーシャルシェアリングサービスなど）の多くのサービスはメタデータの一般的な拡張ポイントとして<meta name>形式を使用します。これらのいくつかは、仕様のwikiページに記載されています 。
文字コード
charset属性は、HTML文書の文字エンコーディングを指定し、有効な文字エンコーディング（例： windows-1252 、 ISO-8859-2 、 Shift_JIS 、 UTF-8 ）である必要があります。 UTF-8 （Unicode）は最も広く使用されており、新しいプロジェクトに使用する必要があります。
<meta charset="UTF-8">
<meta charset="ISO-8859-1">
すべてのブラウザは常に<meta charset>フォームを認識していますが、何らかの理由でページが有効なHTML 4.01である必要がある場合は、代わりに次のものを使用できます。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
ブラウザーが認識できる使用可能な文字エンコードラベルをすべて表示するには、「 エンコード標準 」も参照してください。
自動リフレッシュ
5秒ごとにページを更新するには、このmeta要素をhead要素に追加します。
<meta http-equiv="refresh" content="5">
注意！これは有効なコマンドですが、ユーザーエクスペリエンスに悪影響を与えるため、使用しないことをお勧めします。ページをあまりに頻繁に更新すると、ページが反応しなくなることがあり、ページの上部にスクロールすることがよくあります。ページの一部の情報を継続的に更新する必要がある場合は、ページの一部を更新するだけでより良い方法ができます。
モバイルレイアウトコントロール
一般的なモバイルに最適化されたサイトでは、次のように<meta name="viewport">タグを使用します。
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport要素は、使用しているデバイスに基づいて、ページの寸法とスケーリングを制御する方法についてブラウザに指示します。
上記の例では、 content="width=device-widthブラウザは、独自の画面の幅にページの幅をレンダリングすることを意味します。その画面があるので、もし480px wide 、ブラウザのウィンドウになります480px wide 。 initial-scale=1は、最初のズーム（この場合は1で、ズームしないことを意味します）を示します。
このタグがサポートする属性は次のとおりです。
| 属性 | 説明 |
|---|---|
width | デバイスの仮想ビューポートの幅。 値1 ： 480ようなdevice-widthまたは実際の幅（ピクセル単位） |
height | デバイスの仮想ビューポートの高さ。 値2 ： device-heightまたはピクセル単位の実際の幅（ 600 |
initial-scale | ページが読み込まれるときの最初のズーム。 1.0はズームしません。 |
minimum-scale | 訪問者がページをズームできる最小額。 1.0はズームしません。 |
maximum-scale | 訪問者がページ上でズームできる最大量。 1.0はズームしません。 |
user-scalable | デバイスのズームインとズームアウトを許可します。値はyesまたはnoです。 noに設定すると、ユーザーはWebページを拡大することができません。デフォルトはyesです。ブラウザ設定ではこのルールを無視できます。 |
ノート：
1 widthプロパティは、デバイスの画面の物理的な幅を表すピクセル （ width=600 ）またはdevice-width （ width=device-width ）のいずれかで指定できます。
2同様に、 heightプロパティはpixels （ height=600 ）またはdevice-height （ height=device-height ）で指定できます。これはデバイスの画面の物理的な高さを表します。
ページ情報
application-name
ページが表すWebアプリケーションの名前を指定します。
<meta name="application-name" content="OpenStreetMap">
Webアプリケーションでない場合は、 application-nameメタタグを使用しないでください。
author
ページの作成者を設定する：
<meta name="author" content="Your Name">
名前は1つだけ指定できます。
description
ページの説明を設定します。
<meta name="description" content="Page Description">
descriptionメタタグは、さまざまな検索エンジンで使用され、検索目的でWebページにインデックスを付けることができます。通常、メタタグに含まれる説明は、検索エンジンの結果のページ/ウェブサイトのメインタイトルの下に表示される短い要約です。 Googleは通常、説明の最初の20〜25語だけを使用します。
generator
<meta name="generator" content="HTML Generator 1.42">
ドキュメントの生成に使用されたソフトウェアパッケージの1つを識別します。マークアップが自動的に生成されるページにのみ使用されます。
keywords
検索エンジンのキーワードを設定する（カンマ区切り）：
<meta name="keywords" content="Keyword1, Keyword2">
keywordsメタタグは、検索エンジンがウェブページに関連する検索クエリを知るために使用されることがあります。
経験則として、あまりにも多くの単語を追加しないことをお勧めします。このメタタグを索引付けに使用するほとんどの検索エンジンは、最初の〜20語だけを索引付けするためです。最も重要なキーワードを最初に入れてください。
ロボット
いくつかの主要な検索エンジンでサポートされているrobots属性は、検索エンジンのスパイダーがページのインデックスを作成できるかどうか、ページのリンクをたどるかどうかを制御します。
<meta name="robots" content="noindex">
この例では、すべての検索エンジンにページを検索結果に表示しないように指示しています。その他の許可される値は次のとおりです。
| 価値/指令 | 意味 |
|---|---|
all | デフォルト。 index, follow相当しindex, follow 。以下の注記を参照してください。 |
noindex | ページのインデックスを作成しないでください。 |
nofollow | このページのリンクをたどらないでください |
follow | ページのリンクをたどることができます。以下の注記を参照してください。 |
none | noindex, nofollow等しいnoindex, nofollow 。 |
noarchive | このページのキャッシュされたバージョンを検索結果に表示させないでください。 |
nocache | Bingのようないくつかのボットが使用するnoarchive同義語。 |
nosnippet | 検索結果にこのページのスニペットを表示しないでください。 |
noodp | 検索結果のタイトルやスニペットのOpen Directoryプロジェクトから、このページのメタデータを使用しないでください。 |
notranslate | 検索結果にこのページの翻訳を提供しないでください。 |
noimageindex | このページの画像にはインデックスを作成しないでください。 |
unavailable_after [RFC-850 date/time] | 指定した日時以降にこのページを検索結果に表示しないでください。日付/時刻は、 RFC 850形式で指定する必要があります 。 |
注意：明示的にindexやfollow値を定義することfollow 、すべての検索エンジンが明示的に禁止されていると仮定しているので、有効な値では必要ありません。 robots.txtファイルの動作と同様に、検索エンジンは一般的には許可されていないものだけを検索します。検索エンジンが行うことが許可されていないことだけを述べるだけでindex, ..., noindexすべての検索エンジンが同じように扱われるわけではないindex, ..., noindex誤って反対のもの（例えば、 index, ..., noindex ）
電話番号の認識
iOSなどのモバイルプラットフォームでは、電話番号が自動的に認識され、 tel:リンクに変わります。この機能は非常に実用的ですが、ISBNコードやその他の番号を電話番号として検出することがあります。
モバイルSafariやその他のWebKitベースのモバイルブラウザで、電話番号の自動認識と書式設定を無効にするには、次のメタタグが必要です。
<meta name="format-detection" content="telephone=no">
ソーシャルメディア
オープングラフは、サイトのマークアップ内に含まれる通常の情報を拡張するメタデータの標準です。これにより、Facebookなどのウェブサイトは、ウェブサイトに関するより深く豊かな情報を構造化された形式で表示することができます。この情報は、ユーザーがFacebook上のOGメタデータを含むウェブサイトへのリンクを共有すると自動的に表示されます。
Facebook / Open Graph
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph: http://ogp.me/ -->
Facebook /インスタント記事
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">
<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">
Twitterはメタデータに独自のマークアップを使用します。このメタデータは、ツイートにサイトへのリンクが含まれているときのツイートの表示方法を制御するための情報として使用されます。
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
Google+ / Schema.org
<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">
自動リダイレクト
ウェブページに自動リダイレクトが必要なことがあります。
たとえば、5秒後にexample.comにリダイレクトするには：
<meta http-equiv="refresh" content="5;url=https://www.example.com/" />
これは、指定されたWebサイト（この場合は5秒後にexample.comにあなたを送ります。
リダイレクトの前に時間遅延を変更する必要がある場合は、直前の番号を変更するだけで;url=は時間遅延を変更します。
Webアプリケーション
あなたのウェブアプリまたはウェブサイトに、アプリケーションのショートカットアイコンを端末のホーム画面に追加するよう設定し 、Android用Chromeの「ホーム画面に追加」メニュー項目を使用してアプリを全画面「アプリモード」で起動させることができます。
以下のメタタグは、フルスクリーンモード（アドレスバーなし）でWebアプリケーションを開きます。
Android Chrome
<meta name="mobile-web-app-capable" content="yes">
IOS
<meta name="apple-mobile-web-app-capable" content="yes">
メタタグのステータスバーとアドレスバーの色を設定することもできます。
Android Chrome
<meta name="theme-color" content="black">
IOS
<meta name="apple-mobile-web-app-status-bar-style" content="black">
