# HEAD [![CC0](https://img.shields.io/badge/license-CC0-green.svg)](https://creativecommons.org/publicdomain/zero/1.0/) [![Contributors](https://img.shields.io/github/contributors/joshbuchea/head.svg)](https://github.com/joshbuchea/HEAD/graphs/contributors) A list of everything that \*could\* go in the `` of your document ## Table of Contents - [Recommended Minimum](#recommended-minimum) - [Elements](#elements) - [Meta](#meta) - [Link](#link) - [Icons](#icons) - [Social](#social) - [Facebook Open Graph](#facebook-open-graph) - [Twitter Card](#twitter-card) - [Twitter Privacy](#twitter-privacy) - [Google+ / Schema.org](#google--schemaorg) - [Pinterest](#pinterest) - [Facebook Instant Articles](#facebook-instant-articles) - [OEmbed](#oembed) - [Browsers / Platforms](#browsers--platforms) - [Apple iOS](#apple-ios) - [Google Android](#google-android) - [Google Chrome](#google-chrome) - [Microsoft Internet Explorer](#microsoft-internet-explorer) - [Browsers (Chinese)](#browsers-chinese) - [360 Browser](#360-browser) - [QQ Mobile Browser](#qq-mobile-browser) - [UC Mobile Browser](#uc-mobile-browser) - [App Links](#app-links) - [Other Resources](#other-resources) - [Related Projects](#related-projects) - [Other Formats](#other-formats) - [Translations](#translations) - [Contributing](#contributing) - [Contributors](#contributors) - [Author](#author) - [License](#license) ## Recommended Minimum Below are the essential elements for any web document (websites/apps): ```html Page Title ``` **[โฌ† back to top](#table-of-contents)** ## Elements Valid `` elements include `meta`, `link`, `title`, `style`, `script`, `noscript`, and `base`. These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc. ```html Page Title ``` **[โฌ† back to top](#table-of-contents)** ## Meta ```html ``` - ๐Ÿ“– [Meta tags that Google understands](https://support.google.com/webmasters/answer/79812?hl=en) - ๐Ÿ“– [WHATWG Wiki: MetaExtensions](https://wiki.whatwg.org/wiki/MetaExtensions) - ๐Ÿ“– [ICBM on Wikipedia](https://en.wikipedia.org/wiki/ICBM_address#Modern_use) - ๐Ÿ“– [Geotagging on Wikipedia](https://en.wikipedia.org/wiki/Geotagging#HTML_pages) **[โฌ† back to top](#table-of-contents)** ## Link ```html ``` - ๐Ÿ“– [Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml) **[โฌ† back to top](#table-of-contents)** ## Icons ```html ``` - ๐Ÿ“– [All About Favicons (And Touch Icons)](https://bitsofco.de/all-about-favicons-and-touch-icons/) - ๐Ÿ“– [Creating Pinned Tab Icons](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html) - ๐Ÿ“– [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet) - ๐Ÿ“– [Icons & Browser Colors](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/) **[โฌ† back to top](#table-of-contents)** ## Social ### Facebook Open Graph ```html ``` - ๐Ÿ“– [Facebook Open Graph Markup](https://developers.facebook.com/docs/sharing/webmasters#markup) - ๐Ÿ“– [Open Graph protocol](http://ogp.me/) - ๐Ÿ›  Test your page with the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) ### Twitter Card ```html ``` - ๐Ÿ“– [Getting started with cards โ€” Twitter Developers](https://dev.twitter.com/cards/getting-started) - ๐Ÿ›  Test your page with the [Twitter Card Validator](https://cards-dev.twitter.com/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](https://dev.twitter.com/web/overview/privacy#what-privacy-options-do-website-publishers-have). ```html ``` ### Google+ / Schema.org ```html ``` **Note:** This markup requires attributes to be added to your top html tag - ๐Ÿ›  Test your page with the [Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/) ### Pinterest Pinterest lets you prevent people from saving things from your website, according [to their help center](https://help.pinterest.com/en/articles/prevent-people-saving-things-pinterest-your-site). The `description` is optional. ```html ``` ### Facebook Instant Articles ```html ``` - ๐Ÿ“– [Creating Articles - Instant Articles](https://developers.facebook.com/docs/instant-articles/guides/articlecreate) - ๐Ÿ“– [Code Samples - Instant Articles](https://developers.facebook.com/docs/instant-articles/reference) ### OEmbed ```html ``` - ๐Ÿ“– [oEmbed format](https://oembed.com/) **[โฌ† back to top](#table-of-contents)** ## Browsers / Platforms ### Apple iOS ```html ``` - ๐Ÿ“– [Configuring Web Applications](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) ### Google Android ```html ``` ### Google Chrome ```html ``` ### Microsoft Internet Explorer ```html ``` Minimum required xml markup for `browserconfig.xml`: ```xml ``` - ๐Ÿ“– [Browser configuration schema reference](https://msdn.microsoft.com/en-us/library/dn320426.aspx) **[โฌ† back to top](#table-of-contents)** ## Browsers (Chinese) ### 360 Browser ```html ``` ### QQ Mobile Browser ```html ``` ### UC Mobile Browser ```html ``` - ๐Ÿ“– [UC Browser Docs](https://www.uc.cn/download/UCBrowser_U3_API.doc) **[โฌ† back to top](#table-of-contents)** ## App Links ```html ``` - ๐Ÿ“– [App Links](https://applinks.org/documentation/) **[โฌ† back to top](#table-of-contents)** ## Other Resources - ๐Ÿ“– [HTML5 Boilerplate Docs: The HTML](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md) - ๐Ÿ“– [HTML5 Boilerplate Docs: Extend and customize](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/extend.md) **[โฌ† back to top](#table-of-contents)** ## Related Projects - [Atom HTML Head Snippets](https://github.com/joshbuchea/atom-html-head-snippets) - Atom package for `HEAD` snippets - [Sublime Text HTML Head Snippets](https://github.com/marcobiedermann/sublime-head-snippets) - Sublime Text package for `HEAD` snippets - [head-it](https://github.com/hemanth/head-it) - CLI interface for `HEAD` snippets - [vue-head](https://github.com/ktquez/vue-head) - Manipulating the meta information of the `HEAD` tag for Vue.js **[โฌ† back to top](#table-of-contents)** ## Other Formats - ๐Ÿ“„ [PDF](https://gitprint.com/joshbuchea/HEAD/blob/master/README.md) **[โฌ† back to top](#table-of-contents)** ## Translations - ๐Ÿ‡ง๐Ÿ‡ท [Brazilian Portuguese](https://github.com/Webschool-io/HEAD) - ๐Ÿ‡จ๐Ÿ‡ณ [Chinese (Simplified)](https://github.com/Amery2010/HEAD) - ๐Ÿ‡ฉ๐Ÿ‡ช [German](https://github.com/Shidigital/HEAD) - ๐Ÿ‡ฎ๐Ÿ‡น [Italian](https://github.com/Fakkio/HEAD) - ๐Ÿ‡ฏ๐Ÿ‡ต [Japanese](https://coliss.com/articles/build-websites/operation/work/collection-of-html-head-elements.html) - ๐Ÿ‡ฐ๐Ÿ‡ท [Korean](https://github.com/Lutece/HEAD) - ๐Ÿ‡ท๐Ÿ‡บ [Russian/ะ ัƒััะบะธะน](https://github.com/Konfuze/HEAD) - ๐Ÿ‡ช๐Ÿ‡ธ [Spanish](https://github.com/alvaroadlf/HEAD) - ๐Ÿ‡น๐Ÿ‡ท [Turkish/Tรผrkรงe](https://github.com/mkg0/HEAD) **[โฌ† back to top](#table-of-contents)** ## 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 [gethead.info](https://gethead.info/) 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 [gethead.info](https://gethead.info/) website. We use [Jekyll](https://jekyllrb.com/) to deploy the `README.md` Markdown file through [GitHub Pages](https://pages.github.com/). All website related modifications must be directed here. You may want to go through the [Jekyll Docs](https://jekyllrb.com/docs/home/) and understand how Jekyll works before working on this branch. ### Contributors Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors). ## Author **[Josh Buchea](https://joshbuchea.com/)** ## License [![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/) **[โฌ† back to top](#table-of-contents)**