Learn Meta Tags & SEO

The <head> Section and Core Meta Tags

Everything inside <head> is metadata — information about the page rather than content displayed on it. Browsers, search engines, and social platforms all rely on this metadata.

Essential meta tags every page should have

<meta charset="UTF-8"> — Declares the character encoding. UTF-8 supports virtually all written languages and symbols. Always include it as the very first element inside <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — Tells mobile browsers to set the viewport width to the device width and start at 1x zoom. Without this, your page will render at a desktop width and get shrunk down on phones.
<meta name="description" content="..."> — A concise summary (120-160 characters) of the page. Search engines often display this as the snippet below your link in results.
<title> — Not a meta tag technically, but lives in <head>. It is the text shown on the browser tab and as the clickable headline in search results.

A Well-Structured <head>

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML meta tags and SEO best practices for modern web development.">
  <meta name="robots" content="index, follow">

  <title>Meta Tags & SEO — Code Lessons</title>

  <!-- Canonical URL: tells search engines the preferred version -->
  <link rel="canonical" href="https://example.com/lessons/html-meta-seo">

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
  <!-- Page content -->
</body>
</html>

Open Graph and Twitter Cards

When someone shares a link on Facebook, LinkedIn, Slack, Discord, or similar platforms, those services look for Open Graph (OG) meta tags to build the rich preview card.

Core Open Graph tags

og:title — The title shown in the preview card.
og:description — A short description displayed below the title.
og:image — URL to the preview image (recommended: 1200x630 px).
og:url — The canonical URL of the page.
og:type — Usually website or article.

Twitter Cards

Twitter (X) has its own set of tags that fall back to Open Graph when absent:

twitter:card — Card type: summary, summary_large_image, player, or app.
twitter:title, twitter:description, twitter:image — Override OG values for Twitter specifically.

In practice, many developers set Open Graph tags and only add twitter:card for the card type, since Twitter reads OG tags as fallbacks.

Structured Data and Advanced SEO

Beyond meta tags, search engines understand structured data — machine-readable annotations that describe what your content is (a recipe, a product, an event, a FAQ, etc.).

The most common format is JSON-LD (JSON for Linked Data), placed inside a <script type="application/ld+json"> tag:

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Meta Tags & SEO",
  "author": { "@type": "Person", "name": "Jane Doe" },
  "datePublished": "2025-01-15"
}
</script>

Google uses structured data to generate rich results — star ratings, FAQ accordions, recipe cards, event dates, and more. You can test yours with Google's Rich Results Test tool.

Other helpful meta tags

robots — index, follow (default) or noindex, nofollow to control crawling.
theme-color — Sets the browser toolbar colour on mobile: <meta name="theme-color" content="#1a1a2e">.
author — <meta name="author" content="Jane Doe">.

What happens if you omit the viewport meta tag from a mobile page?

Meta Tags & SEO