Posted on

HTML Template with SEO and Social

What is it all about?

This template can be used for a webpage and offers all required parts which are good for SEO and social as well.

Template

<!DOCTYPE html>
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<!-- Or just use "html" if enough -->
<html itemscope itemtype="http://schema.org/Article">

<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />

<!-- some other meta tags -->
<meta name="robots" content="index,follow" />
<meta name="description" content="Describe the site over here and limit to around 100-150 chars. This is usually your preview in search engines." />
<meta name="keywords" content="keywords template website seo" />

<!-- some structured data for social - mainly facebook -->
<meta property="fb:app_id" content="app-id" />
<meta property="article:publisher" content="https://www.facebook.com/roland.russwurm" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="At least two sentences." />

<!-- type is "article" or "website" -->
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/full-url-link.html" />
<meta property="og:image" content="http://www.example.com/image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Name of the site" />

<!-- now some stuff for twitter -->
<!-- use "summary" or "summary_large_image" to get large images incuded -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image:src" content="http://www.example.com/big-image.jpg" />
<meta name="twitter:site" content="@publisher_handle" />
<meta name="twitter:creator" content="@author_handle" />
<meta name="twitter:title" content="Title of the page" />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Link to Google+ page if you have one -->
<link href="https://plus.google.com/GOOGLE_PLUS_ID" rel="publisher" />

<title>Title of the document or for this specific site - limit to around 50 chars</title>

<!-- Here we add bootstrap and fontawesome -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
</head>

<body>
<div id="content">
<h1>Just one h1 per page with your keyword(s)</h1>
<p>Some content over here - at least 200 words.
Some links like <a href="http://www.example.com" title="Example page">This Link</a>. Limit the number of links on your page to around 100.
Images like this <img src="./image.png" alt="Just an image"/> should always have an alt tag.
</p>
<h2>Multiple h2 with keywords as well</h2>
<p>There might be some other content here</p>
</div>

<!-- Just an example using Bootstrap -->
<nav class="navbar">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</nav>

<div id="footer">
</div>

<!-- Here the Javascript parts of the page - in this case it is jquery and bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
</body>

</html>

Links

Here some usefule links how to make your webpage good for social:

Must Have for social meta tags

SEO Template

9 Social Network Meta Tags

Social Meta Tags Explained

Facebook Best Practices

Schema.org

SEO Tipps

Supporting Tools

Twitter Validator

Facebook Debugger

Google Structured Data Testing

Pinterst Rich Pin Validator