Last active
May 2, 2024 03:04
-
-
Save nunosans/3028849 to your computer and use it in GitHub Desktop.
HTML Head Boilerplate & Reference
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<!-- Priority tags. These must come first. --> | |
<meta charset="utf-8"> | |
<meta http-equiv="x-ua-compatible" content="ie=edge; chrome=1"> <!-- Render Chrome if available or using latest version of Internet Explorer (Recommended). --> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
<!-- Document Title --> | |
<title>Page Title</title> | |
<!-- Allows control over where resources are loaded from. Place as early in the document as possible, only applies to content below this tag. --> | |
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"> | |
<!-- Base URL to use for all relative URLs contained within the document --> | |
<base href="https://example.com/"> | |
<!-- Geo Positioning Meta Tags. --> | |
<meta name="geo.position" content="50.97590;0.01722"> | |
<meta name="geo.region" content="GB"> | |
<meta name="geo.placename" content="London, United Kingdom"> | |
<meta name="ICBM" content="50.9759, 0.0172"> | |
<meta name="DC.title" content="Location Name"> | |
<!-- Search Eengine and Browser Meta Tags. --> | |
<meta name="description" content=""> <!-- Keep under 500 characters --> | |
<meta name="abstract" content=""> <!-- Keep uder 100 characters --> | |
<meta name="rating" content=""> <!-- General, 14 Years, Mature or Restricted --> | |
<!-- Search engine robots Meta Tags. --> | |
<meta name="robots" content="noindex, nofollow, noodp, noydir, noarchive"> <!-- Disable from all search engines.--> | |
<!-- Open Graph Meta Tags (ogp.me) --> | |
<meta property="og:image" content="http://example.com/image.jpg"> <!-- Web page thumbnail --> | |
<meta property="og:image" content="http://example.com/image2.jpg"> <!-- Web page thumbnail (can be multiple) --> | |
<meta property="og:site_name" content="Site Name"> <!-- Web site title --> | |
<meta property="og:title" content="Page Title"> <!-- Web page title --> | |
<meta property="og:description" content="Description of this web page"> <!-- Web page description --> | |
<meta property="og:type" content="article"> <!-- Content type ["product", "blog", "website", "book", "movie", ... ] --> | |
<meta property="og:url" content="http://example.com/index.html"> <!-- Url to this web page --> | |
<meta property="og:locale" content="en_GB"> <!-- Main Language --> | |
<meta property="og:locale:alternate" content="fr_FR"> <!-- Alternate Language --> | |
<meta property="og:locale:alternate" content="es_ES"> <!-- Alternate Language --> | |
<meta property="og:latitude" content="50.97590"> <!-- Geographical coordenate --> | |
<meta property="og:longitude" content="0.017221"> <!-- Geographical coordenate --> | |
<meta property="og:street-address" content="Flat 1, 26 Street Name"> <!-- Postal Address --> | |
<meta property="og:locality" content="London"> <!-- Locality --> | |
<meta property="og:region" content="London"> <!-- Region --> | |
<meta property="og:postal-code" content="N1 PLE"> <!-- Post code --> | |
<meta property="og:country-name" content="UK"> <!-- Country --> | |
<meta property="og:email" content="email@example.com"> <!-- Contact email --> | |
<meta property="og:phone_number" content="+44 123 456 7622"> <!-- Contact phone number --> | |
<meta property="og:video" content="http://example.com/video.flv"> <!-- Video file url--> | |
<meta property="og:video:height" content="640"> <!-- Video height --> | |
<meta property="og:video:width" content="385"> <!-- Video width --> | |
<meta property="og:video:type" content="application/x-shockwave-flash"> <!-- Video file format type --> | |
<meta property="og:audio" content="http://example.com/audio.mp3"> <!-- Audio file url --> | |
<meta property="og:audio:title" content="Song Title"> <!-- Audio title --> | |
<meta property="og:audio:artist" content="Name of Band"> <!-- Audio artist --> | |
<meta property="og:audio:album" content="Album Title"> <!-- Audio album title--> | |
<meta property="og:audio:type" content="application/mp3"> <!-- Audio file format type --> | |
<meta property="og:upc" content="885909367481"> <!-- UPC EAN barcodes--> | |
<meta property="og:isbn" content="1873520786"> <!-- Book ISBN number--> | |
<!-- Facebook Meta Tags. --> | |
<meta property="fb:app_id" content="123456789"> | |
<!-- Twitter Meta Tags. --> | |
<meta name="twitter:card" content="summary"> | |
<meta name="twitter:site" content="@site_account"> | |
<meta name="twitter:creator" content="@individual_account"> | |
<meta name="twitter:url" content="https://example.com/page.html"> | |
<meta name="twitter:title" content="Content Title"> | |
<meta name="twitter:description" content="Content description less than 200 characters"> | |
<meta name="twitter:image" content="https://example.com/image.jpg"> | |
<!-- Pinterest. --> | |
<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!"> <!-- Prevents sharing of content by Pinterest users. --> | |
<!-- News Feed Meta Tags. --> | |
<link rel="alternate" type="application/rss+xml" title="Example (Feedburner)" href="//feeds.feedburner.com/example"> | |
<link rel="alternate" type="application/atom+xml" title="Example (Atom 0.3)" href="//example.com/atom.xml"> | |
<link rel="alternate" type="application/rss+xml" title="Example (RSS 2.0)" href="//example.com/rss.xml"> | |
<!-- Favicon Meta Tags. --> | |
<link rel="icon" href="/graphics/favicon.ico"> | |
<link rel="icon" href="/graphics/favicon-16.png" sizes="16x16" type="image/png"> | |
<link rel="icon" href="/graphics/favicon-32.png" sizes="32x32" type="image/png"> | |
<link rel="icon" href="/graphics/favicon-48.png" sizes="48x48" type="image/png"> | |
<link rel="icon" href="/graphics/favicon-62.png" sizes="62x62" type="image/png"> | |
<link rel="icon" href="/graphics/favicon-128.png" sizes="128x128" type="image/png"> | |
<link rel="icon" href="/graphics/favicon-192.png" sizes="192x192" type="image/png"> | |
<!-- Web App Settings. --> | |
<meta name="application-name" content="Application Name"> | |
<meta name="mobile-web-app-capable" content="yes"> | |
<!-- Apple iOS Settings. --> | |
<meta name="apple-mobile-web-app-capable" content="yes"> | |
<meta name="apple-mobile-web-app-status-bar-style" content="black"> | |
<meta name="apple-mobile-web-app-title" content="App Title"> | |
<meta name="apple-itunes-app" content="app-id=APP_ID, affiliate-data=AFFILIATE_ID, app-argument=http/url-sample.com"> <!-- App Banner. --> | |
<meta name="format-detection" content="telephone=no"> | |
<link rel="apple-touch-icon" href="/graphics/apple-touch-icon.png"> | |
<link rel="apple-touch-icon-precomposed" href="/graphics/apple-touch-icon-precomposed.png"> | |
<link rel="apple-touch-icon" sizes="57x57" href="/graphics/apple-icon-57.png"> | |
<link rel="apple-touch-icon" sizes="72x72" href="/graphics/apple-icon-72.png"> | |
<link rel="apple-touch-icon" sizes="114x114" href="/graphics/apple-icon-114.png"> | |
<link rel="apple-touch-icon" sizes="144x144" href="/graphics/apple-icon-144.png"> | |
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com"> <!-- Apple iOS app deep linking. --> | |
<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"> | |
<!-- Google Android. --> | |
<meta name="theme-color" content="#E64545"> | |
<meta name="google-play-app" content="app-id=package-name"> | |
<link rel="alternate" href="android-app://package-name/http/url-sample.com"> <!-- Android app deep linking. --> | |
<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"> | |
<!-- Apple Safari Pinned Site. --> | |
<link rel="mask-icon" href="path/to/icon.svg" color="red"> | |
<!-- Google Chrome. --> | |
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"> | |
<meta name="google" value="notranslate"> | |
<!-- Windows Internet Explorer. --> | |
<meta http-equiv="cleartype" content="on"> | |
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible"> | |
<meta name="msapplication-tap-highlight" content="no"> | |
<meta name="application-name" content="Contoso Pinned Site Caption"> | |
<meta name="msapplication-tooltip" content="Example Tooltip Text"> | |
<meta name="msapplication-starturl" content="/"> | |
<meta name="msapplication-allowDomainApiCalls" content="true"> | |
<meta name="msapplication-allowDomainMetaTags" content="true"> | |
<meta name="msapplication-badge" content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml"> | |
<meta name="msapplication-navbutton-color" content="#FF3300"> | |
<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile"> | |
<meta name="msapplication-square150x150logo" content="/graphics/ie-logo.png"> | |
<meta name="msapplication-square310x310logo" content="/graphics/ie-logo-large.png"> | |
<meta name="msapplication-square70x70logo" content="/graphics/ie-logo-small.png"> | |
<meta name="msapplication-wide310x150logo" content="/graphics/ie-logo-wide.png"> | |
<meta name="msapplication-task" content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico"> | |
<meta name="msapplication-task-separator" content="1"> | |
<meta name="msapplication-TileColor" content="#FF3300"> | |
<meta name="msapplication-TileImage" content="path/to/tileimage.jpg"> | |
<meta name="msapplication-window" content="width=1024;height=768"> | |
<!-- External Stylesheets. --> | |
<link rel="stylesheet" href="/stylesheets/styles.css"> | |
<!-- Typekit. --> | |
<script src="//use.typekit.com/XXXXXXX.js"></script> | |
<!-- Humans --> | |
<link rel="author" href="/humans.txt"> | |
<link rel="copyright" href="/copyright.html"> | |
<!-- Alternative Languages. --> | |
<link rel="alternate" href="https://ja.example.com/" hreflang="ja"> | |
<!-- HMTL5 Prefetching --> | |
<link rel="prefetch" href="//example.com"> <!-- Prefetch the full page --> | |
<link rel="prefetch" href="//example.com/sprite.png"> <!-- Prefetch a single asset --> | |
</head> | |
<body> | |
<!-- ... --> | |
<!-- External Scripts. --> | |
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script> <!-- Specific jQuery version --> | |
<script src="//code.jquery.com/jquery-latest.min.js"></script> <!-- Latest jQuery version --> | |
<script src="/javascripts/scripts.js"></script> | |
<!-- Google Analytics. --> | |
<script type="text/javascript"> | |
var _gaq = _gaq || []; | |
_gaq.push(['_setAccount', 'UA-XXXXXXXX-XX']); | |
_gaq.push(['_trackPageview']); | |
(function() { | |
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | |
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : '//www') + '.google-analytics.com/ga.js'; | |
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment