HTML 5 cheatsheet

HTML 5: Metadata and SEO

6 common HTML 5 tasks.

Add a meta description

Write the summary search engines often show under your title. About 150 characters works well.

<meta name="description" content="A short summary of this page.">

Set the canonical URL

Tell search engines which URL is the preferred version of this page.

<link rel="canonical" href="https://www.example.com/page">

Add Open Graph tags

Control how the page looks when shared on social networks and chat apps.

<meta property="og:title" content="Page title">
<meta property="og:description" content="A short summary.">
<meta property="og:image" content="https://www.example.com/preview.png">
<meta property="og:url" content="https://www.example.com/page">

Keep a page out of search results

Ask search engines not to index the page.

<meta name="robots" content="noindex">

Add a favicon

Set the icon shown in browser tabs.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Add structured data

Describe the page to search engines with JSON-LD.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Page title"
}
</script>