基本的なメタデータの書き方。
meta
metaタグには次の3パターンある。
文字コード定義
<meta charset="UTF-8">
メタデータ定義
<meta name="" content="">
<meta property="" content="">
このうち今回はメタデータ定義のみ対象とする。
メタデータ定義
name属性値 |
説明 |
|---|---|
application-name |
WEBアプリ名 |
author |
著者名 |
description |
コンテンツ説明文 |
generator |
このページを生成したツール名 |
keywords |
関連する語（カンマ区切り） |
referrer |
HTTPヘッダのreferrerに付与する値 |
theme-color |
UIの色 |
color-scheme |
明暗モード |
creator |
製作者名 |
googlebot |
robotsと同義（Googleクローラ用） |
publisher |
発行者名 |
slurp |
robotsと同義（Yahooクローラ用） |
viewport |
表示領域Viewportの初期値 |
これらは以下3つの系統に分類できる。
- 基礎系
- クローラ系
- 表示系
基礎系
name属性値 |
説明 |
|---|---|
application-name |
WEBアプリ名 |
author |
著者名 |
description |
コンテンツ説明文 |
generator |
このページを生成したツール名 |
keywords |
関連する語（カンマ区切り） |
creator |
製作者名 |
publisher |
発行者名 |
application-name
アプリ名。application-nameはPWAのときのみ指定する。それ以外のときに定義すべきではない、らしい。
PWAはいわゆるWEBアプリのこと。実装するためにはJavaScriptの知識が必須のため、今はまだ放置する。
<meta name="application-name" content="アプリ名">
author,creator,publisher
著者名。書いておけばGoogle検索結果され、ない。Google がサポートしているメタタグの中には書いてなかった。
でも、SNSで記事URLを貼り付けたときに表示されるかもしれない。
たぶん対応はマチマチ。書かないよりは書いたほうがマシという感じか。
「このHTMLはワシが書いた！」という自己顕示欲を満たしたいとき、何の意味も価値もないことを理解した上で書くとよい。なにがよいのかわからないが、これは人の慣習である。持ち物に自分の名前を書いた小学生時代の気持ちになってマークアップするタグなのだと思う。
name属性値 |
説明 |
|---|---|
author |
著者名 |
creator |
製作者名 |
publisher |
発行者名 |
個人サイトならauthorだけ書いておけばいいと思う。あとは例えば、イラストを依頼した人がいたならcreatorに書く。creatorが複数人いればタグを複数つくって一人ひとり書く。publisherは出版社名などを書くのか？ よくわからん。
<meta name="author" content="著者名">
<meta name="creator" content="製作者名A"> <meta name="creator" content="製作者名B">
<meta name="publisher" content="発行者名">
description
サイトやアプリの説明文である。基礎系でもっとも重要と思われる。
Google がサポートしているメタタグの中にある。Google検索結果では80字まで表示され、それ以降は…で省略される。
<meta name="description" content="サイト説明文">
generator, keywords
name属性値 |
説明 |
|---|---|
keywords |
関連する語（カンマ区切り） |
generator |
このページを生成したツール名 |
keywordsは遥か昔、Googleクローラがインデックスにもちいていた。しかし現代ではまったく使用されない役立たず。せいぜいHTMLコードをみて「あ、そういう系ね」と思わせるくらいの効果しかない。
<meta name="keywords" content="web,site,関連,キーワード">
generatorに至っては誰が何の目的で使うのか謎。ツールなんて使ってねーよ！ とか、ツール多すぎて書ききれねーよ！ とか、書いたところで誰が喜ぶんだよ！ とか。
<meta name="generator" content="このページを生成したツール名">
クローラ系
気にしなくていい。
name属性値 |
説明 |
|---|---|
referrer |
HTTPヘッダのreferrerに付与する値 |
googlebot |
robotsと同義（Googleクローラ用） |
slurp |
robotsと同義（Yahooクローラ用） |
Googleなどのサーチエンジンがどのようにインデックスするかを指示する。ほとんどの場合、気にする必要がない。よしなにやってくれる。それより有益なコンテンツをつくるほうが大事。
表示系
name属性値 |
説明 |
|---|---|
theme-color |
UIの色 |
color-scheme |
明暗モード |
viewport |
表示領域Viewportの初期値 |
theme-color
<meta name="theme-color" content="#FFFF00">
UIの色をセットする。さして重要ではない。
color-scheme
サイトがライト／ダークモードとして表示するCSSを用意しているかどうか。
content属性値 |
説明 |
|---|---|
normal |
ライト／ダークモードを意識していない。 |
light |
ライトモード優先 |
dark |
ダークモード優先 |
light dark |
ライトモード優先。ダークモードも対応。 |
dark light |
ダークモード優先。ライトモードも対応。 |
<meta name="color-scheme" content="normal"> <meta name="color-scheme" content="light"> <meta name="color-scheme" content="dark"> <meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="dark light">
これを実装するにはCSSのメディアクエリprefers-color-schemeを使用する必要がある。ここでは割愛する。
viewport
ビューポートの初期値を決める。大抵は以下。
等倍
<meta name="viewport" content="width=device-width, initial-scale=1">
ユーザによる拡大縮小禁止
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
けれど拡大縮小を禁止したらユーザビリティに問題ありだとかで、結局、拡大禁止にできなかったりする。
でもアプリではサイズ計算された適正値を表示しているので、勝手に拡大縮小されるとひどい表示になってしまうことがある。困ったね。レスポンシブを考えると頭が痛くなるので割愛。
Google がサポートしているメタタグ
世界一のサーチエンジンGoogle がサポートしているメタタグについて。
name属性値 |
説明 |
|---|---|
description |
サイト説明文。検索結果に表示される |
viewport |
モバイルでの表示方法定義。これによりモバイル対応しているか判断する |
robots |
クロールとインデックス登録の動作を制御する |
以下はGoogle独自の値。
name属性値 |
content属性値 |
説明 |
|---|---|---|
rating |
adult |
アダルトコンテンツであることを示す。セーフサーチの結果から外す。 |
rating |
RTA-5042-1996-1400-1577-RTA |
アダルトコンテンツであることを示す。セーフサーチの結果から外す。 |
google |
nositelinkssearchbox |
サイトリンク検索ボックスを表示しない |
googlebot |
notranslate |
自動翻訳を禁止する |
google |
nopagereadaloud |
Google テキスト読み上げサービスが読み上げないようにする |
google-site-verification |
... |
Search Console で所有権を確認できる |
http-equiv属性値 |
content属性値 |
説明 |
|---|---|---|
Content-Type |
... |
コンテンツの型を定義する |
refresh |
...;url=... |
非推奨。サーバーサイドの 301 リダイレクト使用を勧める。 |
Content-Typeっていらないのでは？ text/html以外ありえないと思うのだが。
descriptionだけ気にしていればいいと思う。あと<time>も表示されるんじゃないの？ たまに検索結果で日付や著者名が表示されていたりするのは何？ shcema.orgかな？ shcema.orgもメタデータだが、これも後回し。
所感
後回しにしたの多すぎる。だってとんでもない量なんだもの。
- CSS
- メディアクエリ
- レスポンシブ・デザイン
- JavaScript
- OpenGraph
- schema.org
あと、メタデータではないけれど、以下のような概念もある。
- PWA：WEBアプリ
- WebStory：スマホ用スライド
その前にHTML学習がまだまだ終わらない。以下を先にやらないと。
- メタデータ
<form><canvas><math><svg>rel属性（<a>,<link>,<form>）
大変すぎる。だれだよHTML簡単とか言ったやつ。
