SEO Meta Tags HTML Template

Copy this template to the head of your pages and change the values. Each tag has a short comment which tells its job.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <!-- Makes the page responsive on mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Title: unique, about 50 to 60 characters -->
  <title>SEO Title Tag: How to Write a Good Title</title>

  <!-- Description: unique, about 120 to 155 characters -->
  <meta name="description" content="Learn how to write an SEO title tag with the right length and keyword, with simple examples.">

  <!-- Preferred URL of this page -->
  <link rel="canonical" href="https://example.com/seo-title-tag/">

  <!-- Indexing rules (this is the default, so you may skip it) -->
  <meta name="robots" content="index, follow">

  <!-- Language versions (only for multilingual sites) -->
  <link rel="alternate" hreflang="en" href="https://example.com/seo-title-tag/">
  <link rel="alternate" hreflang="x-default" href="https://example.com/seo-title-tag/">

  <!-- Open Graph: how the page looks when shared on social media -->
  <meta property="og:type" content="article">
  <meta property="og:title" content="SEO Title Tag: How to Write a Good Title">
  <meta property="og:description" content="Learn how to write an SEO title tag with the right length and keyword.">
  <meta property="og:url" content="https://example.com/seo-title-tag/">
  <meta property="og:image" content="https://example.com/images/title-tag-share.jpg">
  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <h1>SEO Title Tag</h1>
</body>
</html>

How it works

• The viewport tag is needed for a mobile friendly page.
• The title and description are the main text of the search result. See Title Tag and Meta Description.
• The canonical link tells the preferred URL. See Canonical URLs.
• The Open Graph tags control the title, text and picture when a link is shared on social platforms. They do not change the Google ranking.
• Use the noindex value in the robots tag only for pages which must stay out of search, like thank you pages.

• Next Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.