Skip to content

๐Ÿ—ฟ A list of everything that *could* go in the head of your document

Notifications You must be signed in to change notification settings

gutenbergfreaks/HEAD

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 

Repository files navigation

๐Ÿ—ฟ HEAD

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

Contributors CC0 Follow @joshbuchea on Twitter

Table of Contents

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

โฌ† 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:[email protected]">
<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">

โฌ† 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">

โฌ† 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="">

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

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.

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

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

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

โฌ† 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">

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>

โฌ† 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">

โฌ† 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">

โฌ† back to top

Other Resources

โฌ† back to top

Related Projects

โฌ† back to top

Other Formats

  • ๐Ÿ“„ PDF

โฌ† back to top

๐ŸŒ Translations

โฌ† 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

Show your support

Please โญ๏ธ this repository if this project helped you!

๐Ÿ“ License

CC0

โฌ† back to top

About

๐Ÿ—ฟ A list of everything that *could* go in the head of your document

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published