「HTML - headタグ」の版間の差分

2024年11月8日 (金) 21:30時点における版

概要

metaタグ

name属性の予約語は、HTML 5の仕様やブラウザベンダー、検索エンジン、SNSプラットフォーム等によって定義されている。
これらの予約語を適切に使用することにより、SEO、ソーシャルメディア共有、モバイル対応等、様々な最適化が可能になる。

※注意
新しい予約語は随時追加される可能性がある。
特に、SNSやモバイル関連の機能で新しい予約語が登場することがある。

また、属性の値において、大文字・小文字は区別されない。
以下に示す記述は、全て同じように機能する。

name="viewport"
name="Viewport"
name="VIEWPORT"

表示設定

metaタグのname属性で使用される表示設定の予約語を、以下に示す。

viewport

モバイルデバイスにおいて、Webページの表示方法を制御する重要な設定を行う。
これは、モバイルブラウザが特別に認識する値の1つである。

viewportという値は、W3CやWHATWGによって標準化された値である。

このタグが重要な理由を以下に示す。

レスポンシブデザインの基礎となる設定である。
モバイルでの表示が適切になり、ユーザビリティが向上する。
Googleのモバイルフレンドリーの評価基準の1つとなっている。

 <meta name="viewport" content="...">

 <!-- 使用例 -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width
デバイスの画面幅に合わせてページの幅を設定する。

例: iPhoneで見る場合は画面幅の390px、iPadで見る場合は768pxに自動調整される。

この設定が無い場合、モバイルデバイスでPCサイト用の幅 (例: 1920px等) で表示されるため、小さく表示されてしまう。
initial-scale=1.0
ページの初期表示時の拡大率を設定する

1.0は等倍 (100%) を意味する。

例: 0.5にすると50%で表示 (縮小)、2.0にすると200%で表示 (拡大) される。
maximum-scale=1.0
最大拡大率を設定する。

user-scalable=no

ユーザによるピンチイン・アウトを無効化する。

ただし、アクセシビリティの観点から、ユーザのズーム操作を制限する設定 (maximum-scaleやuser-scalable=no) は推奨されない。
これは、視覚に障害のあるユーザが必要に応じて拡大できるようにすることが望ましいとされているからである。

format-detection

電話番号・メールなどの自動リンク設定を指定する。

 <meta name="format-detection" content="...">

handheldfriendly

古い携帯端末向け設定を指定する。

 <meta name="handheldfriendly" content="...">

mobileoptimized

Windows Phone向け設定を指定する。

 <meta name="mobileoptimized" content="...">

基本情報

metaタグのname属性で使用される基本情報の予約語を、以下に示す。

description

サイトの説明を指定する。

 <meta name="description" content="...">

keywords

キーワードを指定する。
ただし、検索エンジンでの重要性は低下している。

 <meta name="keywords" content="...">

author

作成者を指定する。

 <meta name="author" content="...">

copyright

著作権情報を指定する。

 <meta name="copyright" content="...">

application-name

Webアプリケーション名を指定する。

 <meta name="application-name" content="...">

generator

作成に使用したツールを指定する。

 <meta name="generator" content="...">

theme-color

テーマカラーを指定する。

 <meta name="theme-color" content="#4285f4">

検索エンジン向け設定

metaタグのname属性で使用される検索エンジン向け設定の予約語を、以下に示す。

robots

全ての検索エンジンへの指示を指定する。
robotsが取れる値は、index、follow、noindex、nofollow等である。

 <meta name="robots" content="...">

msnbot

Bing専用の指示を指定する。

 <meta name="msnbot" content="...">

google

Google向けの追加設定を指定する。

 <meta name="google" content="...">

googlebot

Google専用の指示を指定する。

 <meta name="googlebot" content="...">

google-site-verification

Googleの所有者確認を指定する。

 <meta name="google-site-verification" content="...">

slurp

Yahoo!専用の指示を指定する。

 <meta name="slurp" content="...">

セキュリティ関連

metaタグのname属性で使用されるセキュリティ関連の予約語を、以下に示す。

referrer

リファラポリシーの設定を指定する。

 <meta name="referrer" content="...">

csrf-token

CSRFトークンを指定する。

 <meta name="csrf-token" content="...">

csrf-param

CSRFパラメータを指定する。

 <meta name="csrf-param" content="...">

SNS最適化 (OGP) 設定

metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。

Twitter Cardを指定する。

 <meta name="twitter:card" content="...">

twitter:site

Twitterアカウントを指定する。

 <meta name="twitter:site" content="...">

twitter:creator

作成者のTwitterを指定する。

 <meta name="twitter:creator" content="...">

カスタムメタ情報

カスタムメタ情報を設定する場合は、以下に示すような形式を使用する。

 <!-- カスタムメタデータの例 -->
 <meta name="my-custom-info" content="...">

@@ 3行目: / 3行目: @@
 == metaタグ ==
