Metadata and SEO

Search engines and social media rely on metadata—information about your page. Well-crafted metadata improves search rankings, click-through rates, and how your content appears when shared. This tutorial covers essential meta tags and structured data.

What you’ll learn:

The <meta> tag and common attributes
Open Graph tags for social media sharing
Twitter Card tags for Twitter
Structured data and JSON-LD
Basic SEO principles
Canonical tags and robots directives
Schema.org markup for rich results

Prerequisites:

Completed Embedding Media

The Meta Tag Basics

The <meta> tag provides metadata about your HTML document. It’s in the <head>, not the body.

Character Set

Always declare UTF-8 as your character encoding:

<meta charset="UTF-8">

This must be within the first 1024 bytes of your document and should be the first meta tag.

Viewport for Mobile

Make your page responsive:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tells browsers:

width=device-width — Page width matches device width
initial-scale=1.0 — Initial zoom level is 100%

Description Meta Tag

Your page description appears in search results:

<meta name="description" content="Learn HTML from beginner to advanced. Free tutorials and reference guide.">

Best practices:

150-160 characters for optimal display
Include relevant keywords naturally
Make it compelling—it’s the first impression
Be specific to each page, not generic

Keywords Meta Tag

Though less important now, keywords help search engines:

<meta name="keywords" content="HTML, tutorials, web development, learning">

Note: Keyword stuffing doesn’t work. Search engines ignore irrelevant keywords.

Open Graph tags control how your content appears when shared on Facebook, LinkedIn, Pinterest, and other platforms.

<head>
<meta property="og:title" content="Learning HTML - Complete Guide">
<meta property="og:description" content="Master HTML from basics to advanced techniques">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">
</head>

Result

Interactive code playground requires JavaScript. Here's the code:

<head>
<meta property="og:title" content="Learning HTML - Complete Guide">
<meta property="og:description" content="Master HTML from basics to advanced techniques">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">
</head>

Key Open Graph tags:

og:title — Title when shared (different from page title)
og:description — Description when shared
og:image — Image URL (minimum 1200x630 pixels)
og:url — Canonical URL of the content
og:type — Type of content: website, article, profile, etc.

For articles, add publication metadata:

<meta property="article:published_time" content="2024-12-10T14:30:00Z">
<meta property="article:modified_time" content="2024-12-11T10:00:00Z">
<meta property="article:author" content="https://example.com/author/john">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="Web Development">

Twitter Card Tags

Control how your content appears on Twitter:

<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:title" content="Learning HTML">
<meta name="twitter:description" content="Complete HTML guide">
<meta name="twitter:image" content="https://example.com/image.jpg">
</head>

Result

Interactive code playground requires JavaScript. Here's the code:

<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:title" content="Learning HTML">
<meta name="twitter:description" content="Complete HTML guide">
<meta name="twitter:image" content="https://example.com/image.jpg">
</head>

Twitter Card types:

summary — Title, description, thumbnail
summary_large_image — Same as summary but with large image
player — For video/audio content
app — For mobile app promotion

Structured Data with JSON-LD

JSON-LD (JSON for Linking Data) helps search engines understand your content. It’s the recommended format by Google and other search engines.

Article Markup

<head>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Understanding HTML Structure",
  "description": "A comprehensive guide to HTML structure and semantics",
  "image": "https://example.com/article-image.jpg",
  "author": {
    "@type": "Person",
    "name": "John Doe",
    "url": "https://example.com/author/john"
  },
  "datePublished": "2024-12-10",
  "dateModified": "2024-12-11"
}
</script>
</head>

Result

Interactive code playground requires JavaScript. Here's the code:

<head>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Understanding HTML Structure",
  "description": "A comprehensive guide to HTML structure and semantics",
  "image": "https://example.com/article-image.jpg",
  "author": {
    "@type": "Person",
    "name": "John Doe",
    "url": "https://example.com/author/john"
  },
  "datePublished": "2024-12-10",
  "dateModified": "2024-12-11"
}
</script>
</head>

Organization Markup

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Example Company",
  "url": "https://example.com",
  "logo": "https://example.com/logo.png",
  "sameAs": [
    "https://www.facebook.com/example",
    "https://www.twitter.com/example",
    "https://www.linkedin.com/company/example"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "Customer Service",
    "telephone": "+1-555-123-4567",
    "email": "[email protected]"
  }
}
</script>

Product Markup

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Widget XL",
  "image": "https://example.com/widget.jpg",
  "description": "An excellent widget",
  "brand": {
    "@type": "Brand",
    "name": "Widget Corp"
  },
  "offers": {
    "@type": "Offer",
    "price": "29.99",
    "priceCurrency": "USD"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "89"
  }
}
</script>

Common Meta Tags for SEO

Robots Meta Tag

Control how search engines handle your page:

<!-- Index this page, follow links -->
<meta name="robots" content="index, follow">

<!-- Don't index this page -->
<meta name="robots" content="noindex, nofollow">

<!-- Index but don't follow external links -->
<meta name="robots" content="index, nofollow">

<!-- Don't show in search snippets longer than 160 chars -->
<meta name="robots" content="max-snippet:-1, max-image-preview:large">

Language Meta Tag

Specify the page language:

<html lang="en">
<meta http-equiv="Content-Language" content="en-US">

Canonical Tag

Tell search engines this is the preferred version of a page:

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

Use this when you have similar content at multiple URLs.

Refresh Meta Tag

Redirect after a delay (use sparingly):

<!-- Redirect after 5 seconds -->
<meta http-equiv="refresh" content="5; url=https://example.com/new-location">

A Complete SEO-Optimized Head Section

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding -->
<meta charset="UTF-8">

<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- SEO basics -->
<title>Learning HTML - Complete Beginner Guide</title>
<meta name="description" content="Master HTML from basics to advanced. Free tutorials, examples, and best practices.">
<meta name="keywords" content="HTML tutorial, web development, learn HTML">

<!-- Robots -->
<meta name="robots" content="index, follow">

<!-- Language -->
<meta http-equiv="Content-Language" content="en-US">

<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/tutorials/html">

<!-- Open Graph for social media -->
<meta property="og:title" content="Learning HTML - Complete Guide">
<meta property="og:description" content="Master HTML from basics to advanced techniques">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/tutorials/html">
<meta property="og:type" content="article">
<meta property="article:published_time" content="2024-12-10T10:00:00Z">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="HTML">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Learning HTML">
<meta name="twitter:site" content="@example">

<!-- Favicons -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<!-- Content -->
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding -->
<meta charset="UTF-8">

<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- SEO basics -->
<title>Learning HTML - Complete Beginner Guide</title>
<meta name="description" content="Master HTML from basics to advanced. Free tutorials, examples, and best practices.">
<meta name="keywords" content="HTML tutorial, web development, learn HTML">

<!-- Robots -->
<meta name="robots" content="index, follow">

<!-- Language -->
<meta http-equiv="Content-Language" content="en-US">

<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/tutorials/html">

<!-- Open Graph for social media -->
<meta property="og:title" content="Learning HTML - Complete Guide">
<meta property="og:description" content="Master HTML from basics to advanced techniques">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/tutorials/html">
<meta property="og:type" content="article">
<meta property="article:published_time" content="2024-12-10T10:00:00Z">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="HTML">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Learning HTML">
<meta name="twitter:site" content="@example">

<!-- Favicons -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<!-- Content -->
</body>
</html>

SEO Best Practices

Title Tags

Keep under 60 characters
Include primary keyword
Make it compelling and unique
Front-load important keywords

<!-- Good -->
<title>HTML Tutorial for Beginners - Learn Web Development</title>

<!-- Bad -->
<title>Page</title>

URL Structure

Use descriptive, hyphenated URLs
Keep URLs short
Use HTTPS
Avoid parameters when possible

Good: https://example.com/tutorials/html/basics
Bad:  https://example.com/page.php?id=123

Heading Hierarchy

Use only one <h1> per page
Follow hierarchy: h1 > h2 > h3, etc.
Include keywords naturally
Make headings descriptive

<h1>Learning HTML: A Beginner's Guide</h1>
<h2>Getting Started</h2>
<h3>Installing a Text Editor</h3>

Internal Linking

Link to related pages
Use descriptive anchor text
Focus on user experience
Don’t overdo it

<!-- Good -->
<a href="/tutorials/css">Learn CSS after HTML</a>

<!-- Bad -->
<a href="/tutorials/css">click here</a>

Try It Yourself

Create a complete meta tag setup:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<meta name="description" content="Write your page description here. Keep it between 150-160 characters.">

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Sharing description">
<meta property="og:image" content="https://example.com/image.jpg">

<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Description for Twitter">
</head>
<body>
<h1>Welcome to My Page</h1>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<meta name="description" content="Write your page description here. Keep it between 150-160 characters.">

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Sharing description">
<meta property="og:image" content="https://example.com/image.jpg">

<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Description for Twitter">
</head>
<body>
<h1>Welcome to My Page</h1>
</body>
</html>

Tools for Testing

Google PageSpeed Insights — Analyzes performance and SEO
Google Search Console — Monitor search visibility
Structured Data Testing Tool — Validate JSON-LD
Meta Tags Preview — See how pages appear when shared
Lighthouse — Audit page quality

Common Mistakes

Summary

Charset: Always use UTF-8
Viewport: Essential for mobile responsiveness
Description: 150-160 characters, unique per page
Open Graph: Control social media sharing
Twitter Cards: Optimize for Twitter sharing
JSON-LD: Structured data for search engines
Canonical tags: For duplicate content
Robots: Control search engine behavior
SEO-friendly URLs, titles, and headings

Next Steps

Accessibility Deep Dive

Master WCAG compliance and ARIA attributes. Continue →

SEO Optimization

Advanced technical SEO with HTML. Continue →

Metadata and SEO

Metadata and SEO

The Meta Tag Basics

Character Set

Viewport for Mobile

Description Meta Tag

Keywords Meta Tag

Social Media Meta Tags: Open Graph

Twitter Card Tags

Structured Data with JSON-LD

Article Markup

Organization Markup

Product Markup

Common Meta Tags for SEO

Robots Meta Tag

Language Meta Tag

Canonical Tag

Refresh Meta Tag

A Complete SEO-Optimized Head Section

SEO Best Practices

Title Tags

URL Structure

Heading Hierarchy

Internal Linking

Try It Yourself

Tools for Testing

Common Mistakes

Summary

Next Steps