🗿 HEAD

A list of everything that *could* go in the <head> of your document

Recommended Minimum

Below are the essential elements for any web document (websites/apps):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  The above 2 meta tags *must* come first in the <head>
  to consistently ensure proper document rendering.
  Any other head element should come *after* these tags.
 -->
<title>Page Title</title>

meta charset - defines the encoding of the website, utf-8 is the standard

meta name="viewport" - viewport settings related to mobile responsiveness

width=device-width means that it will use the physical width of the device (instead of zooming out) which is good with mobile friendly pages

initial-scale=1 is the initial zoom, 1 means no zoom

⬆ back to top

要素

有効な <head> の要素には meta, link, title, style, script, noscript と base が含まれます。

これらの要素は、Webテクノロジーがドキュメントをどのように認識し、レンダリングするかについての情報を提供します。例えばブラウザ、検索エンジン、ボットなど

<!--
  Set the character encoding for this document, so that
  all characters within the UTF-8 space (such as emoji)
  are rendered correctly.
　このドキュメントの文字エンコーディングを設定して、 UTF-8スペース内のすべての文字（絵文字など） 正しくレンダリングされます。
-->
<meta charset="utf-8">

<!-- Set the document's title -->
<!-- ドキュメントのタイトルを設定 -->
<title>Page Title</title>

<!-- Set the base URL for all relative URLs within the document -->
<!-- ドキュメント内のすべての相対URLのベースURLを設定します
訳注: 
https://developer.mozilla.org/ja/docs/Web/HTML/Element/base
-->
<base href="https://example.com/page.html">

<!-- Link to an external CSS file -->
<!-- 外部CSSファイルへのリンク -->
<link rel="stylesheet" href="styles.css">

<!-- Used for adding in-document CSS -->
<!-- ドキュメント内のCSSを追加するために使用されます -->
<style>
  /* ... */
</style>

<!-- JavaScript & No-JavaScript tags -->
<!-- JavaScriptおよびJavaScriptなしのタグ -->
<script src="script.js"></script>
<script>
  // function(s) go here
</script>
<noscript>
  <!-- No JS alternative -->
</noscript>

⬆ back to top

メタ

<!--
  The following 2 meta tags *must* come first in the <head>
  to consistently ensure proper document rendering.
  Any other head element should come *after* these tags.
　次の2つのメタタグは、<head>の最初に*ある必要があります* 適切なドキュメントのレンダリングを一貫して保証するため他のヘッド要素は、これらのタグの「後に」来る必要があります
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--
  Allows control over where resources are loaded from.
  Place as early in the <head> as possible, as the tag  
  only applies to resources that are declared after it.
  リソースのロード元を制御できます。<head>のできるだけ早い位置にタグとして配置します。その後に宣言されたリソースにのみ適用されます。
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Name of web application (only should be used if the website is used as an app) -->
<!-- Webアプリケーションの名前（Webサイトがアプリとして使用されている場合にのみ使用されます） -->
<meta name="application-name" content="Application Name">

<!-- Theme Color for Chrome, Firefox OS and Opera -->
<!-- Chrome、Firefox OS、Operaのテーマの色 -->
<meta name="theme-color" content="#4285f4">

<!-- Short description of the document (limit to 150 characters) -->
<!-- This content *may* be used as a part of search engine results. -->
<!-- ドキュメントの短い説明（150文字まで） このコンテンツは、検索エンジンの結果の一部として使用される可能性があります。  -->
<meta name="description" content="A description of the page">

<!-- Control the behavior of search engine crawling and indexing -->
<!-- 検索エンジンのクロールとインデックス作成の動作を制御する -->
<meta name="robots" content="index,follow"><!-- All Search Engines -->
<meta name="googlebot" content="index,follow"><!-- Google Specific -->

<!-- Tells Google not to show the sitelinks search box -->
<!-- サイトリンク検索ボックスを表示しないようにGoogleに指示します -->
<meta name="google" content="nositelinkssearchbox">

<!-- Tells Google not to provide a translation for this document -->
<!-- このドキュメントの翻訳を提供しないようにGoogleに指示します -->
<meta name="google" content="notranslate">

<!-- Verify website ownership -->
<!-- ウェブサイトの所有権を確認する -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->

<!-- Identify the software used to build the document (i.e. - WordPress, Dreamweaver) -->
<!-- ドキュメントの作成に使用したソフトウェアを特定します (i.e. - WordPress, Dreamweaver) -->
<meta name="generator" content="program">

<!-- Short description of your document's subject -->
<!-- 
ドキュメントの件名の短い説明
訳注: 要出典
-->
<meta name="subject" content="your document's subject">

<!-- Gives a general age rating based on the document's content -->
<!-- ドキュメントのコンテンツの一般的な年齢評価を示す -->
<meta name="rating" content="General">

<!-- Allows control over how referrer information is passed -->
<!-- リファラー情報の受け渡し方法を制御できます -->
<meta name="referrer" content="no-referrer">

<!-- Disable automatic detection and formatting of possible phone numbers -->
<!-- 利用可能な電話番号の自動検出とフォーマットを無効にする -->
<meta name="format-detection" content="telephone=no">

<!-- Completely opt out of DNS prefetching by setting to "off" -->
<!-- "off"にすることで、DNSプリフェッチを完全にオプトアウトします。 -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- Specifies the document to appear in a specific frame -->
<!-- 
特定のフレームに表示するドキュメントを指定します
訳注 : 使用されていない? baseタグのtarget属性を使用することが推奨されている?
-->
<meta http-equiv="Window-Target" content="_value">

<!-- Geo tags -->
<!-- 
位置情報タグ
訳注 : Google はインデックス時に利用しておらず、代わりにlink hreflang属性を使用することを推奨している
https://blog.seoprofiler.com/googles-geo-meta-tags-web-pages/
-->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->

📖 Meta tags that Google understands
📖 WHATWG Wiki: MetaExtensions
📖 ICBM on Wikipedia
📖 Geotagging on Wikipedia

⬆ back to top

Link

<!-- Points to an external stylesheet -->
<!-- 外部スタイルシートを指定する -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- Helps prevent duplicate content issues -->
<!-- コンテンツの重複問題を防止するのに役立ちます -->
<link rel="canonical" href="https://example.com/article/?page=2">

<!-- Links to an AMP HTML version of the current document -->
<!-- 現在のドキュメントのAMP HTMLバージョンへのリンク -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Links to a JSON file that specifies "installation" credentials for the web applications -->
<!-- Webアプリケーションの「インストール」資格情報を指定するJSONファイルへのリンク -->
<link rel="manifest" href="manifest.json">

<!-- Links to information about the author(s) of the document -->
<!-- ドキュメントの作成者に関する情報へのリンク -->
<link rel="author" href="humans.txt">

<!-- Refers to a copyright statement that applies to the link's context -->
<!-- リンクのコンテキストに適用される著作権ステートメントを参照します -->
<link rel="license" href="copyright.html">

<!-- Gives a reference to a location in your document that may be in another language -->
<!-- 別の言語のドキュメント内の場所への参照を提供します -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Provides information about an author or another person -->
<!-- 著者または他の人に関する情報を提供します -->
<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">

<!-- Links to a document that describes a collection of records, documents, or other materials of historical interest -->
<!-- 資料のコレクション（文書、書類など）を説明するドキュメントへのリンク
訳注: HTML 5.1 以降非推奨
参照リンク: 
https://developer.mozilla.org/ja/docs/Web/HTML/Link_types
https://html.spec.whatwg.org/multipage/links.html#linkTypes
-->
<link rel="archives" href="https://example.com/archives/">

<!-- Links to top level resource in an hierarchical structure -->
<!-- 階層構造の最上位リソースへのリンク
訳注: HTML 5 以降非推奨
-->
<link rel="index" href="https://example.com/article/">

<!-- Provides a self reference - useful when the document has multiple possible references -->
<!-- 自己参照を提供します-ドキュメントに複数の可能な参照がある場合に役立ちます
訳注: W3C未定義、atom用？
-->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">

<!-- The first, last, previous, and next documents in a series of documents, respectively -->
<!-- 一連のドキュメントの最初、最後、前、次のドキュメント
訳注: first, last 非推奨
-->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">

<!-- Used when a 3rd party service is utilized to maintain a blog -->
<!-- サードパーティのサービスを利用してブログを管理する場合に使用されます
訳注: W3C未定義
-->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Forms an automated comment when another WordPress blog links to your WordPress blog or post -->
<!-- 別のWordPressブログがWordPressブログまたは投稿にリンクしたときに自動コメントを形成します
訳注: W3C未定義
-->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Notifies a URL when you link to it on your document -->
<!-- ドキュメントにリンクしたときにURLに通知します
訳注: W3C未定義
-->
<link rel="webmention" href="https://example.com/webmention">

<!-- Enables posting to your own domain using a Micropub client -->
<!-- Micropubクライアントを使用して自分のドメインに投稿できるようにします
訳注: W3C未定義
-->
<link rel="micropub" href="https://example.com/micropub">

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

<!-- Prefetching, preloading, prebrowsing -->
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<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">

📖 Link Relations

⬆ back to top

Icons

<!-- For IE 10 and below -->
<!-- Place favicon.ico in the root directory - no tag necessary -->

<!-- Icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">

<!-- Apple Touch Icon (reuse 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Safari Pinned Tab Icon -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

📖 All About Favicons (And Touch Icons)
📖 Creating Pinned Tab Icons
📖 Favicon Cheat Sheet
📖 Icons & Browser Colors

⬆ back to top

Social

Facebook Open Graph

Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. More about Facebook Open Graph Markup

<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:image:alt" content="A description of what is in the image (not a caption)">
<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="">

📖 Open Graph protocol
🛠 Test your page with the Facebook Sharing Debugger

Twitter Card

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. More about Twitter Cards

<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">
<meta name="twitter:image:alt" content="A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.">

📖 Getting started with cards — Twitter Developers
🛠 Test your page with the Twitter Card Validator

Twitter Privacy

If you embed tweets in your website, Twitter can use information from your site to tailor content and suggestions to Twitter users. More about Twitter privacy options.

<!-- disallow Twitter from using your site's info for personalization purposes -->
<meta name="twitter:dnt" content="on">

Schema.org

<html lang="" itemscope itemtype="https://schema.org/Article">
    <head>
      <link rel="author" href="">
      <link rel="publisher" href="">
      <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">

Note: These meta tags require the itemscope and itemtype attributes to be added to the <html> tag.

🛠 Test your page with the Structured Data Testing Tool

Pinterest

Pinterest lets you prevent people from saving things from your website, according to their help center. The description is optional.

<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">

Facebook Instant Articles

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->
<link rel="canonical" href="https://example.com/article.html">

<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">

📖 Creating Articles - Instant Articles
📖 Code Samples - Instant Articles

OEmbed

<link rel="alternate" type="application/json+oembed"
  href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
  title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
  href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
  title="oEmbed Profile: XML">

📖 oEmbed format

QQ/Wechat

Users share web pages to qq wechat will have a formatted message

<meta itemprop="name" content="share title">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="share content">

📖 Code Format Docs

⬆ back to top

Browsers / Platforms

Apple iOS

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Disable automatic detection and formatting of possible phone numbers -->
<meta name="format-detection" content="telephone=no">

<!-- Launch Icon (180x180px or larger) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Launch Screen Image -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">

<!-- Launch Icon Title -->
<meta name="apple-mobile-web-app-title" content="App Title">

<!-- Enable standalone (full-screen) mode -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status bar appearance (has no effect unless standalone mode is enabled) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- iOS app deep linking -->
<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">

📖 Configuring Web Applications

Google Android

<meta name="theme-color" content="#E64545">

<!-- Add to home screen -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- Android app deep linking -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

<!-- Disable translation prompt -->
<meta name="google" content="notranslate">

Microsoft Internet Explorer

<!-- Force IE 8/9/10 to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Disable automatic detection and formatting of possible phone numbers by Skype Toolbar browser extension -->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- Windows Tiles -->
<meta name="msapplication-config" content="/browserconfig.xml">

Minimum required xml markup for browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>

📖 Browser configuration schema reference

⬆ back to top

Browsers (Chinese)

360 Browser

<!-- Select rendering engine order -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

<!-- Locks the screen into the specified orientation -->
<meta name="x5-orientation" content="landscape/portrait">

<!-- Display this document in fullscreen -->
<meta name="x5-fullscreen" content="true">

<!-- Document will be displayed in "application mode" (fullscreen, etc.) -->
<meta name="x5-page-mode" content="app">

UC Mobile Browser

<!-- Locks the screen into the specified orientation -->
<meta name="screen-orientation" content="landscape/portrait">

<!-- Display this document in fullscreen -->
<meta name="full-screen" content="yes">

<!-- UC browser will display images even if in "text mode" -->
<meta name="imagemode" content="force">

<!-- Document will be displayed in "application mode"(fullscreen, forbidding gesture, etc.) -->
<meta name="browsermode" content="application">

<!-- Disabled the UC browser's "night mode" for this document -->
<meta name="nightmode" content="disable">

<!-- Simplify the document to reduce data transfer -->
<meta name="layoutmode" content="fitscreen">

<!-- Disable the UC browser's feature of "scaling font up when there are many words in this document" -->
<meta name="wap-font-scale" content="no">

📖 UC Browser Docs

⬆ back to top

App Links

<!-- 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 fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">

📖 App Links

⬆ back to top

Other Resources

📖 HTML5 Boilerplate Docs: The HTML
📖 HTML5 Boilerplate Docs: Extend and customize

⬆ back to top

Related Projects

Atom HTML Head Snippets - Atom package for HEAD snippets
Sublime Text HTML Head Snippets - Sublime Text package for HEAD snippets
head-it - CLI interface for HEAD snippets
vue-head - Manipulating the meta information of the HEAD tag for Vue.js

⬆ back to top

Other Formats

📄 PDF

⬆ back to top

🌐 Translations

🇮🇩 Bahasa
🇧🇷 Brazilian Portuguese
🇨🇳 Chinese (Simplified)
🇩🇪 German
🇮🇹 Italian
🇯🇵 Japanese
🇰🇷 Korean
🇷🇺 Russian/Русский
🇪🇸 Spanish
🇹🇷 Turkish/Türkçe

⬆ back to top

🤝 Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The HEAD repository consists of two branches:

1. `master`

This branch consists of the README.md file that is automatically reflected on the htmlhead.dev website. All changes to the content of the cheat sheet as such should be directed to this file.

Please follow these steps for pull requests:

Modify only one tag, or one related set of tags at a time
Use double quotes on attributes
Don't include a trailing slash in self-closing elements — the HTML5 spec says they're optional
Consider including a link to documentation that supports your change

2. `gh-pages`

This branch is responsible for the htmlhead.dev website. We use Jekyll to deploy the README.md Markdown file through GitHub Pages. All website related modifications must be directed here.

You may want to go through the Jekyll Docs and understand how Jekyll works before working on this branch.

Contributors

Check out all the super awesome contributors.

👤 Author

Josh Buchea

Twitter: @joshbuchea
Github: @joshbuchea

Show your support

Please ⭐️ this repository if this project helped you!

📝 License

⬆ back to top

Files

README.md

Latest commit

History

README.md

File metadata and controls

🗿 HEAD

Table of Contents

Recommended Minimum

要素

メタ

Link

Icons

Social

Facebook Open Graph

Twitter Card

Twitter Privacy

Schema.org

Pinterest

Facebook Instant Articles

OEmbed

QQ/Wechat

Browsers / Platforms

Apple iOS

Google Android

Google Chrome

Microsoft Internet Explorer

Browsers (Chinese)

360 Browser

QQ Mobile Browser

UC Mobile Browser

App Links

Other Resources

Related Projects

Other Formats

🌐 Translations

🤝 Contributing

Guide

1. master

2. gh-pages

Contributors

👤 Author

Show your support

📝 License

1. `master`

2. `gh-pages`