-大文字・小文字は区別されない。<br>
+name属性の予約語は、HTML 5の仕様やブラウザベンダー、検索エンジン、SNSプラットフォーム等によって定義されている。<br>
-これらは全て同じように機能する。<br>
+これらの予約語を適切に使用することにより、SEO、ソーシャルメディア共有、モバイル対応等、様々な最適化が可能になる。<br>
+<br>
+<u>※注意</u><br>
+<u>新しい予約語は随時追加される可能性がある。</u><br>
+<u>特に、SNSやモバイル関連の機能で新しい予約語が登場することがある。</u><br>
+<br>
+また、属性の値において、大文字・小文字は区別されない。<br>
+以下に示す記述は、全て同じように機能する。<br>
 * name="viewport"
 * name="Viewport"
 * name="VIEWPORT"
 <br>
-==== 予約語 ====
+==== 表示設定 ====
-metaタグのname要素で使用される予約語を、以下に示す。<br>
+metaタグのname属性で使用される表示設定の予約語を、以下に示す。<br>
 <br>
 ===== viewport =====
@@ 49行目: / 56行目: @@
 <u>ただし、アクセシビリティの観点から、ユーザのズーム操作を制限する設定 (maximum-scaleやuser-scalable=no) は推奨されない。</u><br>
 <u>これは、視覚に障害のあるユーザが必要に応じて拡大できるようにすることが望ましいとされているからである。</u><br>
+<br>
+===== format-detection =====
+電話番号・メールなどの自動リンク設定を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="format-detection" content="...">
+ </syntaxhighlight>
+<br>
+===== handheldfriendly =====
+古い携帯端末向け設定を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="handheldfriendly" content="...">
+ </syntaxhighlight>
+<br>
+===== mobileoptimized =====
+Windows Phone向け設定を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="mobileoptimized" content="...">
+ </syntaxhighlight>
+<br>
+==== 基本情報 ====
+metaタグのname属性で使用される基本情報の予約語を、以下に示す。<br>
 <br>
 ===== description =====
@@ 58行目: / 86行目: @@
 ===== keywords =====
 キーワードを指定する。<br>
+ただし、検索エンジンでの重要性は低下している。<br>
   <syntaxhighlight lang="html">
   <meta name="keywords" content="...">
@@ 67行目: / 96行目: @@
   <meta name="author" content="...">
   </syntaxhighlight>
+<br>
+===== copyright =====
+著作権情報を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="copyright" content="...">
+ </syntaxhighlight>
+<br>
+===== application-name =====
+Webアプリケーション名を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="application-name" content="...">
+ </syntaxhighlight>
+<br>
+===== generator =====
+作成に使用したツールを指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="generator" content="...">
+ </syntaxhighlight>
+<br>
+===== theme-color =====
+テーマカラーを指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="theme-color" content="#4285f4">
+ </syntaxhighlight>
+<br>
+==== 検索エンジン向け設定 ====
+metaタグのname属性で使用される検索エンジン向け設定の予約語を、以下に示す。<br>
 <br>
 ===== robots =====
-検索エンジンへの指示を指定する。<br>
+全ての検索エンジンへの指示を指定する。<br>
+robotsが取れる値は、index、follow、noindex、nofollow等である。<br>
   <syntaxhighlight lang="html">
   <meta name="robots" content="...">
+ </syntaxhighlight>
+<br>
+===== msnbot =====
+Bing専用の指示を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="msnbot" content="...">
+ </syntaxhighlight>
+<br>
+===== google =====
+Google向けの追加設定を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="google" content="...">
+ </syntaxhighlight>
+<br>
+===== googlebot =====
+Google専用の指示を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="googlebot" content="...">
+ </syntaxhighlight>
+<br>
+===== google-site-verification =====
+Googleの所有者確認を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="google-site-verification" content="...">
+ </syntaxhighlight>
+<br>
+===== slurp =====
+Yahoo!専用の指示を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="slurp" content="...">
+ </syntaxhighlight>
+<br>
+==== セキュリティ関連 ====
+metaタグのname属性で使用されるセキュリティ関連の予約語を、以下に示す。<br>
+<br>
+===== referrer =====
+リファラポリシーの設定を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="referrer" content="...">
+ </syntaxhighlight>
+<br>
+===== csrf-token =====
+CSRFトークンを指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="csrf-token" content="...">
+ </syntaxhighlight>
+<br>
+===== csrf-param =====
+CSRFパラメータを指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="csrf-param" content="...">
+ </syntaxhighlight>
+<br>
+==== SNS最適化 (OGP) 設定 ====
+metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。<br>
+<br>
+=====  =====
+Twitter Cardを指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="twitter:card" content="...">
+ </syntaxhighlight>
+<br>
+===== twitter:site =====
+Twitterアカウントを指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="twitter:site" content="...">
+ </syntaxhighlight>
+<br>
+===== twitter:creator =====
+作成者のTwitterを指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="twitter:creator" content="...">
   </syntaxhighlight>
 <br>