【HTML】metaタグへの理解を深める
本記事の目的
この記事は、今まで何気なしに使っていた metaタグについて理解を深めることを目的にしています。そのため、以下２つの疑問を解消します。
- そもそも metaタグとは何か？
- metaタグの種類とは？
結論
- metaタグとは、サイトについての情報を設定する方法の１つ
- metaタグの種類は、大きく分けて６つあり、それぞれに様々な値が設定されている
そもそも metaタグ とは何か？
metaタグは、<head>内で、サイトについての情報を設定する方法の１つです。
- <head>：検索エンジンやブラウザに対して Webサイトに関する情報を伝えるためのタグ
metaタグのように、Webサイトに関する情報を設定する方法はいくつかあります。例えば、
- <base>
- <link>
- <script>
- <style>
- <title>
が挙げられます。
metaタグは、上記のタグでは設定できない情報を設定するタグになります。
metaタグを使用する理由
metaタグを使用する理由は、以下の２つです。
- SEO対策
- UI対策
まず、SEO対策になる理由は、検索エンジンのクローラーが理解しやすくなるからです。
一般的に、記事が検索結果の上位に表示されるには、Googleなどの検索エンジンからの評価が高くなければなりません。
<head>を設定することで、サイトについての情報が明示的になります。
これにより、クローラーが内容を認識しやすくなり、結果、検索エンジンからの評価が高くなる可能性があります。
他にも、低品質な記事をインデックスさせない設定をすることで、サイト全体の評価を下げないことも関係します。
次に、UI対策になる理由は、
- レスポンシブの設定
- 勝手なリンク表示の防止
- SNSでのシェア設定
が可能という点です。
metaタグでは、ページを表示するときの大きさを指定できます。これによりレスポンシブなデザインを作れます。
また、スマホの場合、電話番号のような数字があると、リンク表示なってしまい、クリックすると勝手に電話されしまうことがあります。他にもメールアドレスでのリンク表示も起こります。この防止ができます。
さらに、SNSでシェアされた際のタイトルや説明文、URL、画像等の設定が可能で、ページの内容を正しく伝えることが可能です。
以上のSEO対策とUI対策が metaタグを使用する理由になります。
metaタグの属性と使い道
metaタグには、６つのグローバル属性があります。
- name
- http-equiv
- content
- charset
- media
- property (HTML Standard では定義されていないが、よく使用される)
name
メタデータの名前を指定する属性です。
以下は、nameに付けられる標準の値です。
- application-name：Webアプリケーションの名前、アプリ以外なら指定しない
- author：作者名
- description：ページの説明文
- generator：作成に使用したソフトウェアパッケージの識別名、無いなら指定しない
- keywords：文書に関連するキーワード、検索エンジンからの信頼性が低い
- referrer：リクエストを送信するときのデフォルトのリファラポリシーを設定
- theme-color：ページのテーマカラーを設定
- color-scheme：ページの明るさや暗さを設定 (この記事が分かりやすい)
以下は、標準外ですが、よく使われる値です。
- viewport：ビューポートの設定、レスポンシブ対応で使用
- format-detection：電話番号・メアドなどがリンクされるのを防止
- robots：検索クローラーへの指示、スクレイピング防止などでも使用
- google：検索結果で表示された場合の設定
- googlebot：Googleの検索クローラーへの指示
http-equiv
プラグマディレクティブを定義する属性と言われるのが一般的です。
プラグマディレクティブとは、HTTPを解釈するプログラム(ユーザーエージェント)に対して挙動や状態を指示することです。
つまり、ユーザーエージェントへの設定を行う属性です。
以下は、http-equivに付けられる標準の値です。
- content-language：デフォルトの記述言語を設定。非推奨、html要素のlang属性に指定する
- content-type：文字エンコーディングの設定、現在はcharsetを使用する
- default-style：link要素で与えられた代替えスタイルシートからデフォルトシートを設定
- refresh：ページの再読み込み、リダイレクトするまでの秒数を設定
- set-cookie：cookieの設定をする、非推奨であり、現在は使えない
- x-ua-compatible：IEがページを仕様通りに表示する設定、非推奨
-
content-security-policy：コンテンツセキュリティポリシーの設定
- クロスサイトスクリプティングやクリックジャッキングなどの攻撃回避
以下は、標準外の値です。
- Expires：キャッシュの有効期限を設定
- Cache-Control：キャッシュの制御設定
content
メタデータの値を設定する属性です。
他のグローバル属性で設定した値の内容を指定します。
例えば、
<!-- テーマカラーの設定 -->
<meta name="theme-color" content="#fff">
というような具合です。
charset
文字コードを設定する属性です。標準では、UTF-8 の指定だけです。
Shift_JIS、EUC-JPなどは非標準の指定になっており、指定した場合、予期しないエラーが発生する恐れがあります。
この属性は、HTML文書の先頭 1024バイト以内に記述する必要があります。
また、iframe要素のsrcdoc属性に記述された文書である場合は、指定してはいけません。
<meta charset="UTF-8">
media
メタデータがどのメディアに適用されるかを設定する属性です。
name=”theme-color” の場合だけ使用できます。
<meta name="theme-color" content="#fff" media="screen and (max-width: 767px)">
<meta name="theme-color" content="#293133" media="(prefers-color-scheme: dark)">
上記のように、CSSのメディアクエリと同じような方法で設定できます。
property
OGPを設定する属性です。
以下は、基本的な値です。
- og:title：タイトルを設定
- og:type：種別を設定、website や article など
- og:image：イメージファイルの URL を設定
- og:url：サイトの URL を設定
- og:audio：関連するオーディオファイルの URL を設定
- og:description：サイトの概略を設定
- og:locale：言語を設定、デフォルトは en_US 、日本語の場合は ja_JP を設定します
- og:site_name：サイト名を設定
FaceBookでの値
- fb:app_id：Facebook Application IDを設定、facebookでアクセス解析が可能になる
Twiiterでの値
- twitter:card：カードの種類を設定
- twitter:site： Twitterユーザ名 @username を設定
- twitter:title：タイトルを設定
- twitter:description：説明文を設定
- twitter:image：画像の URL を設定
- twitter:image:alt：画像の説明(alt属性)を設定
結論
- metaタグとは、サイトについての情報を設定する方法の１つ
- metaタグの種類は、大きく分けて６つあり、それぞれに様々な値が設定されている
値が多く、推奨・非推奨も混じっているため、調べながら使用するのが良さそうです。
参考資料
Discussion