【HTML】metaタグとそれに関わる属性と属性値

16271 ワード
HTML meta 初心者 HTML テキストリンク

metaタグとは

webサイトの情報を記載するタグのこと。
metaタグを記載することで検索エンジンのクローラーやブラウザにwebサイトの情報を伝えることができる。
そのため、内部SEO対策として活用される。
基本的にwebサイトに表示されることはない。確認するにはHTMLソースを確認する必要がある。
（SEO対策についての記事も投稿しようと思う。）

基本的な書き方

headタグの中に記述する

＜meta 属性="属性値"＞

使用できる属性

各属性の説明と使用される属性値

charset

<meta charaset=utf-8>

文字コードの指定。文字化けを防ぐことができる。

日本語で記述するサイトであれば 「utf-8」 を書く必要がある。（「UTF-8」でもよい）

  • CESU-8, UTF-7, BOCU-1, SCSU　のエンコーディングではクロスサイトスクリプティング攻撃が実証 されているため、使用してはいけない。
  • UTF-32 はHTML5 のエンコーディングアルゴリズムで UTF-16 と区別できないものがあるため、使用してはいけない。

name

<meta name="属性値">

要素に名前を付与することでメタデータの種類を定義し、内容をcontent属性で表す。

🔻name属性で使用される主な属性値
　　content属性の属性値には文字列を記述する。

name属性値 役割
application-name 文書がWebアプリケーションを利用している場合、アプリケーション名を定義する。１つの文書には1つだけ記述できる。
author 文書の作者名を定義する。
description 文書の概要を記述する。検索エンジンのクローラーに読み取られ、検索結果などにも表示される情報。１つの文書に1つだけ記述できる。Firefox や Opera など一部のブラウザーは、ページをブックマークに追加した際の既定の説明文としても表示される。
generator 文書がソフトウェアによって記述・作成されている場合、ソフトウェア名を記述する。人の手によって作成された場合は記述する必要はない。
keywords 文書の内容を表すキーワードを記述する。content属性の値には、カンマ（,）区切りで複数のキーワードを入力できる。現在はSEO効果は期待できないため、記述していないサイトも多い。
viewport ブラウザーでのWebページの表示方法を制御できる。name="viewport"はiOSのSafariが実装した独自属性だったが、現在では多くのブラウザーが対応している。なお、Webページの表示に関わる内容であることから、今後はCSSの標準仕様となる予定で策定が進められている。SEO評価にも影響を及ぼすため、ビューポートタグは必ず記述するようすること。
referrer 文書からリクエストを送信するときのデフォルトのリファラーポリシー
theme-color ウェブページのテーマカラー
color-scheme 文書が対応するカラー・スキーマ（スキーマとは、データベースにどのような種類のデータをどのような構造で格納するか定義したもの）
robots 　検索エンジンのクローラーによるWebページのインデックスを拒否したり、Webページ内のリンク先を探索されないようにしたりできる。

http-equiv

<meta http-equiv="属性値">

プラグマディレクティブ（ブラウザなどのユーザーエージェントに対する文書の“状態・挙動”に関しての指示）を定義する。“HTTP equivalent(“HTTPと同等”)”でHTTPヘッダーで利用できる指示の一部が“meta”要素で指定できる。
※HTTPヘッダーとは、ホームページを表示する際にやり取りするデータの一部で付帯情報が書いてある部分

🔻http-equiv属性で使用される主な属性値

http-equiv属性値 役割
refresh content属性に正の整数が一つだけ含まれている場合、ページを再読み込みするまでの時間。content属性に正の整数とその後に文字列 ';url=' と有効な URL がある場合、別のページにリダイレクトするまでの秒数。
default-style デフォルトのスタイルシート（優先的に適用されるスタイルシート）を指定することができる。優先スタイルシートのセット名は contentコンテンツ属性に値をセットする。
content-security-policy ページ作者がページのコンテンツポリシーを定義できる。いくつかの例外を除き、ポリシーはサーバーオリジンやスクリプトのエンドポイントの指定に関与する。これは、クロスサイトスクリプティング攻撃の対策になる。（難しいのでまた後日勉強します）
　set-cookie HTTP のレスポンスヘッダーで、サーバーからユーザーエージェントへクッキーを送信するために使用され、ユーザーエージェントはそれを後でサーバーに送り返すことができる。

