A list of everything that * could * go in theof your document
Table of Contents
- Recommended Minimum
- Elements
- Meta
- Link
- Icons
- Social
- Browsers / Platforms
- Browsers (Chinese)
- App Links
- Other Resources
- Related Projects
- Other Formats
- Translations
- Contributing
- Author
- License
Recommended Minimum
Below are the essential elements for any web document (websites / apps):
charset="utf-8">name="viewport"(content="width=device-width, initial-scale=1"> to consistently ensure proper document rendering. Any other head element should come * after * these tags. ->(Page Title)
Elements
Validelements include
meta
,link
,title
,style
,script
,noscript
, andbase
.
These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.
charset="UTF-8">(Page Title) href="https://example.com/page.html">rel="stylesheet"(href=)"styles.css"> / * ... * /
to consistently ensure proper document rendering. Any other head element should come * after * these tags. ->charset="UTF-8">name="viewport"(content="width=device-width, initial-scale=1">as possible, as the tag only applies to resources that are declared after it. ->http-equiv="Content-Security-Policy"(content=)"default-src 'self'">name="application-name"(content=)"Application Name">name="theme-color"(content=)"# 4285 F4 ">name="description"(content="A description of the page">name="robots"(content="index, follow">name="googlebot"(content="index, follow">name="google"(content="nositelinkssearchbox">name="google"(content="notranslate">name="google-site-verification"content="verification_token">name="yandex-verification"(content=)"verification_token">name="msvalidate. 01 "content="verification_token">name="alexaVerifyID"(content="verification_token">name="p: domain_verify"(content=)"code_from_pinterest">name="norton-safeweb-site-verification"(content=)"norton_code">name="generator"(content="program">name="subject"(content="your document's subject">name="rating"content="General">name="referrer"(content="no-referrer">name="format-detection"(content=)"telephone=no">http-equiv="x-dns-prefetch-control"content="off">http-equiv="Window-Target"content="_ value">name="ICBM"(content="latitude, longitude">name="geo.position"(content=)"latitude; longitude">name="geo.region"(content=)"country [-state]">name="geo.placename"(content=)"city / town">
- 📖Meta tags that Google understands
- 📖WHATWG Wiki: MetaExtensions
- 📖ICBM on Wikipedia
- 📖Geotagging on Wikipedia
Link
rel="stylesheet"(href=)"https://example.com/styles.css">rel="canonical"(href=)"https://example.com/article/?page=2">rel="amphtml"(href=)"https://example.com/path/to/amp-version.html">rel="manifest"(href=)"manifest.json">rel="author"(href=)"humans.txt">rel="license"(href=)"copyright.html">rel="alternate"(href=)"https://es.example.com/"hreflang="es">rel="me"(href=)"https://google.com/profiles/thenextweb"type="text / html">rel="me"(href=)"mailto: [email protected]">rel="me"(href=)"SMS: 15035550125 ">rel="archives"(href=)"https://example.com/archives/">rel="index"(href=)"https://example.com/article/">rel="Self"(type="application / atom xml"href="https://example.com/atom. xml ">rel="first"(href=)"https://example.com/article/">rel="last"(href=)"https://example.com/article/?page=42 ">rel="prev"(href=)"https://example.com/article/?page=1">rel="next"(href=)"https://example.com/article/?page=3">rel="EditURI"(href=)"https://example.com/xmlrpc.php?rsd"type="application / RSD XML "title="RSD">rel="Pingback"(href=)"https://example.com/xmlrpc.php">rel="webmention"(href=)"https://example.com/webmention">rel="micropub"(href=)"https://example.com/micropub">rel="search"href="/ open-search.xml"type="application / opensearchdescription xml"title="Search Title">rel="alternate"(href=)"https://feeds.feedburner.com/example"type="application / rss xml "title="RSS">rel="alternate"(href=)"https://example.com/feed.atom"type="application / atom xml "title="Atom 0.3">rel="dns-prefetch"(href=)"// example.com/">rel="preconnect"(href=)"https://www.example.com/">rel="prefetch"(href=)"https://www.example.com/">rel="Prerender"(href=)"https://example.com/">rel="Preload"(href=)"image.png"as="image">
Icons
rel="icon"sizes=" (x) "href="/ path / to / icon.png">rel="apple-touch-icon"href="/ path / to / apple-touch-icon.png">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
Facebook Open Graph
property="fb: app_id"content="123456789 ">property="og: url"(content=)"https://example.com/page.html">property="og: type"(content=)"Website">property="og: title"(content=)"Content Title">property="og: image"(content=)"https://example.com/image.jpg">property="og: image: alt"content="A description of what is in the image (not a caption)">property="og: description"(content=)"Description Here">property="og: site_name"(content=)"Site Name">property="og: locale"(content=)"en_US">property="article: author"(content=)"">
- 📖Facebook Open Graph Markup
- 📖Open Graph protocol
- 🛠 Test your page with theFacebook Sharing Debugger
(Twitter Card)
name="twitter: card"content="Summary">name="twitter: site"(content=)"@ site_account">name="twitter: creator"(content=)"@ individual_account">name="twitter: url"(content=)"https://example.com/page.html">name="twitter: title"(content=)"Content Title">name="twitter: description"(content=)"Content description less than 200 characters ">name="twitter: image"(content=)"https://example.com/image.jpg">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 theTwitter 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.
name="twitter: dnt"(content=)"on">
Schema .org
lang=""itemscopeitemtype="https: // schema .org / Article "> rel="author"(href=)""> rel="publisher"(href=)""> itemprop="name"(content="Content Title"> itemprop="description"(content="Content description less than 200 characters "> itemprop="image"(content="https://example.com/image.jpg">
Note:These meta tags require theitemscope
anditemtype
attributes to be added to Thetag.
- 🛠 Test your page with the (Structured Data Testing Tool)
Pinterest lets you prevent people from saving things from your website, accordingto their help center. Thedescription
is optional.
name="Pinterest"content="nopin"(description=)"Sorry, you can't save from my website!">
Facebook Instant Articles
charset="utf-8">property="op: markup_version"(content=)"v1.0">rel="canonical"(href=)"https://example.com/article.html">property="fb: article_style"(content=)"myarticlestyle">
(OEmbed)
rel="alternate"type="application / json oembed" href="https://example.com/services/oembed?url=http://example.com/foo/&format=json " title="oEmbed Profile: JSON">rel="alternate"(type="text / xml oembed" href="https://example.com/services/oembed?url=http://example.com/foo/&format=xml " title="oEmbed Profile: XML">
Browsers / Platforms
(Apple iOS)
name="apple-itunes-app"content="app-id=APP_ID, affiliate-data=AFFILIATE_ID, app-argument=SOME_TEXT">name="format-detection"(content=)"telephone=no">rel="apple-touch-icon"href="/ path / to / apple-touch-icon.png">rel="apple-touch-startup-image"(href=)"/ path / to / launch.png">name="apple-mobile-web-app-title"content="App Title">name="apple-mobile-web-app-capable"content="yes">name="apple-mobile-web-app-status-bar-style"content="black">name="apple-itunes-app"content="app-id=APP-ID, app-argument=http / url-sample.com">rel="alternate"(href=)"ios-app://APP-ID/http/url-sample.com">
(Google Android)
name="theme-color"content="# E 64545 "">name="mobile-web-app-capable"(content=)"yes">name="google-play-app"content="app-id=package-name">rel="alternate"(href=)"android-app://package-name/http/url-sample.com">
(Google Chrome)
rel="chrome-webstore-item"href="https://chrome.google.com/webstore/ detail / APP_ID ">name="google"(content="notranslate">
(Microsoft Internet Explorer)
http-equiv="x-ua-compatible"(content=)"ie=edge">name="skype_toolbar"(content="skype_toolbar_parser_compatible">name="msapplication-config"(content=)"/ browserconfig.xml">
Minimum required xml markup forbrowserconfig.xml
:
src= "small.png"/> src="medium.png"/> src="wide.png"/> src="large.png"/>
Browsers (Chinese)
(Browser)
name="renderer"(content="webkit | ie-comp | ie-stand">
name="renderer"(content="webkit | ie-comp | ie-stand">
(QQ Mobile Browser)
name="x5-orientation"(content=)"landscape / portrait">name="x5-fullscreen"(content=)"true">name="x5-page-mode"content="app">
(UC Mobile Browser)
name="screen-orientation"(content=)"landscape / portrait">name="full-screen"(content=)"yes">name="imagemode"(content="Force">name="browsermode"(content="application">name="nightmode"(content="disable">name="layoutmode"(content="Fitscreen">name="wap-font-scale"content="no">
App Links
property="al: ios: url"content="applinks: // docs">property="al: ios: app_store_id"content="12345 "">property="al: ios: app_name"content="App Links">property="al: android: url"content="applinks: // docs">property="al: android: app_name"content="App Links">property="al: android: package"content="org.applinks">property="al: web: url"content="https://applinks.org/documentation">
- 📖 (App Links)
Other Resources
- 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
Other Formats
Translations
- 🇧🇷Brazilian Portuguese
- 🇨🇳Chinese (Simplified)
- 🇩🇪 German
- 🇮🇹Italian
- 🇯🇵 (Japanese)
- 🇰🇷Korean
- 🇷🇺 (Russian / Русский)
- 🇪🇸 (Spanish)
- 🇹🇷Turkish / Türkçe
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 theREADME.md
file that is automatically reflected on thehtmlhead.devwebsite. 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 thehtmlhead.devwebsite. We useJekyllto deploy theREADME.md
Markdown file throughGitHub 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 awesomecontributors.
Author
License
GIPHY App Key not set. Please check settings