Boilerplate HTML Skeleton

 

I am keeping updated here the default boilerplate or starting template that I use to make HTML pages which follows best SEO guidelines.

This example uses English without a geographic specifier for the language as an example.  If your site is multi-lingual you will need to add canonical link tags to each language version in each page on your site.

The full code snippet:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>This is the title of the page.</title>
<meta name="description" content="Place the meta description text here.">
<link rel="canonical" href="https://WWW.YOURURL.COM/">
<link rel="alternate" href="https://WWW.YOURURL.COM/" hreflang="en-US" />
<link rel="alternate" href="https://WWW.YOURURL.COM/" hreflang="x-default" />
<meta name="msapplication-config" content="none"/>
<!-- // Remove this line and the line after next to include W3 CSS
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
// Remove this line to include W3 CSS -->
<style>
body {
     margin: 0;
     padding: 0;
}
</style>
<script>
     /*to prevent Firefox FOUC, this must be here*/
     let FF_FOUC_FIX;
</script>
</head>
<body>

<!-- Content Area -->
</body>
</html>

Below is a description of each tag and it’s use:

<!DOCTYPE html>

Tells the browser that this is an HTML 5 document.

<html lang="en-US">

This tells the browser and search engines what language your site primarily uses.

<head>

This begins the HTML header section of your page which includes your meta tags, stylesheet includes or inline styles, and often inline or included JavaScript code.  You can find more information on each available tag to use in your header area at W3 School’s HTML head Elements link.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This initializes the document’s dimensions based on the dimensions of the device’s screen, so that as elements of the page are shown they appear in the correct places and do not shift the page layout as they load.

<base href="https://www.yourwebsitedomain.com/" target="_self">

The <base> tag tells the browser where relative URLs should point to by default, and in most cases you will want this to be the same as the home page of your site.

<meta charset="UTF-8">

We set the character encoding to Unicode which is the standard encoding used in web sites, which prevents the browser from showing corrupted or garbled text if the visitor uses a different encoding in their browser.

<meta name=”robots” content="index, follow">

The robots meta tag tells search engines whether or not to index this page, and whether or not to follow and crawl links on your web page.  It is best practice to not allow a page to display at all publicly if you do not wish for it to be indexed, so we will assume here that we want the search engines to index our page and to crawl the links on our pages too.  If you have a page full of outbound links to sites that you do not want to be associated with yours you can use the ‘nofollow’ directive instead to prevent associating those external sites with your own.  Do keep in mind though that this tag only suggests to search engines what behavior to follow and there is no guarantee they will follow it.

<meta name="robots" content="max-snippet:-1, max-image-preview:large">

In our second robots meta tag we tell Google and other search engines that we want the maximum snippet and image size available in search.

<meta name="robots" content="max-video-preview:-1">

In our third robots meta tag ( note that you can combine robots directives in the same ‘content’ field by separating them with a comma ) we are telling Google and other search engines not to limit the length of video previews of our site in search.  If you are playing a longer video on your site or want to draw users to your site you will want to liimit the max-video-preview value to 5-15 seconds.

<title>This is the title of the page.</title>

The <title> tag sets the title that will show up in search engine results and in the browser’s tab.  Your title should be kept to under 60 characters in length, and avoid exclamation points or other loud text, it should read cleanly and not appear as advertisement or spam.

<meta name="description" content="Place the meta description text here.">

The description meta tag contains the text that will display beneath the title in search engine results, and has an ideal length of 155-160 characters.  It is a good habit to preview the appearance of your site in search results using a Google SERP Simulator.

<meta name="keywords" content="Never use this tag in your web pages!" />

The keywords meta tag was used in the past to help search engines catalog your site in search results, however this was easily abused and has been removed from Google’s search index ranking calculations.  Bing has completely stopped using the tag as well and both search engines may even penalize or flag a site that uses the meta keywords tag as potential spam, so we are sure not to use it and to remove it from any templates we use.

Leave a Reply