SEO and social cards

Make a page findable and make its link preview look like someone meant it.

19of 22
≈ 11Min read
8Parts

What a search engine actually reads

A crawler fetches the page, renders it, and reads the text. Almost everything that helps it is something you have already learned: one <h1> naming the subject, headings in order, real text rather than pictures of text, descriptive link text, alt on images, a fast page that does not jump about.

There is no tag that makes a page rank. The tags below help a search engine understand and present the page — the content still has to be worth finding.

The keywords tag is dead

<meta name="keywords"> has been ignored by every major search engine for well over a decade. Writing one is a signal that a page was made from a checklist.

Title and description

  • Put the distinctive part of the title first. A result list truncates around 60 characters, and the brand at the front wastes them.
  • The description is not a ranking factor. It is the sentence that decides whether anyone clicks, so write it for a person.
  • Both must be unique on every page. Duplicated titles across a site are the most common avoidable problem.
  • If you leave the description out, the engine writes one from the page — sometimes better than a bad one you wrote.
the two lines in a search result
<title>Learn HTML — DOMVYBE</title>
<meta name="description" content="The document, the elements and the meaning behind them: 22 lessons with a code editor and automatic checks.">

Canonical

A page reachable at several URLs — with and without a trailing slash, with tracking parameters, on two domains — looks like several pages, and the credit is split between them. A canonical link names the one that counts.

one address for one page
<link rel="canonical" href="https://domvybe.com/learn/html/">

Use the absolute URL. Every page should have one, including the page that is itself canonical.

Open Graph

Open Graph is what a link preview uses in messaging apps and social networks. Without it a shared link is a bare URL, and the difference in how often people open it is not small.

  • The image URL must be absolute, with the scheme and domain. A relative path is the single commonest reason a preview is blank.
  • 1200 × 630 is the size everything accepts. Give the width and height so the card is laid out before the image arrives.
  • Most scrapers cache aggressively. After changing the tags you normally have to ask the platform to re-fetch.
  • Keep og:title short — it is a card, not a headline.
the tags that matter
<meta property="og:type" content="article">
<meta property="og:site_name" content="DOMVYBE">
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="The document, the elements and the meaning behind them.">
<meta property="og:url" content="https://domvybe.com/learn/html/">
<meta property="og:image" content="https://domvybe.com/ui/media/learn-card.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The DOMVYBE learn page">
<meta name="twitter:card" content="summary_large_image">

Robots

noindex keeps a page out of results — right for a staging copy, a thank-you page or a printable duplicate. nofollow stops credit flowing through its links. noarchive stops a cached copy being shown.

A robots.txt file at the root controls crawling, not indexing. A page blocked in robots.txt can still appear in results if other sites link to it — and because the crawler cannot fetch it, it will never see your noindex. To remove a page, let it be crawled and mark it noindex.

keeping a page out
<meta name="robots" content="noindex, follow">

Sitemap

A sitemap lists the pages you want crawled and when each changed. It matters most for a large site or one whose pages are not all reachable by links. Generate it from the same source as your navigation, or it will drift.

sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://domvybe.com/</loc><lastmod>2026-09-21</lastmod></url>
  <url><loc>https://domvybe.com/learn/</loc><lastmod>2026-09-21</lastmod></url>
</urlset>

Structured data

JSON-LD describes what the page is about in a form a machine can use — an article, a product, a recipe, an event. It is what produces the extra detail some results show.

an article
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn HTML",
  "description": "The document, the elements and the meaning behind them.",
  "datePublished": "2026-09-21",
  "author": { "@type": "Person", "name": "Ulvi Shabanbayli" },
  "publisher": { "@type": "Organization", "name": "DOMVYBE" }
}
</script>
It must describe the page

Structured data that claims something the page does not show is treated as spam. Never mark up a review, a rating or a price that is not there.

A checklist per page

  • A unique <title> with the distinctive part first.
  • A <meta name="description"> written for a person.
  • A <link rel="canonical"> with the absolute URL.
  • og:title, og:description, og:image (absolute), og:url, twitter:card.
  • One <h1>, headings in order, alt on every image.
  • <html lang> set correctly.
  • The page in sitemap.xml.

Practice

Next →Languages and direction