HTML

色々あるHTMLのmetaタグなど一覧

metaタグなどheadに入れるようなものを見直そうと調べていたら、見たことが無いものが結構あったのでまとめてみました。
順番はぐちゃぐちゃで見づらくてスイマセン。
XML形式で記載する際は/>で閉じてください。

私の雛形(面倒を惜しまないとき用)

<!doctype html>
<html lang="ja" dir="ltr">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta charset="utf-8">
<title>タイトル</title>
<link rel="stylesheet" href="/css/style.css">
<!-- safari -->
<link rel="mask-icon" color="{{ カラーコード }}" href="/mask-icon.svg">
<!-- 一般的なタグ -->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="description" content="{{ 説明文 }}">
<meta name="keywords" content="{{ キーワード,キーワード }}">
<!-- 設定 -->
<meta name="format-detection" content="telephone=no,email=no,address=no">
<!-- SNS向け -->
<meta property="og:type" content="website">
<meta property="og:title" content="{{ タイトル }}">
<meta property="og:description" content="{{ 説明文 }}">
<meta property="og:url" content="{{ ページURL }}">
<meta property="og:image" content="{{ 絶対パス }}/img/ogp.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@{{ twitter id }}">
<meta name="twitter:creator" content="@{{ twitter id }}">
<!-- アイコン関係 -->
<link rel="icon" type="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="{size}" href="/img/common/apple-touch-icon.png">
<!-- Windows -->
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- Android -->
<meta name="theme-color" content="{{ color }}">
<link rel="canonical" href="{{ url }}">
</head>
<body>

なくても動くけどFacebookでfb:app_idが無いと怒られるよ。
必要なら発行して追記しましょう。

<script src="js/app.js"></script>
</body>
</html>

言語の指定

<html lang="{lang}">
<meta http-equiv="Content-Language" content="{lang}">
sample
<html lang="ja">
<meta http-equiv="content-language" content="ja">

OGP使用の宣言

<html prefix="{val}">
<head prefix="{val}">
sample
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
</head>

OGPを利用する際に宣言として記述が必要です。

文字コードの指定

<meta charset="{code}">
<meta http-equiv="Content-Type" content="{code}">
sample
<meta charset="utf-8">

ファイルが何の文字コードで書かれているか指定します。

互換モードの指定

<meta http-equiv="X-UA-Compatible" content="{val}">
sample
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

互換モードが利用できる場合適用されます。

リダイレクト

<meta http-equiv=”refresh” content=”{time};URL='{url}'”>
sample
<meta http-equiv=”refresh” content=”0;URL='http://redirect.example'”>

リダイレクトまでの時間、リダイレクト先を指定できます。
(普通はクライアントサイドではなく、サーバー側で行うので使いません。)

ページタイトル

<title>{val}</title>
sample
<title>metaタグについて</title>

ページのキーワードを指定

<meta name="keywords" content="{val}">
sample
<meta name="keywords" content="HTML,meta,Web,tag,サイト,">

主に検索ロボット向けにキーワード提示します。

ページの説明を指定

<meta name="description" content="{val}">
sample
<meta name="description" content="htmlのheadタグ内に記述されているものをまとめています。">

主に検索エンジンの表示結果に利用されます。

著作権者を記述

<meta name="author" content="{val}">
<meta name="copyright" content="{val}">
sample
<meta name="author" content="© 2018 Rino Tsuka">

連絡先を記述

<meta name="reply-to" content="{email}">
sample
<meta name="reply-to" content="email@example.com">

スパムに利用されるので記述しないこと!

作成・更新日時の指定

<meta name="date" content="{date}">
sample
<meta name="date" content="2018-04-27T02:34:56+09:00">

作成日・更新日を記載できるが、メリットはない。

作成日時の指定

<meta name="creation_date" content="{date}">
sample
<meta name="creation_date" content="2018-04-26T01:23:45+09:00">

URLの正規化

<link rel="canonical" href="{url}">
sample
<link rel="canonical" href="http://example.com/test">

PCとスマホでレイアウトを分けている場合にオリジナルのURLを記載したり、ソースコード丸パクのサイト対策など用途は色々。
忘れがちだが記載したほうが良い。

代替えURLの指定

<link rel="alternate" href="{url}">
sample
<link rel="alternate" hreflang="en" href="http://en.example.com/test">
<link rel="alternate" media="only screen and (max-width: 543px)" href="http://sp.example.com/test">

