meta要素

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「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">

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

コメントありがとうございます！
運営の参考にさせていただきます。