Skip to content

Instantly share code, notes, and snippets.

@andresousa

andresousa/html-head-boilerplate.html

Forked from nunosans/html-head-boilerplate.html
Created November 20, 2012 18:04
Show Gist options
  • Save andresousa/4119683 to your computer and use it in GitHub Desktop.
Save andresousa/4119683 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Head Boilerplate & Reference
Raw
html-head-boilerplate.html
<!doctype html>
<html manifest="index.appcache"> <!-- HTML5 offline storage -->
<head>
<title>Title of this web page</title>
<!-- Technical Formating Meta Tags -->
<meta http-equiv="content-type" content="charset=utf-8">
<meta http-equiv="content-language" content="en-gb">
<!-- Authoring Meta Tags -->
<meta name="author" content="Author Name">
<meta name="publisher" content="Publisher Name">
<meta name="copyright" content="Copyright Owner">
<meta name="host" content="example.com">
<meta name="generator" content="Text Editor Name">
<!-- 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 Meta Tags -->
<meta name="description" content="Site description">
<meta name="keywords" content="site, keywords">
<meta name="revisit-after" content="10 days">
<!-- Search engine robots Meta Tags
Name Attributes:
googlebot = Google bots only
msnbot = MSN bots only
slurp = Yahoo! bots only
teoma = ASK bots only
robots = All bots
Content Attributes:
index = Include this page in the index
noindex = Prevents the page from being included in the index
follow = Follow links on the page
nofollow = Prevents Google robots from following any links on the page
none = Equivalent to "nofollow, noindex" (Apply to test sites)
noodp = Blocks the Open Directory Project (dmoz.org) description of the page
noydir = Same as above but for Yahoo!
noarchive = Prevents a cached copy of this page from being available in the search results (Apply to test sites)
nosnippet = Prevents a description from appearing below the page in the search results, as well as prevents caching of the page
-->
<meta name="robots" content="noindex, nofollow, noodp, noydir, noarchive">
<!-- Browser Compability Meta Tags -->
<meta http-equiv="x-ua-compatible" content="ie=7"> <!-- Render Internet Explorer v7 standards mode regardless of doctype -->
<meta http-equiv="x-ua-compatible" content="ie=8"> <!-- Render Internet Explorer v8 standards mode regardless of doctype -->
<meta http-equiv="x-ua-compatible" content="ie=emulateie7"> <!-- Render according to doctype, standards is v7 and quirks is v5 -->
<meta http-equiv="x-ua-compatible" content="ie=emulateie8"> <!-- Render according to doctype, standards is v8 and quirks is v5 -->
<meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Render using latest version of Internet Explorer -->
<meta http-equiv="x-ua-compatible" content="ie=5"> <!-- Render using Internet Explorer v7 quirks mode, which is like v5 -->
<meta http-equiv="x-ua-compatible" content="ie=5; ie=8"> <!-- Render using v8 if available, otherwise use v5 instead of v6 or v7 -->
<meta http-equiv="x-ua-compatible" content="chrome=1"> <!-- Render using Chrome if available -->
<meta http-equiv="x-ua-compatible" content="ie=emulateie7; chrome=1"> <!-- Render Chrome if available or Internet Explorer v7 -->
<!-- Social Media Meta Tags-->
<meta name="pinterest" content="nopin"> <!-- Prevents sharing of content by Pinterest users -->
<!-- Open Graph Meta Tags (ogp.me) -->
<meta property="og:image" content="//example.com/image.jpg"> <!-- Web page thumbnail -->
<meta property="og:image" content="//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="//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 protected]"> <!-- Contact email -->
<meta property="og:phone_number" content="+44 123 456 7622"> <!-- Contact phone number -->
<meta property="og:video" content="//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="//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-->
<!-- 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 (use both) -->
<link rel="icon" href="//example.com/favicon.ico">
<link rel="shortcut icon" href="//example.com/favicon.ico">
<!-- Apple iOS Icons (Add "-precomposed" to the file name to prevent iOS icon effects) -->
<link rel="apple-touch-icon" href="//example.com/apple-touch-icon-57x57-precomposed.png" sizes="57"> <!-- iPhone -->
<link rel="apple-touch-icon" href="//example.com/apple-touch-icon-114x114-precomposed.png" sizes="114x114"> <!-- iPhone Retina -->
<link rel="apple-touch-icon" href="//example.com/apple-touch-icon-72x72-precomposed.png" sizes="72x72"> <!-- iPad -->
<link rel="apple-touch-icon" href="//example.com/apple-touch-icon-144x144-precomposed.png" sizes="144x144"> <!-- iPad Retina -->
<!-- Apple iOS Startup Image -->
<link rel="apple-touch-startup-image" href="/graphics/apple-touch-startup-image-320x460.png" media="screen and (max-device-width: 320px)">
<link rel="apple-touch-startup-image" href="/graphics/apple-touch-startup-image-640x920.png" media="screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="/graphics/apple-touch-startup-image-748x1024.png" media="screen and (min-device-width: 768) and (max-device-width: 1024px) and (orientation:landscape)">
<link rel="apple-touch-startup-image" href="/graphics/apple-touch-startup-image-1496x2048.png" media="screen and (min-device-width: 768) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="/graphics/apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 768) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="/graphics/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 768) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)">
<!-- Apple iOS Meta Tags
Viewport content attributes:
width = [points, "device-width"] Specify the viewport width, "device-width" will adjust with rotation.
height = [points, "device-height"] Specify the viewport height, "device-height" will adjust with rotation.
user-scalable = [yes, no] Pinch-to-zoom scaling
initial-scale = [1.0] Specify an initial scale value, 1.0 = 100% Zoom
minimum-scale = [0.5] Specify a minimum scale value, 0.5 = 50% Zoom
maximum-scale = [2.0] Specify a maximum scale value, 2.0 = 200% Zoom
-->
<meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = no">
<meta name="format-detection" content="telephone = no"> <!-- Disables automatic detection of possible phone numbers -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Hide Safari UI Components ["yes", "no"] -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- Status bar style ["default", "black", "black-translucent"] -->
<!-- Stylesheets -->
<link rel="stylesheet" href="/stylesheets/styles.css">
<!-- Typekit -->
<script src="//use.typekit.com/XXXXXXX.js"></script>
<!-- Scripts -->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="/javascript/scripts.js"></script>
<!-- Humans -->
<link rel="author" href="/humans.txt">
</head>
<body>
<!-- ... -->
<!-- Analytics -->
<script src="//mint.example.com/?js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment