Metadata and Canonical URL Examples

Metadata is small, but it is easy to get wrong at scale. The main rule is consistency: every indexable page should have a unique title, useful description, canonical URL, language, viewport tag, and share metadata where appropriate.

Static HTML example

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Structured Data JSON-LD Examples for Technical SEO</title>
  <meta name="description" content="Article, WebPage, Organization, and BreadcrumbList JSON-LD examples for a small technical content site.">
  <link rel="canonical" href="https://example.com/articles/structured-data-json-ld-examples/">
  <meta property="og:type" content="article">
  <meta property="og:title" content="Structured Data JSON-LD Examples for Technical SEO">
  <meta property="og:description" content="Schema examples for a small technical content site.">
  <meta property="og:url" content="https://example.com/articles/structured-data-json-ld-examples/">
  <meta property="og:image" content="https://example.com/assets/schema-guide.jpg">
</head>

Next.js App Router example

In a Next.js App Router project, metadata can be exported from a page or layout. Use absolute canonical URLs in production.

export const metadata = {
  title: "Structured Data JSON-LD Examples for Technical SEO",
  description: "Article, WebPage, Organization, and BreadcrumbList examples for a small technical content site.",
  alternates: {
    canonical: "https://example.com/articles/structured-data-json-ld-examples/"
  },
  openGraph: {
    type: "article",
    url: "https://example.com/articles/structured-data-json-ld-examples/",
    title: "Structured Data JSON-LD Examples for Technical SEO",
    description: "Schema examples for a small technical content site.",
    images: ["https://example.com/assets/schema-guide.jpg"]
  }
};

Astro frontmatter example

Astro sites often keep metadata in frontmatter and pass it into a layout component.

---
import BaseLayout from "../layouts/BaseLayout.astro";

const page = {
  title: "Robots.txt and Sitemap Examples",
  description: "Safe robots.txt and sitemap examples for content sites.",
  canonical: "https://example.com/articles/robots-txt-sitemap-examples/"
};
---

<BaseLayout title={page.title} description={page.description} canonical={page.canonical}>
  <h1>Robots.txt and Sitemap Examples</h1>
</BaseLayout>

WordPress theme checklist

In WordPress, avoid hardcoding the same title and description on every page. Use the site title, page title, excerpt, and canonical permalink from the CMS or a trusted SEO plugin. Then verify the final HTML source, because plugin settings and theme templates can conflict.

One canonical tag per page.
No duplicate title tag from theme plus plugin.
Open Graph image is a real image URL, not a missing placeholder.
Archive pages have intentional index or noindex behavior.
Attachment pages are disabled or handled deliberately.

Title patterns that avoid sameness

Page type	Useful pattern	Example
Definition	What Is [Concept]? Practical Definition	What Is GEO? A Practical Definition for Content Teams
Workflow	How to [Task] Without [Risk]	How to Run a GEO Content Audit Without Guesswork
Examples	[Thing] Examples for [Audience]	Robots.txt Examples for Technical Content Sites
Comparison	[A] vs [B]: When to Use Each	Canonical Tags vs Redirects: When to Use Each

Canonical mistakes to avoid

Pointing every page canonical to the homepage.
Using relative canonical URLs in one template and absolute URLs in another.
Canonicalizing a strong article to a weaker category page.
Leaving staging or preview domains in production metadata.
Publishing duplicate pages and hoping canonical tags will fix the content strategy.

Production variables for a metadata template

A reliable template should not ask editors to hand-write the same tags on every page. Store the title, description, canonical path, date, author, image, and page type in one content record, then render the tags from that record. The final HTML should be boring and predictable.

const pageMeta = {
  title: "Robots.txt and Sitemap Examples for Content Sites",
  description: "Practical robots.txt and sitemap.xml examples for technical content sites.",
  canonicalPath: "/articles/robots-txt-sitemap-examples/",
  type: "article",
  image: "https://seogeo.tech/wp-content/uploads/2026/05/geo-measurement-dashboard.jpg",
  published: "2026-05-30",
  updated: "2026-05-31"
};

Canonical decision table

Situation	Best action	Why
Tracking parameters show the same article	Self-canonical to the clean URL.	The parameter version can exist, but the clean URL is preferred.
Old article moved permanently	Use a 301 redirect.	Users and crawlers should land on the replacement.
Printer-friendly version exists	Canonical to the main article.	The alternate format should not compete with the main page.
Two articles overlap heavily	Merge content and redirect the weaker URL.	Canonical tags are not a substitute for consolidation.

Live-source QA checklist

Always inspect the deployed page because CMS plugins, themes, and framework defaults can modify metadata after the template looks correct locally.

curl -L https://example.com/articles/metadata-canonical-url-examples/ | grep -Ei "title|description|canonical|og:image"

Exactly one canonical tag is present.
The canonical URL returns 200 and is listed in the sitemap.
The Open Graph image is a real page image, not a missing placeholder.
The title reads naturally without repeating the site name twice.

References

Framework and CMS gotchas

Most metadata problems happen when two systems both think they own the head. A framework layout may render a canonical tag while a CMS plugin renders another. A theme may set Open Graph data, then a plugin may replace only part of it. Always check the final source after deployment.

Stack	Watch for	Practical fix
Next.js	Relative canonical paths in production metadata.	Use absolute production URLs from one site config.
Astro	Every page inheriting the same default description.	Require title and description frontmatter for indexable pages.
WordPress	Theme title plus SEO plugin title duplication.	Let one system own title and canonical output.
Static generators	Staging domains left in Open Graph URLs.	Generate metadata from environment-aware site config.

Before and after metadata

Before

<title>SEO Tips</title> and a generic description used on multiple pages.

After

<title>Robots.txt and Sitemap Examples for Content Sites</title> with a description that names the examples, private paths, sitemap discovery, and validation steps.

Practical rollout notes

Use this guide when building or reviewing the head template for a CMS, static site, or framework app. Metadata work is small per page, but mistakes repeat across the whole site when the template is wrong.

Acceptance criteria

Page: Metadata and Canonical URL Examples
Reader task: clear in the introduction
Implementation proof: examples, tables, commands, or checklist present
Trust proof: dates, author or publisher context, and source links where needed
Maintenance proof: revisit trigger documented

Title and description are unique for the page task.
There is exactly one canonical tag in the final source.
Open Graph and Twitter images return 200.
The CMS or framework does not inject a second conflicting metadata layer.

When to revisit

Revisit after theme changes, SEO plugin changes, route migrations, or any switch between static, server-rendered, and WordPress-published pages.