Markup
An example of responsible HTML development
Doctype
The doctype is a critical for communicating which standard to use when rendering your website. Wee uses HTML5, the modern, semantic format for structuring data which includes a number of new elements.
<!doctype html>
Icons
Whether someone is on a mobile device, legacy browser, or Windows tablet your brand should stay consistent. In addition to the iOS and Safari icons the browserconfig.xml and favicon.ico files serve most environments.
<link rel="apple-touch-icon" href="/assets/img/icons/touch.png">
<link rel="mask-icon" href="/assets/img/icons/pin.svg" color="#349bb9">
To read more about the Safari 9 mask icon requirements check out the Apple docs.
Meta
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="format-detection">
<title>Front-End Framework | Wee</title>
<meta name="description" content="Blueprint for modern web development.">
It’s best to serve the meta charset and http-equiv values through HTTP headers. There are commented lines in the sample .htaccess file for that purpose. If uncommented, you should remove the two tags from your HTML.
Open Graph
The Open Graph protocol enables any web page to become a rich object in a social graph. Both Facebook and Twitter leverage the tags for extracting page context when sharing.
<meta property="og:type" content="website">
<meta property="og:site_name" content="Wee">
<meta property="og:title" content="Front-End Framework" itemprop="name">
<meta property="og:description" content="Blueprint for modern web development." itemprop="description">
<meta property="og:url" content="https://www.weepower.com" itemprop="url">
<meta property="og:image" content="https://www.weepower.com/assets/img/share.png" itemprop="image">
In the sample HTML Wee dual-purposes the Open Graph tags as Schema properties for the WebPage scope defined on the document root.
Publisher
While authorship is officially dead the publisher link is still being put to use according to Google.
<link rel="publisher" href="https://plus.google.com/+weecss">
Schema
Schema enables search engines to better understand the information on web pages and provide richer search results. It can also enable new tools and applications that make use of the tags.
<html lang="en" itemscopeitemtype="http://schema.org/WebPage">
Twitter Cards
With Twitter Cards, you can attach photos and other media to Tweets that drive traffic to your website.
Twitter cards can work in conjunction with Open Graph to eliminate duplicate tag content.
Web Manifest
More information here
<link rel="manifest" href="site.webmanifest">