Edited at

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

More than 1 year has passed since last update.

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}">