Metadata, SEO and Social Sharing

Introduction

The head of a page is invisible, but it does a lot of work. It tells search engines what the page is about, tells phones how to scale it, and decides how it looks when someone shares the link in a chat. A few well-chosen tags make a big difference.

The title and description

HTML

<title>Learn HTML from Zero | learn@aiera</title>
<meta name="description" content="Free, plain-English HTML lessons that start from zero.">

The title appears on the browser tab and as the blue link in search results. Make it specific and unique per page.
The description often appears under the link in results. It does not directly raise your ranking, but a clear one helps people decide to click.
The old keywords meta tag is ignored by Google. Do not bother with it.

Quick quiz

Where does the title element's text appear?

Viewport and language

HTML

<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

lang helps screen readers pick the right voice and helps translation.
charset makes sure every character displays correctly.
The viewport tag tells phones to use the real screen width. Without it, mobile browsers pretend the screen is wide and shrink your page.

Canonical links

If the same content can be reached at several addresses, tell search engines which one is the main one:

HTML

<link rel="canonical" href="https://example.com/html-basics/">

Open Graph for sharing

When someone shares your link in a chat or on social media, those apps read Open Graph tags to build the preview card.

HTML

<meta property="og:title" content="Learn HTML from Zero">
<meta property="og:description" content="Free lessons in plain English.">
<meta property="og:image" content="https://example.com/cover.png">
<meta property="og:url" content="https://example.com/html-basics/">

Structured data

Structured data describes your page in a way machines understand. The usual format is JSON-LD, placed in a script tag.

HTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn HTML from Zero",
  "datePublished": "2026-10-30"
}
</script>

It can unlock richer search results, but it never guarantees them. Only describe what is truly on the page.

Quick quiz

What does the viewport meta tag fix?

Try it yourself

Metadata is invisible, so this page reads it with a tiny script and prints it. Change the title and the description, then press Run and watch the console.

HTML · edit and run

Summary

Give every page a unique title and a helpful meta description.
Set lang, charset and the viewport tag.
Use rel="canonical" for duplicate addresses and Open Graph tags for share cards.
JSON-LD structured data describes your content to machines.

Metadata, SEO and Social Sharing

In this lesson you will

Introduction

The title and description

Viewport and language

Canonical links

Open Graph for sharing

Structured data

Try it yourself

Summary

Lesson complete