https://github.com/joshbuchea/head
A simple guide to HTML <head> elements
https://github.com/joshbuchea/head
favicon frontend-development head html html5 list meta-tags reference seo twitter-cards web-development
Last synced: about 2 hours ago
JSON representation
A simple guide to HTML <head> elements
- Host: GitHub
- URL: https://github.com/joshbuchea/head
- Owner: joshbuchea
- Created: 2016-04-20T20:05:37.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-06-21T17:54:29.000Z (over 1 year ago)
- Last Synced: 2024-10-14T18:24:34.796Z (over 1 year ago)
- Topics: favicon, frontend-development, head, html, html5, list, meta-tags, reference, seo, twitter-cards, web-development
- Homepage: https://htmlhead.dev
- Size: 644 KB
- Stars: 29,981
- Watchers: 695
- Forks: 1,913
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-systools - Head
- awesome-frontend - <head> cheatsheet - <head> 标签的内容清单
- awesome-front-end - <head> cheatsheet - <head> 标签的内容清单
README
# 🤯 HEAD
> A simple guide to HTML `` elements
[](https://github.com/joshbuchea/HEAD/graphs/contributors)
[](https://creativecommons.org/publicdomain/zero/1.0/)
[](https://hachyderm.io/@joshbuchea)
## 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)
- [Schema.org](#schemaorg)
- [Pinterest](#pinterest)
- [Facebook Instant Articles](#facebook-instant-articles)
- [OEmbed](#oembed)
- [QQ/Wechat](#qqwechat)
- [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
```
`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
**[⬆ 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
/* ... */
// function(s) go here
```
**[⬆ 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
> 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](https://developers.facebook.com/docs/sharing/webmasters#markup)
```html
```
- 📖 [Open Graph protocol](http://ogp.me/)
- 🛠 Test your page with the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
### 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](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards)
```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
```
### Schema.org
```html
```
**Note:** These meta tags require the `itemscope` and `itemtype` attributes to be added to the `` tag.
- 📖 [Getting Started - schema.org](https://schema.org/docs/gs.html)
- 🛠 Test your page with the [Rich Results Test](https://search.google.com/test/rich-results)
### Pinterest
Pinterest lets you prevent people from saving things from your website, according [to their help center](https://help.pinterest.com/en/business/article/prevent-saves-to-pinterest-from-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/)
### QQ/Wechat
Users share web pages to qq wechat will have a formatted message
```html
```
- 📖 [Code Format Docs](http://open.mobile.qq.com/api/mqq/index#api:setShareInfo)
**[⬆ back to top](#table-of-contents)**
### Fediverse
Some Fediverse software such as Mastodon allow you to put your Fediverse handle in a meta tag which will show up in embeds to your website. In addition to the tag you will also need to add your domain to the list of allowed websites in "Settings -> Public profile -> Verification -> Author attribution" (for Mastodon).
```html
```
**[⬆ 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://developers.facebook.com/docs/applinks)
**[⬆ 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
- 🇮🇩 [Bahasa](https://github.com/rijdz/HEAD)
- 🇧🇷 [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 reflected on the [htmlhead.dev](https://htmlhead.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
#### 2. `gh-pages`
This branch is responsible for the [htmlhead.dev](https://htmlhead.dev/) website. We use [Jekyll](https://jekyllrb.com/) to deploy the `README.md` markdown file to [GitHub Pages](https://pages.github.com/). All website related modifications should be made in this branch.
You may find it helpful to review the [Jekyll Docs](https://jekyllrb.com/docs/home/) and understand how Jekyll works before working in this branch.
## 🌟 Contributors
Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors) 🤩
## 👤 Author
**Josh Buchea**
- GitHub: [@joshbuchea](https://github.com/joshbuchea)
- Mastodon: [@joshbuchea@hachyderm.io](https://hachyderm.io/@joshbuchea)
## 💛 Support
If this project was helpful for you or your organization, please considering supporting my work directly:
- 💛 [Sponsor me on GitHub](https://github.com/sponsors/joshbuchea)
- ⭐️ [Star this project on GitHub](https://github.com/joshbuchea/HEAD)
- 🐙 [Follow me on GitHub](https://github.com/joshbuchea)
- 🐘 [Follow me on Mastodon](https://hachyderm.io/@joshbuchea)
Everything helps, thanks! 🙏
— Josh
## 📝 License
[](https://creativecommons.org/publicdomain/zero/1.0/)
**[⬆ back to top](#table-of-contents)**