Skip to content

ahtohbi4/html5-layout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

08c6d5c · Mar 5, 2018

History

69 Commits
Nov 4, 2016
Feb 3, 2016
Nov 4, 2016
Mar 5, 2018
Nov 4, 2016
Nov 5, 2016

Repository files navigation

HTML5 Layout

GitHub version Travis Build Status

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.

<meta charset="utf-8">

Page title (required)

Title which is showing in browser's tab.

<title>%title%</title>

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

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">

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

About

Base HTML5 layout

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages