HTML5 Layout
Base HTML5 layout.
Installation
You can clone the repository
$ https://github.com/ahtohbi4/html5-layout.git
or just copy content of the source file .
Components
Charset (required)
Charset of page content.
Page title (required)
Title which is showing in browser's tab.
SEO page description
Google will sometimes use the meta description of a page in search results snippets. Lern more...
< meta name = " description " content = " %description% " >
SEO page keywords
May be taken into account when the Yandex robot determines if a page matches a search query . But Google does not use it in web ranking.
< meta name = " keywords " content = " %keywords% " >
Open Graph
Base meta:
< meta property = " og:type " content = " website " >
< meta property = " og:url " content = " /path/to/target/page/ " >
< meta property = " og:title " content = " %title% " >
< meta property = " og:image " content = " /path/to/image.jpg " >
Additional meta:
< meta property = " og:description " content = " %description% " >
< meta property = " og:determiner " content = " %determiner% " >
< meta property = " og:locale " content = " en_EN " >
< meta property = " og:locale:alternate " content = " ru_RU " >
< meta property = " og:site_name " content = " %name% " >
< meta property = " og:audio " content = " /path/to/audio/file.mp3 " >
< meta property = " og:video " content = " /path/to/video/file.avi " >
Twitter Cards
< meta name = " twitter:card " content = " summary " >
< meta name = " twitter:site " content = " @username " >
< meta name = " twitter:title " content = " %title% " >
< meta name = " twitter:description " content = " %description% " >
< meta name = " twitter:image " content = " /path/to/image.jpg " >
Google instructions
< meta name = " google " content = " notranslate " >
Mobile viewport scale
< meta name = " viewport " content = " width=device-width, initial-scale=1 " >
Phone number detection by device
< meta name = " format-detection " content = " telephone=no " >
Cononical link
< link rel = " canonical " href = " /cannonical/link/to/current/page/ " >
Alternate link
< link rel = " alternate " hreflang = " ru " href = " /path/to/alternate/ru/language/of/current/page/ " >
< link rel = " alternate " hreflang = " ar " href = " /path/to/alternate/ar/language/of/current/page/ " >
...
Prefetch DNS
Identifies a DNS query to resolve the background, so that requests can occur more quickly. Lern more...
< link rel = " dns-prefetch " href = " //example.com " >
Pre connect
Initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation,
allows the user agent to mask the high latency costs of establishing a connection. Lern more...
< link rel = " preconnect " href = " //example.com " crossorigin = " use-credentials " >
Prefetch of resources
Identifies a resource file, such as an image or a CSS stylesheet, to be downloaded into the cache. Lern more...
< link rel = " prefetch " href = " //example.com/path/to/next/page/or/single/resource/ " crossorigin = " use-credentials " >
Pre render of next page
Identifies a webpage to load in the background, in case the user wants to navigate to it next. Lern more...
< link rel = " prerender " href = " //example.com/path/to/next/page/ " >
Browser MS configuration
< meta name = " msapplication-config " content = " /browserconfig.xml " >
Other meta by Microsoft
< meta name = " application-name " content = " %name% " >
< meta name = " msapplication-badge " content = " frequency=60; polling-uri= http://example.com/path/to/polling.xml " >
CSS for layout
Use a some number of subdomains to parallel downloads.
< link rel = " stylesheet " href = " //st1.example.com/path/to/first-view-style.css " >
Google Analytics code
< script > ( function ( i , s , o , g , r , a , m ) { i [ ' GoogleAnalyticsObject ' ] = r ; i [ r ] = i [ r ] || function ( ) { ( i [ r ] . q = i [ r ] . q || [ ] ) . push ( arguments ) } , i [ r ] . l = 1 * new Date ( ) ; a = s . createElement ( o ) , m = s . getElementsByTagName ( o ) [ 0 ] ; a . async = 1 ; a . src = g ; m . parentNode . insertBefore ( a , m ) } ) ( window , document , ' script ' , ' //www.google-analytics.com/analytics.js ' , ' ga ' ) ; ga ( ' create ' , ' %id% ' , ' auto ' ) ; ga ( ' send ' , ' pageview ' ) ; < / script >
Tests
Always check your pages with official W3C validator .
License
MIT © Alexander Antonov alexandr-post@yandex.ru