SEO & Social Meta Tags

Search engines and social networks read your HTML to decide how a page appears in search results and when someone shares a link. Good titles, descriptions, structured headings, Open Graph tags and structured data help people find your pages — and want to click on them.

What search engines look at

  • The title — the clickable headline in results.
  • The meta description — often (not always) the snippet under the title.
  • Headings and content — the <h1>, section headings and the text itself.
  • Link text — both on your pages and on other sites linking to you.
  • Image alt text — for image search and context.
  • Technical signals — mobile-friendliness, speed, HTTPS, canonical URLs, valid HTML.

Titles and descriptions

HTML seo.html
<title>Lemon Pancakes in 20 Minutes — Kitchen Notes</title>
<meta name="description" content="Fluffy lemon pancakes with simple ingredients, ready in 20 minutes. Includes tips for making the batter the night before.">
  • Make each page's title unique and specific, with the most important words first. Around 50–60 characters fits in most results.
  • Write the description for humans: a summary of about 150 characters that makes people want to click.
  • Don't stuff keywords — search engines ignore or penalise it, and readers find it off-putting.

Social sharing: Open Graph

When a link is shared on social networks and messaging apps, they look for Open Graph tags to build a preview card:

HTML opengraph.html
<title>Lemon Pancakes — Kitchen Notes</title>
<meta property="og:type" content="article">
<meta property="og:title" content="Lemon Pancakes in 20 Minutes">
<meta property="og:description" content="Fluffy, zesty and easy — the perfect weekend breakfast.">
<meta property="og:image" content="https://kitchennotes.example/img/pancakes-1200x630.jpg">
<meta property="og:image:alt" content="A stack of pancakes with lemon slices">
<meta property="og:url" content="https://kitchennotes.example/recipes/lemon-pancakes">
<meta property="og:site_name" content="Kitchen Notes">
<meta name="twitter:card" content="summary_large_image">

Use an absolute URL for the image, about 1200×630 pixels. The twitter:card tag asks X (Twitter) to show a large image; most other platforms read the og: tags.

Structured data (JSON-LD)

Structured data describes your content in a machine-readable vocabulary (schema.org), which can unlock "rich results" — star ratings, recipe cooking times, event dates, FAQ dropdowns:

HTML jsonld.html
<title>Lemon Pancakes</title>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Lemon Pancakes",
  "author": { "@type": "Person", "name": "Ana Silva" },
  "totalTime": "PT20M",
  "recipeYield": "8 pancakes",
  "recipeIngredient": ["2 eggs", "1 cup flour", "1 lemon"],
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "ratingCount": "126" }
}
</script>

Common types include Article, Product, Recipe, Event, FAQPage, LocalBusiness and BreadcrumbList. Search engines' rich-results testing tools check whether your markup is valid. Only describe what's actually on the page.

Controlling indexing

HTML robots.html
<title>Thank you</title>
<meta name="robots" content="noindex">
TXT robots.txt
User-agent: *
Disallow: /admin/
Sitemap: https://kitchennotes.example/sitemap.xml

A robots meta tag keeps a single page out of search results. A robots.txt file at the site root tells crawlers which paths not to visit, and points them to an XML sitemap listing all your pages. Note that robots.txt isn't private — never use it to "hide" sensitive URLs.

Multilingual sites

HTML hreflang.html
<title>Recipes</title>
<link rel="alternate" hreflang="en" href="https://kitchennotes.example/en/">
<link rel="alternate" hreflang="pt" href="https://kitchennotes.example/pt/">
<link rel="alternate" hreflang="x-default" href="https://kitchennotes.example/">

hreflang alternates tell search engines which language version to show each user.

HTML habits that help SEO

  • One clear <h1> per page and a logical heading outline.
  • Descriptive URLs: /recipes/lemon-pancakes rather than /p?id=4821.
  • Descriptive link text and alt text.
  • Semantic elements like <main> and <article>.
  • Fast-loading, mobile-friendly pages (lessons 43 and 45).
  • Above all: useful, original content written for people.
PreviousThe <head>