「英語サイト、スマホ用のページはこっちだよ」と指定できる。

OGPの指定

<meta property="og:{attr}" content="{val}">
sample
<meta property="og:title" content="metaタグについて">

大体SNSでシェアされたとき用に記述する。

Facebook用OGPの指定

<meta property="fb:{attr}" content="{val}">
sample
<meta property="fb:app_id" content="0123456789">

Twitter用OGPの指定

<meta name="twitter:{atter}" content="{val}">
sample
<meta name="twitter:card" content="summary_large_image">

タッチアイコンの指定

<link rel="apple-touch-icon" sizes="{size}" href="{url}">
sample
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

スマホでホーム画面にショートカットを作成されたときのアイコン。
サイトルートにapple-touch-icon.pngを置くとmetaタグがなくても自動で適用してくれる(端末がある)。

ファビコンの指定

<link rel="icon" type="{type}" sizes="{size}" href="{url}">
<link rel="shortcut icon" href="{url}">
sample
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="shortcut icon" href="/favicon.ico">

ブックマークなどに追加された際に表示されるちっこいアイコン。
サイトルートにfavicon.icoを置くとmetaタグがなくても自動で適用してくれる。

Windowsピン留め画像の情報ファイル

<meta name="msapplication-config" content="{url}">
sample
<meta name="msapplication-config" content="none">
<meta name="msapplication-config" content="/browserconfig.xml">

Windows8,10のスタートにピン留めされたときのアイコンをまとめて指定できる。
参考:「browserconfig.xml」とは何ぞや?|マコトのおもちゃ箱 ~ぼへぼへ自営業者の技術メモ~

Windowsピン留め画像

<meta name="msapplication-TileImage" content="{url}">
sample
<meta name="msapplication-TileImage" content="/img/pin-144x144.png"/>

参考:Windows 8 のピン留めサイトの高画質なビジュアル

Windowsピン留め画像の背景色

<meta name="msapplication-TileColor" content="{val}">
sample
<meta name="msapplication-TileColor" content="#ee82ee">

ウェブアプリマニュフェストの指定

<link rel="manifest" href="{url}">
sample
<link rel="manifest" href="/manifest.json">

PWA(プログレッシブウェブアプリ)には必須。
参考:ウェブアプリ マニフェスト

ウェブアプリケーションとしての名前

<meta name="application-name" content="{val}">
sample
<meta name="application-name" content="meta一覧アプリ">

マスクアイコンの指定

<link rel="mask-icon" color="{color}" href="{url}">
sample
<link rel="mask-icon" color="#ee82ee" href="/mask-icon.svg">

safariでページがピンされたときに表示されるアイコン。
画像ファイルはSVGのみ。
参考:新しいブックマークのカタチ?Safariのページピンアイコンの実装方法。

Chrome for Androidのタブの色指定

<meta name="theme-color" content="{color}">
sample
<meta name="theme-color" content="#ee82ee">

参考:theme-color を使って Chrome for Android や Google アプリで独自の色を設定する

Google Bot用の指定

<meta name="googlebot" content="{val}">
<meta name="google" content="{val}">
sample
<meta name="googlebot" content="noindex">
<meta name="google" content="nositelinkssearchbox">

参考:Google がサポートしているメタタグ

Search Consoleの所有者確認用コード

<meta name="google-site-verification" content="{val}">

Baiduウェブマスターツールの確認コード

<meta name="baidu-site-verification" content="{val}">

中国のサイトらしい。調べてたら見つけたので一応。

検索ロボットへのインデックスの指定

<meta name="robots" content="{val}">
sample
<meta name="robots" content="nofollow">

CSSの指定

<link rel="stylesheet" href="{val}">
sample
<link rel="stylesheet" href="css/style.css">

ビューポートの指定

<meta name="viewport" content="{val}">
sample
<meta name="viewport" content="width=device-width,initial-scale=1">

もう逃げない。HTMLのviewportをちゃんと理解する

電話番号などの自動リンク機能の制御

<meta name="format-detection" content="{val}">
sample
<meta name="format-detection" content="telephone=no,email=no,address=no">

スマホで電話番号、住所、メールアドレスが自動でリンクに変換するか否かを指定できる。

CSRF対策用トークン

<meta name="csrf-param" content="{val}">
<meta name="csrf-token" content="{val}">