Help us understand the problem. What is going on with this article?

色々ある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}">
tsuka-rinorino
Vue.jsエンジニア。みんなキライなCSSが大スキです。CSS歴18年。ストックついでに「いいね」してもらえると嬉しいです。
https://sora-maru.io
onecareer
ワンランク上のキャリアを目指す学生のための新卒採用サービスONE CAREERの開発・運営会社
https://www.onecareer.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした