Metadata for sharing and search: canonical, Open Graph and icons

When a page is shared in a chat app, listed in search results or saved to a phone's home screen, the preview is built from metadata in the head. A dozen lines decide whether that preview shows the right URL, a clear title and a proper image, or a random crop and a broken icon.

A complete example

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sourdough classes | Riverside Bakery</title>
  <meta name="description" content="Learn to bake sourdough in a three-hour weekend class. Small groups, all equipment provided.">
  <link rel="canonical" href="https://www.riversidebakery.example/classes/sourdough/">

  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.riversidebakery.example/classes/sourdough/">
  <meta property="og:title" content="Sourdough classes">
  <meta property="og:description" content="A three-hour weekend class. Small groups, all equipment provided.">
  <meta property="og:image" content="https://www.riversidebakery.example/images/share/sourdough-class.jpg">
  <meta property="og:image:alt" content="Students shaping dough at a long wooden bench">
  <meta property="og:site_name" content="Riverside Bakery">
  <meta property="og:locale" content="en_GB">
  <meta name="twitter:card" content="summary_large_image">

  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta name="theme-color" content="#1e3a5f">
</head>
<body>
  <h1>Sourdough classes</h1>
</body>
</html>

Canonical URLs

The same content is often reachable at several URLs:

https://www.riversidebakery.example/classes/sourdough/
https://riversidebakery.example/classes/sourdough/
https://www.riversidebakery.example/classes/sourdough/?utm_source=newsletter
https://www.riversidebakery.example/classes/sourdough/?sort=date

Search engines see these as separate pages with duplicate content. The canonical link names the preferred version:

<link rel="canonical" href="https://www.riversidebakery.example/classes/sourdough/">

Rules that avoid common problems:

• Use an absolute URL, including https:// and the domain.
• Put the canonical on every indexable page, pointing to itself when it is already the preferred version. This is called a self-referencing canonical.
• Point to a page that returns a normal 200 response, not to a redirect or an error page.
• Use only one canonical per page.

Search engines treat the canonical as a strong hint, not a command. They may choose a different URL if other signals, such as redirects and internal links, disagree. Keep your links and sitemaps pointing to the same canonical URLs.

Controlling indexing with robots

<meta name="robots" content="noindex">

noindex asks search engines not to show the page in results. Use it for thank-you pages, internal search results and staging sites. Other values include nofollow (do not follow the links on this page) and nosnippet.

Two common confusions:

• robots.txt controls crawling, while the robots meta tag controls indexing. If robots.txt blocks a page, crawlers never see its noindex, so the URL can still appear in results.
• A noindex left on a site after launch hides it from search. Check this on every launch.

Open Graph

Open Graph is a protocol created by Facebook and now read by most social networks and messaging apps to build link previews. The tags use property, not name:

For the image, a landscape image of about 1200 by 630 pixels is a widely used size that crops well across platforms. Keep important text and faces away from the edges, and keep the file reasonably small. Platforms differ in exactly how they crop and cache images, so preview important pages with each platform's own sharing debugger.

X (Twitter) cards

X reads Open Graph tags as a fallback, so you usually need only one extra tag to choose the layout:

<meta name="twitter:card" content="summary_large_image">

summary_large_image shows a large image; summary shows a small square thumbnail.

Icons

Different places need different icons:

An SVG favicon can include a prefers-color-scheme media query inside the file, so it adapts to dark browser themes.

The web app manifest

The manifest is a JSON file that describes your site as an app: its name, colours and icons at larger sizes.

{
  "name": "Riverside Bakery",
  "short_name": "Riverside",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1e3a5f",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

A manifest alone does not make a site installable as a full progressive web app, but it gives devices the icons and names they need when people add the site to their home screen.

What CMSs and SEO plugins handle for you

On WordPress, SEO plugins such as Yoast SEO and Rank Math generate the canonical, robots, Open Graph and X card tags from settings and post fields. WordPress itself outputs the site icon tags when you set one in the Customizer or Site Editor. Frameworks such as Next.js and Astro have their own metadata helpers.

Your job then shifts from writing the tags to:

• filling in the fields: a share image, a social title and a description for important pages,
• checking the output in view source, because themes and plugins sometimes add duplicate tags,
• making sure only one tool writes each tag.

Summary

• Add an absolute, self-referencing rel="canonical" to every indexable page.
• Use meta name="robots" content="noindex" for pages that should not appear in search, and remove it at launch.
• Add Open Graph tags for title, description, image, image alt and URL, plus twitter:card.
• Provide an .ico and SVG favicon, an apple-touch-icon and a web app manifest.
• On WordPress, let one SEO plugin write these tags, and check the output in view source.