meta タグエレメント
meta タグエレメントは、ページの作成者名、検索ロボットへのテキスト情報、文字コードなどの web ページへの付加情報を設定するための HTML タグエレメントです。
web ページの表示に関する設定、スクリプトやスタイルシートの形式、Twitter や FaceBook などのSNSからの検索情報やページの更新、遷移に関する設定もこのエレメントを利用します。
<meta charset="utf-8">
詳しくは Example を参照してください
<meta> は <head> エレメントに包括されるエレメントです。
<head> エレメントについては<head> エレメント
を参照してください。
<meta> エレメントにはその属性によって以下の機能があります。検索情報や SNS との連携、レスポンシブ web ページへの対応に使用します。
charset | 文字コードの指定。言語ではありません |
name="viewport" | web ページの表示設定の指定 |
name="author" | 著作者 |
name="robots" | 検索ロボットへの設定 |
name="description" | 検索への配慮 description |
name="keywords" | 検索への配慮 keywords |
http-equiv="refresh" | ページのリダイレクト、更新 |
property="og:" | SNSへの配慮 |
属性
meta タグエレメントには以下の属性があります。用途によって属性の組み合わせが変わります。
ここでは属性の一覧のみを示します。使用例は以下のExample
を参照してください。
プロパティ | 概要 |
---|---|
charset | 文字コード。utf-8、shift_jis、euc-jp など |
content | name または http-equiv 属性の値に関連付けられた値。 DOMString 型 |
http-equiv | プラグマディレクトリの名称。content データとペアで利用。 DOMString 型 |
name | メタデータの名称。content データとペアで利用。 DOMString 型 |
Example
ブラウザで meta タグを確認したい場合は、web ページの上で右クリックし、メニューのページのソースを表示
を選択します。
またはショートカットキーを使用します。CTRL + U
、Mac ではCommand + Option + U
です。
meta タグエレメントは、用途によって属性の組み合わせが変わります。以下に用途による作成例を紹介します。
文字コードの指定
web レスポンシブの対応
著作者
検索ロボットへの設定
検索への配慮 description
検索への配慮 keywords
ページのリダイレクト、更新
スタイルシート宣言
<style> エレメントについてはstyle タグエレメント
を参照してください。
スクリプト宣言
<script> エレメントについてはscript タグエレメント
を参照してください。
SNSへの配慮
<meta> エレメントに設定する OGP ( Open Graph Protocol )とは、Twitter や FaceBook などのSNS上で web ページやブログがシェアされたときに、そのページのタイトルや概要、URL、画像などの情報を提供するためのメタ設定です。
詳しくは<meta> OGP について
を参照してください。
JavaScript
<meta> の定義は HTMLMetaElement を参照してください。