This is the ideal code to go inside the element, for a basic site. For larger sites where you need more options, I'd recommend diving into Josh Bucheas' Github page. It has a lot more options that this, as this is only my recommended usage and provides information for what each tag does.
- Declaring character encoding
- Render the page as IE Edge
- Make site responsive
- Title & Description
- Robots Meta
- Facebook / OpenGraph and Twitter Cards
- Avoid render blocking CSS
- Favicons
- HTML5 Shim
The charset attribute specifies the character encoding for the HTML document. Character Set = Unicode Transformation Format-8. It is an octet (8-bit) lossless encoding of Unicode characters.
<meta charset="utf-8">Tells IE to behave as the latest rendering engine. If none is set, IE will render the site how it thinks it is best shown. Gets rid of compatibility mode and improves overall headaches.
<meta http-equiv="x-ua-compatible" content="ie=edge">Tells the browser to set the website width in px, to the devices width.
<meta name="viewport" content="width=device-width, initial-scale=1">Title: Displays your title in the browser window, history, bookmarks. Shows in search engines and should reflect as your entire site and the page you're on.
Description: This tag provides a short description of the page. In some situations, this description is used as a part of the snippet shown in the search results. Recommended usage is between 150 and 160 characters. It's also worth noting that you should make use of keywords.
<title> Document title goes here </title>
<meta name="description" content="">The robots meta tag lets you utilize a granular, page-specific approach to controlling how an individual page should be indexed and served to users in search results.
After the robots.txt file (or the absence of one) has given permission to crawl a page, by default pages are treated as crawlable, indexable, archivable, and their content is approved for use in snippets that show up in the search results, unless permission is specifically denied in a robots meta tag
I'd recommend using a robots.txt file, as then you don't have to include the meta tags in every page but as Google says, if you want to deny a single page from being indexed then the robots meta tag is the way to go. Ask, Google, Bing, and Yahoo all respect the below code.
<!-- Do not show this page or Cached link search results and don't follow the links on this page -->
<meta name="robots" content="noindex, nofollow">###OpenGraph
Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. Without these tags, the Facebook Crawler uses internal heuristics to make the best guess about the title, description, and preview image for your content. Designate this info explicitly with Open Graph tags to ensure the highest quality posts on Facebook.
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Website page title" />
<meta property="og:description" content="A brief description of the content" />
<meta property="og:site_name" content="Example" />
<meta property="og:image" content="http://www.example.com/image.jpg" />
<meta property="fb:app_id" content="000000" /> <!-- Used for Domain Insights -->
<meta property="og:type" content="website" /> <!-- website is deafult -->
<meta property="og:locale" content="en_US" /> <!-- en_US is deafult -->With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.
When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property.
The below meta tags are the bare minimum and there are also lots of different style cards. See their documentation for more information.
Twitter fallbacks these tags:
- twitter:title / og:title
- twitter:description / og:description
- twitter:image / og:image
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@your_sites_username">
<!-- You don't need to include these if you have OpenGraph tags -->
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:image" content="http://www.example.com/image.jpg">- Getting started with Twitter Cards
- Must-Have Social Meta Tags for Twitter, Google+, Facebook and More
When a webpage comes across an external stylesheet, it must load these resources before rendering any content to the page. Google advises that you put critical CSS (all CSS that is in the (usually) first 1100px of a webpage) as inline CSS placed in the head element. None of these techniques are pretty, and they make your job as a developer hard. There are some positives, though; Google likes faster websites meaning yours will rank higher, and faster load times = better user experience.
This should also be used in conjunction with other methods to increase load time such as: Optimizing images, Lazy loading images, minifying code, enabling Gzip, asynchronously / defer javascript, remove un-needed code.
Hopefully, with the new HTTP/2 protocol, we can start moving away from these methods so keep an eye out!
You can do this manually, and if you're not familiar with npm, Gulp or Grunt then this is the route you should take. First you find all you need to find your CSS that is important and should be loaded first. You can use this tool to make it easier for you:
Put the code that was generated in your head tag.
<style>
/* Put critical CSS here */
</style>Then you can either:
-
Then place your stylesheets at the bottom of your page, before the closing
</body>tag. -
Load them asynchronously using loadCSS before the closing body tag. (Recommended)
For an even better SCSS method and information visit Ben Edwards' CSS-TRICKS article
Critical extracts & inlines critical-path (above-the-fold) CSS from HTML. See the below link for the difference between Critical and Penthouse:
- Penthouse is a tool generating critical path CSS for your web pages and web apps in order to speed up page rendering. Supply the tool with your site's full CSS, and the page you want to create the critical CSS for, and it will return all the CSS needed to render the above the fold content of the page.
Install modules directly to your server, they support Apache and Nginx.
This rewriter improves page render times by identifying CSS rules needed to render the page, inlining those critical rules and deferring the load of the full CSS resources.
- Critical rendering path
- Optimize CSS delivery
- Eliminate render blocking css
- Render blocking Javascripts
I recommend using Real Favicon Generator to generate your favicons. It generates around 5 lines of code whilst still maintaining full browser support. They include thorough settings, and you can even set a dedicated image for each device. For standard support, see below.
<!-- For IE 10 and below -->
<!-- No link, just place a file called favicon.ico in the root directory -->
<!-- For IE 11, Chrome, Firefox, Safari, Opera -->
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png"> HTML5 Shim is a Javascript workaround for legacy browsers that don't support HTML5 elements. The code below makes sure IE 6-8 supports these elements allowing you to use and style them in your document.
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->