content

<meta content="属性値">

主に他の属性（「name属性」や「http-equiv属性」など）とセットで使われ、その属性の詳細内容を指定する。content属性の内容は、セットで使った属性により属性値が変わってくる。

meta要素に name属性, http-equiv属性,itemprop属性が指定された場合、content属性は必須。

🔻name = viewportを指定した際、主に使用されるcontent属性の値

content属性値 役割
initial-scale Webページが最初に読み込まれたときの拡大・縮小率を指定する。初期状態ではWebページを端末画面に合わせる。指定できる値の範囲はminimum-scale、およびmaximum-scaleの値の範囲となる。
width 表示する幅を200px～10000pxの数値で指定する。初期値は980px。「device-width」を指定することで、端末の画面の幅を指定できる。
height 表示する高さを223px～10000pxの数値で指定する。「device-height」を指定することで、端末の画面の高さを指定できる。
user-scalable 閲覧者にWebページの拡大・縮小を許可するかをyes、noで指定する。初期値はyesとなっており、拡大・縮小が可能。
minimum-scale 許可する拡大率の下限を0～10の数値で指定する。初期値は0.25。
maximum-scale 許可する拡大率の上限を0～10の数値で指定する。初期値は1.6。

　　　
　　
🔻name = referrerを指定した際、主に使用されるcontent属性の値

content属性値 役割
no-referrer HTTP の Referer ヘッダーを送信しない。
origin 文書のオリジン（ウェブコンテンツにアクセスするために使われる URL のスキーム (プロトコル)、 ホスト (ドメイン)、 ポート によって定義されるもの）を送信する。
no-referrer-when-downgrade 現在のページと同等の安全性の URL (https→https) にはリファラーとしてオリジンを送信するが、安全性が低い URL (https→http) には送信しない。これは既定の動作である。
origin-when-crossorigin 同一オリジンへのリクエストでは URL 全体（引数を除く）を送信するが、他の場合はオリジンのみ送信する。
same-origin 同一オリジンにはリファラーを送信するが、オリジン間リクエストにはリファラー情報を含めない。
strict-origin 安全性が同等とみられる宛先 (HTTPS->HTTPS) に対しては、リファラーとして文書のオリジンのみを送信すするが、安全性が劣る宛先 (HTTPS->HTTP) には送信しない。
strict-origin-when-cross-origin 文書と同一のオリジンへのリクエストを行う際には完全な URL を送信し、安全性が同等とみられる宛先 (HTTPS->HTTPS) に対しては、リファラーとして文書のオリジンのみを送信し、安全性が劣る宛先 (HTTPS->HTTP) にはヘッダーを送信しない。
unsafe-URL 同一オリジンおよびオリジン間のリクエストで URL 全体 (パラメーターは除く) を送信する。

※ここの属性値について理解が浅いのでもう少しきちんと勉強します。

　　　　
　　
🔻name = theme-colorを指定した際に使用されるcontent属性の値

content属性値 役割
有効な CSS の ＜color＞ ページや周囲のユーザーインターフェイスの表示をカスタマイズするために、ユーザーエージェントが使用する推奨される色を示す。

　　

🔻name = color-schemeを使用した際に使用されるcontent属性の値

content属性値 役割
normal 文書が色系統を意識しておらず、単に既定のカラーパレットを使用して描画される。
light 要素が明るいカラー・スキームに対応していることを示す。
dark 要素が暗いカラー・スキームに対応していることを示す。
only ユーザー・エージェントがカラー・スキームを上書きすることを禁止する。
dark light 文書で暗色モードを推奨しているが、明色モードでも機能する場合はこのようにする。

　　

🔻name = robotsを使用した際に使用されるディレクティブ

ディレクティブ 役割
all インデックスの登録や表示について、制限はない。このディレクティブは既定値であり、明示的に指定しても何も影響はない。
noindex ページのインデック作成を行わないことを robot に要求する。
nofollow ページ上のリンクをたどらないことを robot に要求する。
none noindex, nofollow と同義。
noarchive ページのコンテンツをキャッシュしないことを検索エンジンに要求する。
nosnippet このページの検索結果にテキストスニペットや動画プレビューを表示しない。
noimageindex このページの画像をインデックスに登録しない。
nocache noarchive と同義。
nositelinkssearchbox このページの検索結果にサイトリンク検索ボックスを表示しない。
indexifembedded noindex ディレクティブに関係なく、Google は、iframes または類似の HTML タグによって別のページに埋め込まれているページのコンテンツをインデックスに登録できる。indexifembedded は、noindex と併用されている場合にのみ効果がある。
notranslate 検索結果でこのページの翻訳を提供しない。このディレクティブが指定されていない場合、Google は検索クエリとは異なる言語の検索結果のタイトルリンクとスニペットを翻訳して表示します。ユーザーが翻訳されたタイトルリンクをクリックすると、それ以降、そのページに対するユーザー操作はすべて Google 翻訳を介して行われ、リンク先を表示する際も自動的に翻訳される。

他に　max-snippet: [number]、max-image-preview: [setting]、max-video-preview: [number]、unavailable_after: [date/time]　などがある。

X-Robots-Tagでも上記のディレクティブを使用することができる。
※robotsタグとの違いについてはまだ理解できていないので、今後勉強していく。

property

<meta property="属性値">

SNSでシェアされたときに表示するサイト情報を指定できる。
主にOGP（Open Graph Protocol）設定と言われ、FacebookなどSNSの共有（シェア）効果を高めるために指定する。SNSでの集客に役立つ。（SNSマーケティング）

ページでOGPを使用することを宣言するため、head要素にprefix属性を追加する。
TOPページであれば「website」、TOP以外のページでは「article」を入力する。

🔻property属性で使用される主な属性値

属性値 役割
og:url OGPを設定するWEBページのURLを指定する。URLは相対パスではなく絶対パスでの記述をする。
og:type ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってくる。TOPページの場合は「website」、WEBサイト上の記事ページなど、TOPページ以外には「article」を指定する。
og:title ページのtitleを指定する。一般的にはサイトの~と同じ内容を設定しますが、サイト名などのブランド情報を含まないtitleを20文字以内で設定することが好ましいとされている。
og:description ページの説明文を指定する。と同様の内容で記述することが多いが、「og:description」での文字数は80~90文字が最適とされている。の文字数は120文字程度なので、内容をそのままを設定してしまうと表示された際に文字が切れてしまう可能性があるため、OGP用に文章を簡略化するとシェアされた際にユーザーに伝わりやすくなる。
og:site_name ページのサイト名を記述する。サイト名やブランド情報は「og:title」ではなく、この「og:site_neme」に設定する。
og:image SNS上でシェアされた際に表示させたい画像を絶対パスで指定する。Facebookでは画像サイズを1200×630p、比率で「1.91：1」を推奨している。

Facebookでシェアする際、上記で説明した基本設定にプラスして 「fb:app_id」 を設定することができる。
サイトやブログの管理者をFacebookに伝えるためのタグ。また、いいねの数やどれくらいの人が見てくれたのか、どの時間帯がユーザーの目にとまりやすいかなど、Facebookからサイトへのトラフィック分析ができるFacebookインサイトを利用できるようになります。

Twitterでシェアする際、「Twitte:card」 と 「twitter:site」 を設定します。
・Twitte:card
Twitter上での表示タイプを指定するタグ。
カードの種類はブログやwebサイト用、アプリ配布用、動画サイト用と全部で4種類あり、それぞれ見せ方が変わってくる。
Summary Card：タイトル、説明、およびサムネイル。
Summary with Large Image：summary cardと同じ形ですが、画像の大きさが大きいものになります。
App Card：アプリ配布用の表示カード。
Player Card：ビデオ/オーディオ/メディアを表示できるカード。

・twitter:site
@から始まる、Twitterのアカウント名を入力する。

OGP設定をする時は、ページごとに設定することに気をつける。また、サイトによってはOGP設定ができないため注意が必要。

グローバル属性

（後日投稿します）

参考サイト

他にもいくつかありますが、メインで参考にさせてもらったサイトです。

最後に

プログラミングについて勉強を始めたばかりで至らない点が数多くございます。
間違っている点がございましたら、ご指摘の方よろしくお願いします。
今後も学んだことをアウトプットすべく投稿していこうと思いますので、温かい目で見守っていただけると幸いです。