Base HTML5 layout.
You can clone the repository
$ https://github.com/ahtohbi4/html5-layout.git
or just copy content of the source file.
Charset of page content.
<meta charset="utf-8">
Title which is showing in browser's tab.
<title>%title%</title>
Google will sometimes use the meta description of a page in search results snippets. Lern more...
<meta name="description" content="%description%">
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%">
See http://ogp.me/ for more information.
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">
<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">
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<link rel="canonical" href="/cannonical/link/to/current/page/">
<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/">
...
Identifies a DNS query to resolve the background, so that requests can occur more quickly. Lern more...
<link rel="dns-prefetch" href="//example.com">
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">
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">
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/">
<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">
Use a some number of subdomains to parallel downloads.
<link rel="stylesheet" href="//st1.example.com/path/to/first-view-style.css">
<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>
Always check your pages with official W3C validator.
MIT © Alexander Antonov alexandr-post@yandex.ru