Meta tags

All pages should have meta tags.
If empty metatags, make sure to get the root item. Root item should never be empty

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="WEBSITE DESCRIPTION / PAGE DESCRIPTION"/>
<title>WEBSITE TITLE / PAGE TITLE</title>
<link rel="shortcut icon" href="HTTP://EXAMPLE.COM/FAVICON.ICO"/>

<meta property="og:title" content="WEBSITE TITLE / PAGE TITLE"/>
<meta property="og:url" content="HTTPS://EXAMPLE.COM/PAGE"/>
<meta property="og:site_name" content="COMPANY NAME"/>
<meta property="og:description" content="WEBSITE DESCRIPTION / PAGE DESCRIPTION"/>
<meta property="og:image" content="HTTPS://VIA.PLACEHOLDER.COM/920>
<meta property="og:type" content="COMPANY WEBSITE"/>

<meta name="twitter:title" content="WEBSITE TITLE / PAGE TITLE"/>
<meta name="twitter:url" content="HTTPS://EXAMPLE.COM/PAGE"/>
<meta name="twitter:description" content="WEBSITE DESCRIPTION / PAGE DESCRIPTION"/>
<meta name="twitter:image" content="HTTPS://VIA.PLACEHOLDER.COM/920"/>
<meta name="twitter:card" content="PAGE SUMMARY"/>
If empty metatags or missing meta should be added. make sure to get info from the root item, if user hasnt added info.

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>WEBSITE TITLE / PAGE TITLE</title>

Images

All images MUST have alt tags.

<img src="imagelink.jpg" alt="Description of image">

<figure>
  <img src="./nature-placeholder-001.jpg" alt="Description of image">
  <figcaption>Caption for image</figcaption>
</figure>
No alt tags on images makes bad SEO.

<img src="imagelink.jpg">

Inputs

Make sure that there is always space to click with a finger and the entire input+label is clickable

<input type=“checkbox“ id=”something” name=”something”>
<label for="something">Label text</label>

The label should be clickable

<input type=“checkbox“ id=”something” name=”something”>
<label>Label text</label>

Headers

All pages should have one h1 tag.
If more then one h1 tag, they should be wrapped in a section

<section>
   <h1>Lorem ipsum header<h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</sectio>
<section>
   <h1>Lorem ipsum header<h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</sectio>
Multiple headers not wrapped in sections makes bad SEO.

<div>
   <h1>Lorem ipsum header<h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div>
   <h1>Lorem ipsum header<h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Links

All links should always have styles for hover, focus and active.

<a href="https://example.com" title="Some text">https://example.com</a>
<style>
  a {
    border:1px solid red;
  }
  a:hover {
    border:1px solid blue;
  }
  a:focus {
    border:1px solid black;
  }
  a.active {
    border:1px solid purple;
  }
</style>
Same style on hover, focus and active is bad.

<a href="https://example.com" title="Some text">https://example.com</a>
<style>
  a {
    border:1px solid red;
  }
  a:hover {
    border:1px solid red;
  }
</style>


Want to read about semantic elements: Semantic elements, here you can find a good guide how to use them Semantic HTML5 guide