Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 9 days ago
JSON representation

A simple guide to HTML <head> elements

Awesome Lists containing this project

README 

        
# ๐Ÿคฏ HEAD



> A simple guide to HTML `` elements



[![Contributors](https://img.shields.io/github/contributors/joshbuchea/head.svg?style=for-the-badge)](https://github.com/joshbuchea/HEAD/graphs/contributors)

[![CC0](https://img.shields.io/badge/license-CC0-green.svg?style=for-the-badge)](https://creativecommons.org/publicdomain/zero/1.0/)

[![Follow @joshbuchea on Mastodon](https://img.shields.io/badge/Follow_@joshbuchea-purple?logo=mastodon&logoColor=white&style=for-the-badge)](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)**



## 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: [@[email protected]](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



[![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/)



**[โฌ† back to top](#table-of-contents)**