mirror of https://github.com/joshbuchea/HEAD.git
Sync README
This commit is contained in:
Josh Buchea
GitHub
parent
c18ab1c30c
commit
2da268f7ad
69
README.md
69
README.md
|
|
@ -11,12 +11,13 @@ A list of everything that \*could\* go in the `<head>` of your document
|
|||
- [Elements](#elements)
|
||||
- [Meta](#meta)
|
||||
- [Link](#link)
|
||||
- [Favicons](#favicons)
|
||||
- [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)
|
||||
|
|
@ -48,7 +49,7 @@ Below are the essential elements for any web document (websites/apps):
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- † -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!--
|
||||
<!--
|
||||
The above 3 meta tags *must* come first in the <head>
|
||||
to consistently ensure proper document rendering.
|
||||
Any other head element should come *after* these tags.
|
||||
|
|
@ -124,6 +125,9 @@ These elements provide information for how a document should be perceived, and r
|
|||
<!-- Name of web application (only should be used if the website is used as an app) -->
|
||||
<meta name="application-name" content="Application Name">
|
||||
|
||||
<!-- Theme Color for Chrome, Firefox OS and Opera -->
|
||||
<meta name="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. -->
|
||||
<meta name="description" content="A description of the page">
|
||||
|
|
@ -264,20 +268,25 @@ These elements provide information for how a document should be perceived, and r
|
|||
|
||||
**[⬆ back to top](#table-of-contents)**
|
||||
|
||||
## Favicons
|
||||
## Icons
|
||||
|
||||
``` html
|
||||
<!-- For IE 10 and below -->
|
||||
<!-- Place favicon.ico in the root directory - no tag necessary -->
|
||||
|
||||
<!-- For IE 11, Edge, Chrome, Firefox, Safari, Opera -->
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png">
|
||||
<!-- Icon in the highest resolution we need it for -->
|
||||
<link rel="icon" sizes="192x192" href="/path/to/icon.png">
|
||||
|
||||
<!-- Apple Touch Icon (reuse 192px icon.png) -->
|
||||
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
|
||||
|
||||
<!-- Safari Pinned Site -->
|
||||
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">
|
||||
```
|
||||
|
||||
- 📖 [All About Favicons (And Touch Icons)](https://bitsofco.de/all-about-favicons-and-touch-icons/)
|
||||
- 📖 [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)**
|
||||
|
||||
|
|
@ -405,7 +414,7 @@ Pinterest lets you prevent people from saving things from your website, accordin
|
|||
|
||||
```html
|
||||
<!-- Pinned Site -->
|
||||
<link rel="mask-icon" href="/path/to/icon.svg" color="red">
|
||||
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">
|
||||
```
|
||||
|
||||
### Google Android
|
||||
|
|
@ -444,7 +453,7 @@ Since Chrome 31, you can set up your web app to "app mode" like Safari.
|
|||
<meta name="mobile-web-app-capable" content="yes">
|
||||
|
||||
<!-- Homescreen Icon -->
|
||||
<link rel="icon" sizes="192x192" href="/path/to/highres-icon.png">
|
||||
<link rel="icon" sizes="192x192" href="/path/to/icon.png">
|
||||
```
|
||||
|
||||
- 📖 [Add to Homescreen - Google Chrome](https://developer.chrome.com/multidevice/android/installtohomescreen)
|
||||
|
|
@ -477,27 +486,6 @@ Since Chrome 31, you can set up your web app to "app mode" like Safari.
|
|||
|
||||
**[⬆ back to top](#table-of-contents)**
|
||||
|
||||
## App Links
|
||||
|
||||
``` html
|
||||
<!-- iOS -->
|
||||
<meta property="al:ios:url" content="applinks://docs">
|
||||
<meta property="al:ios:app_store_id" content="12345">
|
||||
<meta property="al:ios:app_name" content="App Links">
|
||||
|
||||
<!-- Android -->
|
||||
<meta property="al:android:url" content="applinks://docs">
|
||||
<meta property="al:android:app_name" content="App Links">
|
||||
<meta property="al:android:package" content="org.applinks">
|
||||
|
||||
<!-- Web fall back -->
|
||||
<meta property="al:web:url" content="http://applinks.org/documentation">
|
||||
```
|
||||
|
||||
- 📖 [App Links](http://applinks.org/documentation/)
|
||||
|
||||
**[⬆ back to top](#table-of-contents)**
|
||||
|
||||
## Browsers (Chinese)
|
||||
|
||||
### 360 Browser
|
||||
|
|
@ -549,6 +537,27 @@ Since Chrome 31, you can set up your web app to "app mode" like Safari.
|
|||
|
||||
**[⬆ back to top](#table-of-contents)**
|
||||
|
||||
## App Links
|
||||
|
||||
``` html
|
||||
<!-- iOS -->
|
||||
<meta property="al:ios:url" content="applinks://docs">
|
||||
<meta property="al:ios:app_store_id" content="12345">
|
||||
<meta property="al:ios:app_name" content="App Links">
|
||||
|
||||
<!-- Android -->
|
||||
<meta property="al:android:url" content="applinks://docs">
|
||||
<meta property="al:android:app_name" content="App Links">
|
||||
<meta property="al:android:package" content="org.applinks">
|
||||
|
||||
<!-- Web fall back -->
|
||||
<meta property="al:web:url" content="http://applinks.org/documentation">
|
||||
```
|
||||
|
||||
- 📖 [App Links](http://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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue