HTML & CSS

リファレンス

HTML

メタ

meta要素

HTML文書のメタデータを表します。文字コード指定、ページ内容の紹介、OGP(Open Graph Protocol)など様々な指定を行うことができます。

サンプルコード

<meta charset="utf-8">
<meta name="viewport" content="width=device-width; user-scalable=no">
<meta name="description" content="ページ内容の概要を記述する際に使用します。">
<meta property="og:url" content="https://gray-code.com">
<meta property="og:title" content="GrayCode">
<meta property="og:type" content="website">
  • カテゴリー

    メタデータコンテンツ

  • コンテンツモデル

    なし

  • 使用ケース

    head要素内に記述。

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

charset

「UTF-8」や「Shift-JIS」など、文書の文字コードを指定します。

name

メタデータの種類を表し、必ずcontent属性とペアで指定します。

  • application-name

    HTML文書がWebアプリケーションの中の一部である場合、アプリケーション名をcontent属性に記述します。

  • author

    著作者を明示したい場合に、content属性に著者名を記述します。

  • description

    HTML文書の概要(内容が書かれた短い文章)、content属性に記述します。1つの文書に1つだけ指定することができます。SEOを意識すると、1つのサイト内に全く同じ内容のdescriptionが書かれたページが複数存在することは望ましくありません。また、140文字前後が最適とされ、長すぎると評価が悪くなってしまう可能性があります。

  • generator

    HTML文書がソフトウェアによって動的に生成されている場合に、そのソフトウェア名をcontent属性に記述します。

  • keywords

    HTML文書に描かれている内容のキーワードを、content属性に記述します。「,」で区切ることで複数入力可。ただし、SEOとしては効果が期待できないため、keywordsメタデータは記述しないことが多いです。

  • robots

    検索エンジンのクローラーへの指定をcontent属性へ記述します。インデックスの拒否、ページ中の全リンク先のクロールを拒否したい場合に使用します。

  • viewport

    スマホやタブレット端末などへの、Webページ表示を制御したい場合に使用します。

http-equiv

文書のスタイルシートやスクリプトで使う言語の指定、その他関連する処理方法を指定することができます。

  • content-type

    文字コードを指定する場合に使用します。charset属性で代替できます。

  • default-style

    特定のスタイルシートを優先して使用したい場合に指定します。

  • refresh

    ページの自動更新やリダイレクトの設定を指定することができます。エラーページなどで、「一定時間ページを表示してからトップページへリダイレクト」といった処理が行えます。

  • Content-Style-Type

    「text/css」など、ページで使用する基本スタイルシート言語を指定します。

  • Content-Script-Type

    「text/javascript」など、ページで使用する基本スクリプト言語を指定します。

property

FacebookやTwitterなどのSNS向けメタデータを指定することができます。これをOGP(Open Graph Protocol)と言い、WebページをSNSに投稿する際に、ここで指定したデータを優先的に表示させることができます。
代表的なものをいくつかご紹介します。より詳細な仕様については原文(英語)をご参照ください。

  • og:title

    サイト名

  • og:type

    サイトタイプ(website、blog、articleなど)

  • og:url

    サイトURL

  • og:image

    投稿時に優先して表示されるサムネイル画像

  • og:description

    ページ内容の概要文

content

name属性、http-equiv属性、robots属性など他の属性とセットで使用します。

使用例

著者情報、キーワード、ディスクリプション(概要)の設定例

<meta name="author" content="山田太郎">
<meta name="keywords" content="HTML,HTML5,CSS,CSS3,CSS2.1">
<meta name="description" content="ここに、HTML文書の概要を140文字程度で記述します。">

Viewportの設定

  • initial-scale

    ページが読み込まれて表示されるときの、拡大・縮小率を設定します。初期状態(指定しない場合)ではページを端末の画面に合わせて表示。「minimum-scale」と「maximum-scale」の間の値のみ設定できます。

  • minimum-scale

    最小倍率を0〜10の間で指定します。初期値は0.25。

  • maximum-scale

    最大倍率を0〜10の間で指定します。初期値は1.6

  • width

    表示領域の幅を指定します。200px〜10000pxの範囲で指定するか、「device-width」で端末の画面サイズを設定することができます。

  • height

    表示領域の高さを指定します。233px〜10000pxの範囲で指定するか、「device-height」で端末の画面サイズを設定することができます。

  • user-scalable

    ユーザーのズーム操作を制御します。「yes」(初期値)を指定するとズーム可、「no」を指定すると「ズーム不可」。

<!-- Webページの表示を端末サイズに合わせ、ユーザによるズーム操作を不可に設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

検索エンジンクローラーへの指定

<!-- インデックスを拒否 -->
<meta name="robots" content="noindex">		

<!-- ページ内の全リンク先クロールを拒否 -->
<meta name="robots" content="nofollow">

<!-- インデックス、リンク先のクロールをどちらも拒否 -->
<meta name="robots" content="noindex,nofollow">

リダイレクト設定

<!-- 10秒毎に再読み込み -->
<meta name="refresh" content="10">		

<!-- 3秒後に指定したURLへリダイレクト -->
<meta name="refresh" content="3; url=https://gray-code.com">

OGPタグの設定

<meta property="og:title" content="GrayCode">		
<meta property="og:url" content="https://gray-code.com">
<meta property="og:type" content="website">
<meta property="og:description" content="HTML5の情報を発信中!!">
<meta property="og:image" content="https://gray-code.com/images/logo.png">

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。