Skip to content
Permalink
Newer
Older
100755 639 lines (464 sloc) 22.8 KB
Jan 28, 2020
1
[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation
2
table of contents](TOC.md)
3
4
# Extend and customise HTML5 Boilerplate
5
6
Here is some useful advice for how you can make your project with HTML5
7
Boilerplate even better. We don't want to include it all by default, as
8
not everything fits with everyone's needs.
9
10
11
* [App Stores](#app-stores)
12
* [DNS prefetching](#dns-prefetching)
13
* [Google Universal Analytics](#google-universal-analytics)
14
* [Internet Explorer](#internet-explorer)
15
* [Miscellaneous](#miscellaneous)
16
* [News Feeds](#news-feeds)
17
* [Search](#search)
18
* [Social Networks](#social-networks)
19
* [URLs](#urls)
20
* [Web Apps](#web-apps)
21
* [security.txt](#security.txt)
22
23
## App Stores
24
25
### Smart App Banners in iOS 6+ Safari
26
27
Stop bothering everyone with gross modals advertising your entry in the
28
App Store. Including the following [meta tag](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html) will unobtrusively give the user the option to download your iOS app, or open it with some data about the user's current state on the website.
29
30
```html
31
<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">
32
```
33
34
## DNS prefetching
35
36
In short, DNS Prefetching is a method of informing the browser of domain names
37
referenced on a site so that the client can resolve the DNS for those hosts,
38
cache them, and when it comes time to use them, have a faster turn around on
39
the request.
40
41
### Implicit prefetches
42
43
There is a lot of prefetching done for you automatically by the browser. When
44
the browser encounters an anchor in your html that does not share the same
45
domain name as the current location the browser requests, from the client OS,
46
the IP address for this new domain. The client first checks its cache and
47
then, lacking a cached copy, makes a request from a DNS server. These requests
48
happen in the background and are not meant to block the rendering of the
49
page.
50
51
The goal of this is that when the foreign IP address is finally needed it will
52
already be in the client cache and will not block the loading of the foreign
53
content. Fewer requests result in faster page load times. The perception of this
54
is increased on a mobile platform where DNS latency can be greater.
55
56
#### Disable implicit prefetching
57
58
```html
59
<meta http-equiv="x-dns-prefetch-control" content="off">
60
```
61
62
Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still
63
prefetch any explicit dns-prefetch links.
64
65
**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM
66
FOREIGN DOMAINS.
67
68
### Explicit prefetches
69
70
Typically the browser only scans the HTML for foreign domains. If you have
71
resources that are outside of your HTML (a javascript request to a remote
72
server or a CDN that hosts content that may not be present on every page of
73
your site, for example) then you can queue up a domain name to be prefetched.
74
75
```html
76
<link rel="dns-prefetch" href="//example.com">
77
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
78
```
79
80
You can use as many of these as you need, but it's best if they are all
81
immediately after the [Meta
82
Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset)
83
element (which should go right at the top of the `head`), so the browser can
84
act on them ASAP.
85
86
#### Common Prefetch Links
87
88
Amazon S3:
89
90
```html
91
<link rel="dns-prefetch" href="//s3.amazonaws.com">
92
```
93
94
Google APIs:
95
96
```html
97
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
98
```
99
100
Microsoft Ajax Content Delivery Network:
101
102
```html
103
<link rel="dns-prefetch" href="//ajax.microsoft.com">
104
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
105
```
106
107
### Further reading about DNS prefetching
108
109
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control
110
* https://dev.chromium.org/developers/design-documents/dns-prefetching
111
* https://blogs.msdn.microsoft.com/ie/2011/03/17/internet-explorer-9-network-performance-improvements/
112
113
114
## Google Universal Analytics
115
116
### More tracking settings
117
118
The [optimized Google Universal Analytics
119
snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
120
included with HTML5 Boilerplate includes something like this:
121
122
```js
123
ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');
124
```
125
126
To customize further, see Google's [Advanced
127
Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/),
128
[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages),
129
and [Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) Docs.
130
131
### Anonymize IP addresses
132
133
In some countries, no personal data may be transferred outside jurisdictions
134
that do not have similarly strict laws (i.e. from Germany to outside the EU).
135
Thus a webmaster using the Google Universal Analytics may have to ensure that
136
no personal (trackable) data is transferred to the US. You can do that with
137
[the `ga('set', 'anonymizeIp', true);`
138
parameter](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip)
139
before sending any events/pageviews. In use it looks like this:
140
141
```js
142
ga('create', 'UA-XXXXX-X', 'auto');
143
ga('set', 'anonymizeIp', true);
144
ga('send', 'pageview');
145
```
146
147
### Track jQuery AJAX requests in Google Analytics
148
149
An article by @JangoSteve explains how to [track jQuery AJAX requests in Google
150
Analytics](https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/).
151
152
Add this to `plugins.js`:
153
154
```js
155
/*
156
* Log all jQuery AJAX requests to Google Analytics
157
* See: https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
158
*/
159
if (typeof ga !== "undefined" && ga !== null) {
160
$(document).ajaxSend(function(event, xhr, settings){
161
ga('send', 'pageview', settings.url);
162
});
163
}
164
```
165
166
### Track JavaScript errors in Google Analytics
167
168
Add this function after `ga` is defined:
169
170
```js
171
(function(window){
172
var undefined,
173
link = function (href) {
174
var a = window.document.createElement('a');
175
a.href = href;
176
return a;
177
};
178
window.onerror = function (message, file, line, column) {
179
var host = link(file).hostname;
180
ga('send', {
181
'hitType': 'event',
182
'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
183
'eventAction': message,
184
'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
185
'nonInteraction': 1
186
});
187
};
188
}(window));
189
```
190
191
### Track page scroll
192
193
Add this function after `ga` is defined:
194
195
```js
196
$(function(){
197
var isDuplicateScrollEvent,
198
scrollTimeStart = new Date,
199
$window = $(window),
200
$document = $(document),
201
scrollPercent;
202
203
$window.scroll(function() {
204
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
205
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
206
isDuplicateScrollEvent = 1;
207
ga('send', 'event', 'scroll',
208
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
209
);
210
}
211
});
212
});
213
```
214
215
## Internet Explorer
216
217
### IE Pinned Sites
218
219
Enabling your application for pinning will allow IE users to add it to their
220
Windows Taskbar and Start Menu. This comes with a range of new tools that you
221
can easily configure with the elements below. See more [documentation on IE
222
Pinned Sites](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg491731(v%3dvs.85)).
223
224
### Name the Pinned Site for Windows
225
226
Without this rule, Windows will use the page title as the name for your
227
application.
228
229
```html
230
<meta name="application-name" content="Sample Title">
231
```
232
233
### Give your Pinned Site a tooltip
234
235
You know — a tooltip. A little textbox that appears when the user holds their
236
mouse over your Pinned Site's icon.
237
238
```html
239
<meta name="msapplication-tooltip" content="A description of what this site does.">
240
```
241
242
### Set a default page for your Pinned Site
243
244
If the site should go to a specific URL when it is pinned (such as the
245
homepage), enter it here. One idea is to send it to a special URL so you can
246
track the number of pinned users, like so:
247
`https://www.example.com/index.html?pinned=true`
248
249
```html
250
<meta name="msapplication-starturl" content="https://www.example.com/index.html?pinned=true">
251
```
252
253
### Recolor IE's controls manually for a Pinned Site
254
255
IE will automatically use the overall color of your Pinned Site's favicon to
256
shade its browser buttons. UNLESS you give it another color here. Only use
257
named colors (`red`) or hex colors (`#ff0000`).
258
259
```html
260
<meta name="msapplication-navbutton-color" content="#ff0000">
261
```
262
263
### Manually set the window size of a Pinned Site
264
265
If the site should open at a certain window size once pinned, you can specify
266
the dimensions here. It only supports static pixel dimensions. 800x600
267
minimum.
268
269
```html
270
<meta name="msapplication-window" content="width=800;height=600">
271
```
272
273
### Jump List "Tasks" for Pinned Sites
274
275
Add Jump List Tasks that will appear when the Pinned Site's icon gets a
276
right-click. Each Task goes to the specified URL, and gets its own mini icon
277
(essentially a favicon, a 16x16 .ICO). You can add as many of these as you
278
need.
279
280
```html
281
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
282
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
283
```
284
285
### (Windows 8) High quality visuals for Pinned Sites
286
287
Windows 8 adds the ability for you to provide a PNG tile image and specify the
288
tile's background color. [Full details on the IE
289
blog](https://blogs.msdn.microsoft.com/ie/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8/).
290
291
* Create a 144x144 image of your site icon, filling all of the canvas, and
292
using a transparent background.
293
* Save this image as a 32-bit PNG and optimize it without reducing
294
colour-depth. It can be named whatever you want (e.g. `metro-tile.png`).
295
* To reference the tile and its color, add the HTML `meta` elements described
296
in the IE Blog post.
297
298
### (Windows 8) Badges for Pinned Sites
299
300
IE will poll an XML document for badge information to display on your app's
301
tile in the Start screen. The user will be able to receive these badge updates
302
even when your app isn't actively running. The badge's value can be a number,
303
or one of a predefined list of glyphs.
304
305
* [Tutorial on IEBlog with link to badge XML schema](https://blogs.msdn.microsoft.com/ie/2012/04/03/pinned-sites-in-windows-8/)
306
* [Available badge values](https://docs.microsoft.com/en-us/uwp/schemas/tiles/badgeschema/element-badge)
307
308
```html
309
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=https://www.example.com/path/to/file.xml">
310
```
311
312
### Disable link highlighting upon tap in IE10
313
314
Similar to [-webkit-tap-highlight-color](https://davidwalsh.name/mobile-highlight-color)
315
in iOS Safari. Unlike that CSS property, this is an HTML meta element, and its
316
value is boolean rather than a color. It's all or nothing.
317
318
```html
319
<meta name="msapplication-tap-highlight" content="no" />
320
```
321
322
You can read about this useful element and more techniques in
323
[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/)
324
325
## Search
326
327
### Direct search spiders to your sitemap
328
329
After creating a [sitemap](https://www.sitemaps.org/protocol.html)
330
331
Submit it to search engine tool:
332
* [Google](https://www.google.com/webmasters/tools/sitemap-list)
333
* [Bing](https://www.bing.com/toolbox/webmaster)
334
* [Yandex](https://webmaster.yandex.com/)
335
* [Baidu](https://zhanzhang.baidu.com/)
336
OR
337
Insert the following line anywhere in your robots.txt file, specifying the path to your sitemap:
338
```
339
Sitemap: https://example.com/sitemap_location.xml
340
```
341
342
### Hide pages from search engines
343
344
According to Heather Champ, former community manager at Flickr, you should not
345
allow search engines to index your "Contact Us" or "Complaints" page if you
346
value your sanity. This is an HTML-centric way of achieving that.
347
348
```html
349
<meta name="robots" content="noindex">
350
```
351
352
**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES.
353
354
### Firefox and IE Search Plugins
355
356
Sites with in-site search functionality should be strongly considered for a
357
browser search plugin. A "search plugin" is an XML file which defines how your
358
plugin behaves in the browser. [How to make a browser search
359
plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin).
360
361
```html
362
<link rel="search" title="" type="application/opensearchdescription+xml" href="">
363
```
364
365
366
## Miscellaneous
367
368
* Use [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).
369
370
* Use [Microformats](http://microformats.org/wiki/Main_Page) (via
371
[microdata](http://microformats.org/wiki/microdata)) for optimum search
372
results
373
[visibility](https://webmasters.googleblog.com/2009/05/introducing-rich-snippets.html).
374
375
* If you're building a web app you may want [native style momentum scrolling in
376
iOS 5+](https://www.johanbrook.com/writings/native-style-momentum-scrolling-to-arrive-in-ios-5/)
377
using `-webkit-overflow-scrolling: touch`.
378
379
* If you want to disable the translation prompt in Chrome or block Google
380
Translate from translating your web page, use [`<meta name="google"
381
content="notranslate">`](https://support.google.com/webmasters/answer/79812).
382
To disable translation for a particular section of the web page, add
383
[`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276).
384
385
* If you want to disable the automatic detection and formatting of possible
386
phone numbers in Safari on iOS, use [`<meta name="format-detection"
387
content="telephone=no">`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html).
388
389
* Avoid development/stage websites "leaking" into SERPs (search engine results
390
page) by [implementing X-Robots-tag
391
headers](https://github.com/h5bp/html5-boilerplate/issues/804).
392
393
394
## News Feeds
395
396
### RSS
397
398
Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from
399
scratch](http://www.rssboard.org/rss-specification)?
400
401
```html
402
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
403
```
404
405
### Atom
406
407
Atom is similar to RSS, and you might prefer to use it instead of or in
408
addition to it. [See what Atom's all
409
about](https://en.wikipedia.org/wiki/Atom_(Web_standard)).
410
411
```html
412
<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">
413
```
414
415
### Pingbacks
416
417
Your server may be notified when another site links to yours. The href
418
attribute should contain the location of your pingback service.
419
420
```html
421
<link rel="pingback" href="">
422
```
423
424
* High-level explanation: https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks
425
* Step-by-step example case: https://www.hixie.ch/specs/pingback/pingback-1.0#TOC5
426
* PHP pingback service: https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/
427
428
429
430
## Social Networks
431
432
### Facebook Open Graph data
433
434
You can control the information that Facebook and others display when users
435
share your site. Below are just the most basic data points you might need. For
436
specific content types (including "website"), see [Facebook's built-in Open
437
Graph content
438
templates](https://developers.facebook.com/docs/sharing/opengraph/using-objects).
439
Take full advantage of Facebook's support for complex data and activity by
440
following the [Open Graph
441
tutorial](https://developers.facebook.com/docs/sharing/webmasters/getting-started).
442
443
For a reference of Open Graph's markup and properties, you may check
444
[Facebook's Open Graph Protocol reference](https://ogp.me). Finally,
445
you can validate your markup with the [Facebook Object
446
Debugger](https://developers.facebook.com/tools/debug/) (needs
447
registration to Facebook).
448
449
```html
450
<meta property="fb:app_id" content="123456789">
451
<meta property="og:url" content="https://www.example.com/path/to/page.html">
452
<meta property="og:type" content="website">
453
<meta property="og:title" content="">
454
<meta property="og:image" content="https://www.example.com/path/to/image.jpg">
455
<meta property="og:description" content="">
456
<meta property="og:site_name" content="">
457
<meta property="article:author" content="">
458
```
459
460
### Twitter Cards
461
462
Twitter provides a snippet specification that serves a similar purpose to Open
463
Graph. In fact, Twitter will use Open Graph when Cards is not available. You
464
can read more about the various snippet formats and application process in the
465
[official Twitter Cards documentation](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards),
466
and you can validate your markup with the [Card validator](https://cards-dev.twitter.com/validator)
467
(needs registration to Twitter).
468
469
```html
470
<meta name="twitter:card" content="summary">
471
<meta name="twitter:site" content="@site_account">
472
<meta name="twitter:creator" content="@individual_account">
473
<meta name="twitter:url" content="https://www.example.com/path/to/page.html">
474
<meta name="twitter:title" content="">
475
<meta name="twitter:description" content="">
476
<meta name="twitter:image" content="https://www.example.com/path/to/image.jpg">
477
```
478
479
### Schema.org
480
481
Google also provides a snippet specification that serves a similar
482
purpose to Facebook's Open Graph or Twitter Cards. This metadata is a subset
483
of [schema.org's microdata vocabulary](https://schema.org/), which
484
covers many other schemas that can describe the content of your pages
485
to search engines. For this reason, this metadata is more generic for
486
SEO, notably for Google's search-engine, although this vocabulary is
487
also used by Microsoft, Pinterest and Yandex.
488
489
You can validate your markup with the [Structured Data Testing
490
Tool](https://developers.google.com/structured-data/testing-tool/).
491
Also, please note that this markup requires to add attributes to your
492
top `html` tag.
493
494
```html
495
<html class="no-js" lang="" itemscope itemtype="https://schema.org/Article">
496
<head>
497
498
<link rel="author" href="">
499
<link rel="publisher" href="">
500
<meta itemprop="name" content="">
501
<meta itemprop="description" content="">
502
<meta itemprop="image" content="">
503
```
504
505
## URLs
506
507
### Canonical URL
508
509
Signal to search engines and others "Use this URL for this page!" Useful when
510
parameters after a `#` or `?` is used to control the display state of a page.
511
`https://www.example.com/cart.html?shopping-cart-open=true` can be indexed as
512
the cleaner, more accurate `https://www.example.com/cart.html`.
513
514
```html
515
<link rel="canonical" href="">
516
```
517
518
### Separate mobile URLs
519
520
If you use separate URLs for desktop and mobile users, you should consider
521
helping search engine algorithms better understand the configuration on your
522
web site.
523
524
This can be done by adding the following annotations in your HTML pages:
525
526
* on the desktop page, add the `link rel="alternate"` tag pointing to the
527
corresponding mobile URL, e.g.:
528
529
`<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page.html" >`
530
531
* on the mobile page, add the `link rel="canonical"` tag pointing to the
532
corresponding desktop URL, e.g.:
533
534
`<link rel="canonical" href="https://www.example.com/page.html">`
535
536
For more information please see:
537
538
* https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls
539
540
541
## Web Apps
542
543
There are a couple of meta tags that provide information about a web app when
544
added to the Home Screen on iOS:
545
546
* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and
547
provide the default iOS app view. You can control the color scheme of the
548
default view by adding `apple-mobile-web-app-status-bar-style`.
549
550
```html
551
<meta name="apple-mobile-web-app-capable" content="yes">
552
<meta name="apple-mobile-web-app-status-bar-style" content="black">
553
```
554
555
* You can use `apple-mobile-web-app-title` to add a specific sites name for the
556
Home Screen icon. This works since iOS 6.
557
558
```html
559
<meta name="apple-mobile-web-app-title" content="">
560
```
561
562
For further information please read the [official
563
documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
564
on Apple's site.
565
566
567
### Apple Touch Icons
568
569
Apple touch icons are used as icons when a user adds your webapp to the home
570
screen of aniOS devices.
571
572
Though the dimensions of the icon can vary between iOS devices and versions
573
one `180×180px` touch icon named `icon.png` and including the following in
574
the `<head>` of the page is enough:
575
576
```html
577
<link rel="apple-touch-icon" href="icon.png">
578
```
579
580
For a more comprehensive overview, please refer to Mathias' [article on Touch
581
Icons](https://mathiasbynens.be/notes/touch-icons).
582
583
584
### Apple Touch Startup Image
585
586
Apart from that it is possible to add start-up screens for web apps on iOS. This
587
basically works by defining `apple-touch-startup-image` with an according link
588
to the image. Since iOS devices have different screen resolutions it maybe
589
necessary to add media queries to detect which image to load. Here is an
590
example for an iPhone:
591
592
```html
593
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup.png">
594
```
595
596
597
### Chrome Mobile web apps
598
599
Chrome Mobile has a specific meta tag for making apps [installable to the
600
homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen)
601
which tries to be a more generic replacement to Apple's proprietary meta tag:
602
603
```html
604
<meta name="mobile-web-app-capable" content="yes">
605
```
606
607
Same applies to the touch icons:
608
609
```html
610
<link rel="icon" sizes="192x192" href="highres-icon.png">
611
```
612
613
### Theme Color
614
615
You can add the [`theme-color` meta extension](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color)
616
in the `<head>` of your pages to suggest the color that browsers and
617
OSes should use if they customize the display of individual pages in
618
their UIs with varying colors.
619
620
```html
621
<meta name="theme-color" content="#ff69b4">
622
```
623
624
The `content` attribute extension can take any valid CSS color.
625
626
Currently, the `theme-color` meta extension is supported by [Chrome 39+
627
for Android Lollipop](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
628
629
630
## security.txt
631
632
When security risks in web services are discovered by users they often lack the
633
channels to disclose them properly. As a result, security issues may be left unreported.
634
635
Security.txt defines a standard to help organizations define the process for
636
users to disclose security vulnerabilities securely. Include a text
637
file on your server at `.well-known/security.txt` with the relevant contact details.
638
639
Check [https://securitytxt.org/](https://securitytxt.org/) for more details.
You can’t perform that action at this time.