こんにちは、エリカです。
Web サイトに必ず入れる「お約束」のひとつに<head>というものがあります。「 TDK 」（タイトル、ディスクリプション、キーワード）なんかもそのひとつですね。
……って必要なのは分かっているんですけれど、つい昔作ったテンプレートのコピーになっていて、気づけば「長らくアップデートしてない……」ってことありませんか？
わたし自身、しばらくを見直す機会を持っていなかったので、今回あらためて調べてみました。
有名サイトの「meta」「OGP」「favicon」
誰もが知る有名サイトではどのようなが使われているのか、について調べてみました（ 2017 年 6 月時点）。日本語で HTML5 のサイトであることに限定しています。固有の ID や URL の部分は省略しました。
Google.co.jp
<!DOCTYPE html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta content="世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。" name="description">
<meta content="noodp" name="robots">
<meta content="xxx.png" itemprop="image">
<link href="xxx.ico" rel="shortcut icon">
<meta content="origin" id="mref" name="referrer">
<title>Google</title>
</head>Google は非常にシンプルでした！ タグと言えば一般的に、name → content のように content 要素を後に書くものですが、content が必ず先に書かれているのが特徴的です。「検索させたい」「重要な情報はより前に書く」という強いポリシーを感じます。
Amazon.co.jp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel='dns-prefetch' href='xxx'>
<title>Amazon | 本, ファッション, 家電から食品まで | アマゾン</title>
<meta name="description" content="Amazon.co.jp 公式サイト。お急ぎ便ご利用で当日・翌日にお届け。アマゾンで本, 日用品, ファッション, 食品, ベビー用品, カー用品ほか一億種の商品をいつでもお安く。通常配送無料(一部を除く)">
<meta name="keywords" content="Amazon,アマゾン,通販,インターネットショッピング">
<meta name="google" content="nositelinkssearchbox">
<meta name="google-site-verification" content="xxx">
<link rel="canonical" href="https://www.amazon.co.jp/">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta property="fb:app_id" content="xxx">
<meta name="twitter:card" value="summary">
<meta name="twitter:site:id" value="xxx">
<meta property="og:description" content="Amazon.co.jp 公式サイト。お急ぎ便ご利用で当日・翌日にお届け。アマゾンで本, 日用品, ファッション, 食品, ベビー用品, カー用品ほか一億種の商品をいつでもお安く。通常配送無料(一部を除く)" xmlns:og="http://opengraphprotocol.org/schema/">
<meta name="baidu-site-verification" content="xxx" />
</head>Amazon のはほとんどのサイトにも当てはまる情報に絞られていて、非常に参考になります。SNS 関係の記述も必要十分だと思います。 強いて言うなら favicon 系の設定を省略していますが、ディレクトリ直下に favicon.ico があれば自動的に認識されるので、これも十分です。apple-touch-icon はスマホデバイスでアクセスしたときだけ出力しているようです。
Youtube.com
<!DOCTYPE html>
<html lang="ja" data-cast-api-enabled="true">
<head>
<title>YouTube</title>
<link rel="canonical" href="https://www.youtube.com/">
<link rel="alternate" media="handheld" href="https://m.youtube.com/">
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.youtube.com/">
<meta name="description" content="YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。">
<meta name="keywords" content="動画,ビデオ,共有,カメラ付き携帯電話,動画機能付き携帯電話,無料,アップロード,チャンネル,コミュニティ,YouTube,ユーチューブ">
<link rel="manifest" href="/manifest.json">
<link rel="search" type="application/opensearchdescription+xml" href="https://www.youtube.com/opensearch?locale=ja_JP" title="YouTube 動画検索">
<link rel="shortcut icon" href="xxx.ico" type="image/x-icon">
<link rel="icon" href="xxx.png" sizes="32x32">
<link rel="icon" href="xxx.png" sizes="48x48">
<link rel="icon" href="xxx.png" sizes="96x96">
<link rel="icon" href="xxx.png" sizes="144x144">
<meta name="theme-color" content="#e62117">
<meta property="og:image" content="xxx.png">
<meta property="fb:app_id" content="xxx">
<link rel="publisher" href="https://xxx">
<link rel="alternate" href="android-app://xxx/">
<link rel="alternate" href="ios-app://xxx/">
</head>YouTube は favicon 系の設定が充実していました。favicon って意外とブラウザのいろいろなところにいろいろなサイズで表示されているんですよね。1 サイズあればとりあえず表示されますが、一番綺麗に表示しようと思ったら、複数サイズを用意する方がベターです。
わたしは早く favicon も SVG 対応して、サイズに関係無くなる未来を信じてます……！
まとめ
以上の調査から、私なりに必要十分かなと思う項目をまとめましたので、ぜひご利用いただければ幸いです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<meta name="description" content="ページの説明">
<link rel="canonical" href="https://">
<meta property="fb:app_id" content="xxx">
<meta name="twitter:card" value="summary">
<meta name="twitter:site:id" value="xxx">
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:url" content="https://">
<meta property="og:locale" content="ja_JP">
<meta property="og:image" content="logo.png">
<meta property="og:type" content="website">
<meta property="og:site_name" content="サイト名">
<meta property=”article:publisher” content=”https://www.facebook.com/Facebookページネーム” />
</head>
- 参考サイト
- MDN＞開発者向けのWeb技術＞HTML＞HTML 要素リファレンス＞meta 要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
