HTMLのheadの書き方、head内に記述する要素の総まとめ
Post on:2018年9月26日
sponsors
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
去年紹介した以前の版からいろいろと変更されています。
head内に記述する最小限の構成
下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。
|
1 2 3 4 5 |
<meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 上記の3つのメタタグは最初に記述しなければなりません。他のタグはこれらの後に記述します --> <title>ページのタイトル</title> |
head内の要素
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- ページのタイトル --> <title>ページのタイトル</title> <!-- ドキュメント内に含まれるすべての相対URLに使用するベースURL --> <base href="https://example.com/page.html"> <!-- 外部スタイルシートへのリンク --> <link rel="stylesheet" href="styles.css"> <!-- ドキュメント内のスタイルシート --> <style> /* ... */ </style> <!-- JavaScript --> <script src="script.js"></script> <noscript><!-- JavaScript無しの代替 --></noscript> |
meta要素
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<meta charset="utf-8"> <!-- ドキュメントの文字エンコーディングを設定 --> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 上記の3つのメタタグは最初に記述しなければなりません。他のタグはこれらの後に記述します --> <!-- リソースのロード元を制御 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> <!-- 可能な限り、ドキュメントの上に記述 --> <!-- このタグの下のコンテンツにのみ適用されます --> <!-- Webアプリケーションの名前（Webアプリの場合のみ必要） --> <meta name="application-name" content="Application Name"> <!-- ページの簡単な説明（最大150文字） --> <!-- この説明は検索結果に表示されるスニペットの一部として使用されることがあります --> <meta name="description" content="ページの説明"> <!-- 検索エンジンのクロールとインデックスを制御 --> <meta name="robots" content="index,follow"><!-- すべての検索エンジン用 --> <meta name="googlebot" content="index,follow"><!-- Google用 --> <!-- Googleにサイトリンクの検索ボックスを表示しないように指示 --> <meta name="google" content="nositelinkssearchbox"> <!-- Googleにこのページの翻訳を提供しないように指示 --> <meta name="google" content="notranslate"> <!-- Google Search Consoleの所有権を証明 --> <meta name="google-site-verification" content="verification_token"> <!-- Yandex Webマスターのオーナーを証明 --> <meta name="yandex-verification" content="verification_token"> <!-- Bing Webmaster Centerの所有権を証明 --> <meta name="msvalidate.01" content="verification_token"> <!-- Alexa Consoleの所有権を証明 --> <meta name="alexaVerifyID" content="verification_token"> <!-- Pinterest Consoleの所有権を証明--> <meta name="p:domain_verify" content="code from pinterest"> <!-- Norton Safe Webの所有権を証明 --> <meta name="norton-safeweb-site-verification" content="norton code"> <!-- Webサイトを構築するために使用されたソフトウェア（WordPress、Dreamweaverなど） --> <meta name="generator" content="program"> <!-- サイトの主題の簡単な説明 --> <meta name="subject" content="サイトの主題"> <!-- サイトのコンテンツに基づいた一般的な年齢評価 --> <meta name="rating" content="General"> <!-- 参照元情報の受け渡し方法を制御 --> <meta name="referrer" content="no-referrer"> <!-- 連続した数字があると誤認識してしまうので、電話番号の自動リンク機能は停止 --> <meta name="format-detection" content="telephone=no"> <!-- DNSプリフェッチをオフ（off）に設定して完全にオプトアウトします --> <meta http-equiv="x-dns-prefetch-control" content="off"> <!-- クライアント識別のためにブラウザにCookieを保存します --> <meta http-equiv="set-cookie" content="name=value; expires=date; path=url"> <!-- 特定のフレームに表示するページを指定します --> <meta http-equiv="Window-Target" content="_value"> <!-- Geoタグ --> <meta name="ICBM" content="latitude, longitude"> <meta name="geo.position" content="latitude;longitude"> <meta name="geo.region" content="country[-state]"><!-- カントリーコード (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; 例: content="US" / content="US-NY" --> <meta name="geo.placename" content="city/town"><!-- 例: content="New York City" --> |
- Meta tags that Google understands
- WHATWG Wiki: MetaExtensions
- ICBM on Wikipedia
- Geotagging on Wikipedia
link要素
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!-- 外部スタイルシートへのリンク --> <link rel="stylesheet" href="https://example.com/styles.css"> <!-- コンテンツの重複を防ぐ --> <link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"> <!-- 以前はアイコンリンクの前にインクルードされていましたが、廃止されて使用されなくなりました --> <link rel="shortlink" href="https://example.com/?p=42"> <!-- 現在のドキュメントのAMP HTMLバージョンへのリンク --> <link rel="amphtml" href="https://example.com/path/to/amp-version.html"> <!-- JSONファイルへのリンク --> <link rel="manifest" href="manifest.json"> <!-- ドキュメントの著者へのリンク --> <link rel="author" href="humans.txt"> <!-- リンクのコンテキストに適用される著作権へのリンク --> <link rel="license" href="copyright.html"> <!-- ドキュメント内で別の言語を使用されている可能性があるリンク --> <link rel="alternate" href="https://es.example.com/" hreflang="es"> <!-- 著者や他の人に関する情報 --> <link rel="me" href="https://google.com/profiles/thenextweb" type="text/html"> <link rel="me" href="mailto:name@example.com"> <link rel="me" href="sms:+15035550125"> <!-- 記録、文書、または歴史的関心のあるその他の資料のコレクションを記述した文書へのリンク --> <link rel="archives" href="https://example.com/archives/"> <!-- 階層構造のトップレベルリソースへのリンク --> <link rel="index" href="https://example.com/"> <!-- 自身を参照 - ドキュメントに複数の参照がある場合に便利 --> <link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3"> <!-- 一連のドキュメント内の最初のドキュメント、次のドキュメント、前のドキュメント、最後のドキュメント --> <link rel="first" href="https://example.com/atomFeed.php"> <link rel="next" href="https://example.com/atomFeed.php?page=4"> <link rel="prev" href="https://example.com/atomFeed.php?page=2"> <link rel="last" href="https://example.com/atomFeed.php?page=147"> <!-- ブログを維持するために第三者サービスを使用する場合に使用 --> <link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD"> <!-- 別のWordPressブログがあなたのWordPressブログや投稿にリンクしたときに自動コメントを作成 --> <link rel="pingback" href="https://example.com/xmlrpc.php"> <!-- サイトにリンクしたときにURLに通知 --> <link rel="webmention" href="https://example.com/webmention"> <!-- 現在のHTMLファイルに外部HTMLファイルをロード --> <link rel="import" href="/path/to/component.html"> <!-- Open Search --> <link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title"> <!-- Feeds --> <link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS"> <link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3"> <!-- プリフェッチ、プリロード、プリブラウジング --> <link rel="dns-prefetch" href="//example.com/"> <link rel="preconnect" href="https://www.example.com/"> <link rel="prefetch" href="https://www.example.com/"> <link rel="prerender" href="https://example.com/"> <link rel="preload" href="image.png" as="image"> <!-- 詳しくは: https://css-tricks.com/prefetching-preloading-prebrowsing/ --> |
ファビコン
|
1 2 3 4 5 6 7 |
<!-- IE 10以下 用 --> <!-- favicon.icoをルートディレクトリに配置 - タグは不要 --> <!-- IE 11, Chrome, Firefox, Safari, Opera 用 --> <link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png"> |
ソーシャル関連のhead内の要素
Facebook Open Graph
|
1 2 3 4 5 6 7 8 9 |
<meta property="fb:app_id" content="123456789"> <meta property="og:url" content="https://example.com/page.html"> <meta property="og:type" content="website"> <meta property="og:title" content="Content Title"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:description" content="Description Here"> <meta property="og:site_name" content="Site Name"> <meta property="og:locale" content="en_US"> <meta property="article:author" content=""> |
Facebook Instant Articles
|
1 2 3 4 5 6 7 8 |
<meta charset="utf-8"> <meta property="op:markup_version" content="v1.0"> <!-- 記事のWeb版のURL --> <link rel="canonical" href="http://example.com/article.html"> <!-- この記事で使用するスタイル --> <meta property="fb:article_style" content="myarticlestyle"> |
Twitter Cards
|
1 2 3 4 5 6 7 |
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@site_account"> <meta name="twitter:creator" content="@individual_account"> <meta name="twitter:url" content="https://example.com/page.html"> <meta name="twitter:title" content="Content Title"> <meta name="twitter:description" content="Content description less than 200 characters"> <meta name="twitter:image" content="https://example.com/image.jpg"> |
Google+ / Schema.org
|
1 2 3 4 |
<link href="https://plus.google.com/+YourPage" rel="publisher"> <meta itemprop="name" content="Content Title"> <meta itemprop="description" content="Content description less than 200 characters"> <meta itemprop="image" content="https://example.com/image.jpg"> |
Pinterestはヘルプセンターに基づいて、人々があなたのWebサイトから何かを保存するのを防止します。descriptionの説明はオプションです。
|
1 |
<meta name="pinterest" content="nopin" description="申し訳ありません、私のWebサイトから保存することはできません"> |
OEmbed
|
1 2 3 4 5 6 |
<link rel="alternate" type="application/json+oembed" href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=json" title="oEmbed Profile: JSON"> <link rel="alternate" type="text/xml+oembed" href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=xml" title="oEmbed Profile: XML"> |
ブラウザ・プラットフォーム関連のhead内の要素
Apple iOS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!-- スマートアップバナー(Smart App Banner) --> <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"> <!-- 連続した数字があると誤認識してしまうので、電話番号の自動リンク機能は停止 --> <meta name="format-detection" content="telephone=no"> <!-- ホームスクリーンに追加 --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="App Title"> <!-- タッチアイコン --> <!-- ほとんどの場合、180×180ピクセルのタッチアイコンが1つあれば十分 --> <link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png"> <!-- 注: iOS 7のSafariはアイコンにエフェクトを追加しません --> <!-- 古いバージョンのSafariでは、-precomposed.pngという接尾辞を付けたアイコンファイルにエフェクトを追加しません --> <!-- スタートアップイメージ（廃止予定）--> <link rel="apple-touch-startup-image" href="/path/to/startup.png"> <!-- iOSアプリのディープリンク --> <meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com"> <link rel="alternate" href="ios-app://APP-ID/http/url-sample.com"> |
Apple Safari
|
1 2 |
<!-- ページピン用のアイコン --> <link rel="mask-icon" href="/path/to/icon.svg" color="red"> |
Google Android
|
1 2 3 4 5 6 7 8 9 |
<meta name="theme-color" content="#E64545"> <!-- ホームスクリーンに追加 --> <meta name="mobile-web-app-capable" content="yes"> <!-- さらに詳しい情報: https://developer.chrome.com/multidevice/android/installtohomescreen --> <!-- Androidアプリのディープリンク --> <meta name="google-play-app" content="app-id=package-name"> <link rel="alternate" href="android-app://package-name/http/url-sample.com"> |
Google Chrome
|
1 2 3 4 |
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"> <!-- Chromeの翻訳プロンプトを停止 --> <meta name="google" content="notranslate"> |
Google Chrome Mobile (Android Only)
Chrome 31以降、WebアプリをSafariのような「アプリモード」に設定できます。
|
1 2 3 4 5 6 7 8 |
<!-- マニフェストにリンクし、マニフェストメタデータを定義 --> <link rel="manifest" href="manifest.json"> <!-- WebページをWebアプリケーションとして定義 --> <meta name="mobile-web-app-capable" content="yes"> <!-- ホームスクリーンアイコン --> <link rel="icon" sizes="192x192" href="highres-icon.png"> |
Microsoft Internet Explorer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="skype_toolbar" content="skype_toolbar_parser_compatible"> <!-- IE10: タップ時にリンクの強調表示を無効 (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) --> <meta name="msapplication-tap-highlight" content="no"> <!-- ページピン用の設定 (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) --> <meta name="application-name" content="Sample Title"> <meta name="msapplication-tooltip" content="A description of what this site does."> <meta name="msapplication-starturl" content="http://example.com/index.html?pinned=true"> <meta name="msapplication-navbutton-color" content="#FF3300"> <meta name="msapplication-window" content="width=800;height=600"> <meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"> <meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"> <meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://example.com/path/to/file.xml"> <meta name="msapplication-TileColor" content="#FF3300"> <meta name="msapplication-TileImage" content="/path/to/tileimage.jpg"> <meta name="msapplication-config" content="http://example.com/browserconfig.xml"> <meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile;polling-uri2=http://example.com/livetile2"> <meta name="msapplication-task-separator" content="1"> |
App Links
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- iOS --> <meta property="al:ios:url" content="applinks://docs"> <meta property="al:ios:app_store_id" content="12345"> <meta property="al:ios:app_name" content="App Links"> <!-- Android --> <meta property="al:android:url" content="applinks://docs"> <meta property="al:android:app_name" content="App Links"> <meta property="al:android:package" content="org.applinks"> <!-- Web Fallback --> <meta property="al:web:url" content="http://applinks.org/documentation"> <!-- さらに詳しい情報: http://applinks.org/documentation/ --> |
メモ
パフォーマンス
要素の先頭にhref属性を移動すると、gzipが有効になっているときに圧縮が改善されます。なぜならhref属性は、baseとlinkタグで使用されるからです。
|
1 |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> |
他のリソース
関連プロジェクト
- Atom HTML Head Snippets: Atom用のHEADスニペット
- Sublime Text HTML Head Snippets: Sublime Text用のHEADスニペット
- head-it: HEADスニペットのCLIインターフェイス
- vue-head: HEADタグのメタ情報をvue.jsで操作
ライセンス
sponsors
