Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1.9k
A simple guide to HTML <head> elements
NotificationsYou must be signed in to change notification settings
joshbuchea/HEAD
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A simple guide to HTML
<head>elements
- Recommended Minimum
- Elements
- Meta
- Link
- Icons
- Social
- Browsers / Platforms
- Browsers (Chinese)
- App Links
- Other Resources
- Related Projects
- Other Formats
- Translations
- Contributing
- Author
- License
Below are the essential elements for any web document (websites/apps):
<metacharset="utf-8"><metaname="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 - use the physical width of the device (great for mobile!)
initial-scale=1 - the initial zoom, 1 means no zoom
Valid<head> elements includemeta,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.
<!-- Set the character encoding for this document, so that all characters within the UTF-8 space (such as emoji) are rendered correctly.--><metacharset="utf-8"><!-- Set the document's title --><title>Page Title</title><!-- Set the base URL for all relative URLs within the document --><basehref="https://example.com/page.html"><!-- Link to an external CSS file --><linkrel="stylesheet"href="styles.css"><!-- Used for adding in-document CSS --><style>/* ... */</style><!-- JavaScript & No-JavaScript tags --><scriptsrc="script.js"></script><script>// function(s) go here</script><noscript><!-- No JS alternative --></noscript>
<!-- 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.--><metacharset="utf-8"><metaname="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.--><metahttp-equiv="Content-Security-Policy"content="default-src 'self'"><!-- Name of web application (only should be used if the website is used as an app) --><metaname="application-name"content="Application Name"><!-- Theme Color for Chrome, Firefox OS and Opera --><metaname="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. --><metaname="description"content="A description of the page"><!-- Control the behavior of search engine crawling and indexing --><metaname="robots"content="index,follow"><!-- All Search Engines --><metaname="googlebot"content="index,follow"><!-- Google Specific --><!-- Tells Google not to show the sitelinks search box --><metaname="google"content="nositelinkssearchbox"><!-- Tells Google not to provide a translation for this document --><metaname="google"content="notranslate"><!-- Verify website ownership --><metaname="google-site-verification"content="verification_token"><!-- Google Search Console --><metaname="yandex-verification"content="verification_token"><!-- Yandex Webmasters --><metaname="msvalidate.01"content="verification_token"><!-- Bing Webmaster Center --><metaname="alexaVerifyID"content="verification_token"><!-- Alexa Console --><metaname="p:domain_verify"content="code_from_pinterest"><!-- Pinterest Console--><metaname="norton-safeweb-site-verification"content="norton_code"><!-- Norton Safe Web --><!-- Identify the software used to build the document (i.e. - WordPress, Dreamweaver) --><metaname="generator"content="program"><!-- Short description of your document's subject --><metaname="subject"content="your document's subject"><!-- Gives a general age rating based on the document's content --><metaname="rating"content="General"><!-- Allows control over how referrer information is passed --><metaname="referrer"content="no-referrer"><!-- Disable automatic detection and formatting of possible phone numbers --><metaname="format-detection"content="telephone=no"><!-- Completely opt out of DNS prefetching by setting to "off" --><metahttp-equiv="x-dns-prefetch-control"content="off"><!-- Specifies the document to appear in a specific frame --><metahttp-equiv="Window-Target"content="_value"><!-- Geo tags --><metaname="ICBM"content="latitude, longitude"><metaname="geo.position"content="latitude;longitude"><metaname="geo.region"content="country[-state]"><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" --><metaname="geo.placename"content="city/town"><!-- eg. content="New York City" --><!-- Web Monetization https://webmonetization.org/docs/getting-started --><metaname="monetization"content="$paymentpointer.example">
- 📖Meta tags that Google understands
- 📖WHATWG Wiki: MetaExtensions
- 📖ICBM on Wikipedia
- 📖Geotagging on Wikipedia
<!-- Points to an external stylesheet --><linkrel="stylesheet"href="https://example.com/styles.css"><!-- Helps prevent duplicate content issues --><linkrel="canonical"href="https://example.com/article/?page=2"><!-- Links to an AMP HTML version of the current document --><linkrel="amphtml"href="https://example.com/path/to/amp-version.html"><!-- Links to a JSON file that specifies "installation" credentials for the web applications --><linkrel="manifest"href="manifest.json"><!-- Links to information about the author(s) of the document --><linkrel="author"href="humans.txt"><!-- Refers to a copyright statement that applies to the link's context --><linkrel="license"href="copyright.html"><!-- Gives a reference to a location in your document that may be in another language --><linkrel="alternate"href="https://es.example.com/"hreflang="es"><!-- Provides information about an author or another person --><linkrel="me"href="https://google.com/profiles/thenextweb"type="text/html"><linkrel="me"href="mailto:name@example.com"><linkrel="me"href="sms:+15035550125"><!-- Links to a document that describes a collection of records, documents, or other materials of historical interest --><linkrel="archives"href="https://example.com/archives/"><!-- Links to top level resource in an hierarchical structure --><linkrel="index"href="https://example.com/article/"><!-- Provides a self reference - useful when the document has multiple possible references --><linkrel="self"type="application/atom+xml"href="https://example.com/atom.xml"><!-- The first, last, previous, and next documents in a series of documents, respectively --><linkrel="first"href="https://example.com/article/"><linkrel="last"href="https://example.com/article/?page=42"><linkrel="prev"href="https://example.com/article/?page=1"><linkrel="next"href="https://example.com/article/?page=3"><!-- Used when a 3rd party service is utilized to maintain a blog --><linkrel="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 --><linkrel="pingback"href="https://example.com/xmlrpc.php"><!-- Notifies a URL when you link to it on your document --><linkrel="webmention"href="https://example.com/webmention"><!-- Enables posting to your own domain using a Micropub client --><linkrel="micropub"href="https://example.com/micropub"><!-- Open Search --><linkrel="search"href="/open-search.xml"type="application/opensearchdescription+xml"title="Search Title"><!-- Feeds --><linkrel="alternate"href="https://feeds.feedburner.com/example"type="application/rss+xml"title="RSS"><linkrel="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/ --><linkrel="dns-prefetch"href="//example.com/"><linkrel="preconnect"href="https://www.example.com/"><linkrel="prefetch"href="https://www.example.com/"><linkrel="prerender"href="https://example.com/"><linkrel="preload"href="image.png"as="image">
<!-- For IE 10 and below --><!-- Place favicon.ico in the root directory - no tag necessary --><!-- Icon in the highest resolution we need it for --><linkrel="icon"sizes="192x192"href="/path/to/icon.png"><!-- Apple Touch Icon (reuse 192px icon.png) --><linkrel="apple-touch-icon"href="/path/to/apple-touch-icon.png"><!-- Safari Pinned Tab Icon --><linkrel="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
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
<metaproperty="fb:app_id"content="123456789"><metaproperty="og:url"content="https://example.com/page.html"><metaproperty="og:type"content="website"><metaproperty="og:title"content="Content Title"><metaproperty="og:image"content="https://example.com/image.jpg"><metaproperty="og:image:alt"content="A description of what is in the image (not a caption)"><metaproperty="og:description"content="Description Here"><metaproperty="og:site_name"content="Site Name"><metaproperty="og:locale"content="en_US"><metaproperty="article:author"content="">
- 📖Open Graph protocol
- 🛠 Test your page with theFacebook Sharing Debugger
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
<metaname="twitter:card"content="summary"><metaname="twitter:site"content="@site_account"><metaname="twitter:creator"content="@individual_account"><metaname="twitter:url"content="https://example.com/page.html"><metaname="twitter:title"content="Content Title"><metaname="twitter:description"content="Content description less than 200 characters"><metaname="twitter:image"content="https://example.com/image.jpg"><metaname="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
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 --><metaname="twitter:dnt"content="on">
<htmllang=""itemscopeitemtype="https://schema.org/Article"><head><linkrel="author"href=""><linkrel="publisher"href=""><metaitemprop="name"content="Content Title"><metaitemprop="description"content="Content description less than 200 characters"><metaitemprop="image"content="https://example.com/image.jpg">
Note: These meta tags require theitemscope anditemtype attributes to be added to the<html> tag.
- 📖Getting Started - schema.org
- 🛠 Test your page with theRich Results Test
Pinterest lets you prevent people from saving things from your website, accordingto their help center. Thedescription is optional.
<metaname="pinterest"content="nopin"description="Sorry, you can't save from my website!">
<metacharset="utf-8"><metaproperty="op:markup_version"content="v1.0"><!-- The URL of the web version of your article --><linkrel="canonical"href="https://example.com/article.html"><!-- The style to be used for this article --><metaproperty="fb:article_style"content="myarticlestyle">
<linkrel="alternate"type="application/json+oembed"href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=json"title="oEmbed Profile: JSON"><linkrel="alternate"type="text/xml+oembed"href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=xml"title="oEmbed Profile: XML">
Users share web pages to qq wechat will have a formatted message
<metaitemprop="name"content="share title"><metaitemprop="image"content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png"><metaname="description"itemprop="description"content="share content">
<!-- Smart App Banner --><metaname="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 --><metaname="format-detection"content="telephone=no"><!-- Launch Icon (180x180px or larger) --><linkrel="apple-touch-icon"href="/path/to/apple-touch-icon.png"><!-- Launch Screen Image --><linkrel="apple-touch-startup-image"href="/path/to/launch.png"><!-- Launch Icon Title --><metaname="apple-mobile-web-app-title"content="App Title"><!-- Enable standalone (full-screen) mode --><metaname="apple-mobile-web-app-capable"content="yes"><!-- Status bar appearance (has no effect unless standalone mode is enabled) --><metaname="apple-mobile-web-app-status-bar-style"content="black"><!-- iOS app deep linking --><metaname="apple-itunes-app"content="app-id=APP-ID, app-argument=http/url-sample.com"><linkrel="alternate"href="ios-app://APP-ID/http/url-sample.com">
<metaname="theme-color"content="#E64545"><!-- Add to home screen --><metaname="mobile-web-app-capable"content="yes"><!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen --><!-- Android app deep linking --><metaname="google-play-app"content="app-id=package-name"><linkrel="alternate"href="android-app://package-name/http/url-sample.com">
<linkrel="chrome-webstore-item"href="https://chrome.google.com/webstore/detail/APP_ID"><!-- Disable translation prompt --><metaname="google"content="notranslate">
<!-- Force IE 8/9/10 to use its latest rendering engine --><metahttp-equiv="x-ua-compatible"content="ie=edge"><!-- Disable automatic detection and formatting of possible phone numbers by Skype Toolbar browser extension --><metaname="skype_toolbar"content="skype_toolbar_parser_compatible"><!-- Windows Tiles --><metaname="msapplication-config"content="/browserconfig.xml">
Minimum required xml markup forbrowserconfig.xml:
<?xml version="1.0" encoding="utf-8"?><browserconfig> <msapplication> <tile> <square70x70logosrc="small.png"/> <square150x150logosrc="medium.png"/> <wide310x150logosrc="wide.png"/> <square310x310logosrc="large.png"/> </tile> </msapplication></browserconfig>
<!-- Select rendering engine order --><metaname="renderer"content="webkit|ie-comp|ie-stand">
<!-- Locks the screen into the specified orientation --><metaname="x5-orientation"content="landscape/portrait"><!-- Display this document in fullscreen --><metaname="x5-fullscreen"content="true"><!-- Document will be displayed in "application mode" (fullscreen, etc.) --><metaname="x5-page-mode"content="app">
<!-- Locks the screen into the specified orientation --><metaname="screen-orientation"content="landscape/portrait"><!-- Display this document in fullscreen --><metaname="full-screen"content="yes"><!-- UC browser will display images even if in "text mode" --><metaname="imagemode"content="force"><!-- Document will be displayed in "application mode"(fullscreen, forbidding gesture, etc.) --><metaname="browsermode"content="application"><!-- Disabled the UC browser's "night mode" for this document --><metaname="nightmode"content="disable"><!-- Simplify the document to reduce data transfer --><metaname="layoutmode"content="fitscreen"><!-- Disable the UC browser's feature of "scaling font up when there are many words in this document" --><metaname="wap-font-scale"content="no">
<!-- iOS --><metaproperty="al:ios:url"content="applinks://docs"><metaproperty="al:ios:app_store_id"content="12345"><metaproperty="al:ios:app_name"content="App Links"><!-- Android --><metaproperty="al:android:url"content="applinks://docs"><metaproperty="al:android:app_name"content="App Links"><metaproperty="al:android:package"content="org.applinks"><!-- Web fall back --><metaproperty="al:web:url"content="https://applinks.org/documentation">
- Atom HTML Head Snippets - Atom package for
HEADsnippets - Sublime Text HTML Head Snippets - Sublime Text package for
HEADsnippets - head-it - CLI interface for
HEADsnippets - vue-head - Manipulating the meta information of the
HEADtag for Vue.js
- 🇮🇩Bahasa
- 🇧🇷Brazilian Portuguese
- 🇨🇳Chinese (Simplified)
- 🇩🇪German
- 🇮🇹Italian
- 🇯🇵Japanese
- 🇰🇷Korean
- 🇷🇺Russian/Русский
- 🇪🇸Spanish
- 🇹🇷Turkish/Türkçe
Open an issue or a pull request to suggest changes or additions.
TheHEAD repository consists of two branches:
This branch consists of theREADME.md file that is reflected on thehtmlhead.dev website. All changes to the content of the guide should be made in this file.
Please follow these steps for pull requests:
{:.list-style-default}
- 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
This branch is responsible for thehtmlhead.dev website. We useJekyll to deploy theREADME.md markdown file toGitHub Pages. All website related modifications should be made in this branch.
You may find it helpful to review theJekyll Docs and understand how Jekyll works before working in this branch.
Check out all the super awesomecontributors 🤩
Josh Buchea
- GitHub:@joshbuchea
- Mastodon:@joshbuchea@hachyderm.io
If this project was helpful for you or your organization, please considering supporting my work directly:
Everything helps, thanks! 🙏
— Josh
About
A simple guide to HTML <head> elements
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.