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.


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

<!-- 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="" />
<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="" />
<meta property="og:image" content="" />
<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="" />
<meta name="twitter:site" content="@publisher_handle" />
<meta name="twitter:creator" content="@author_handle" />
<meta name="twitter:title" content="Title of the page" />

<!-- markup for Google+ -->
<meta itemprop="name" content="Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="">

<!-- Link to Google+ page if you have one -->
<link href="" 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="">

<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="" 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.
<h2>Multiple h2 with keywords as well</h2>
<p>There might be some other content here</p>

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

<div id="footer">

<!-- Here the Javascript parts of the page - in this case it is jquery and bootstrap -->
<script src=""></script>
<script src=""></script>



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

SEO Tipps

Supporting Tools

Twitter Validator

Facebook Debugger

Google Structured Data Testing

Pinterst Rich Pin Validator