Module 14: Metadata, SEO, and Resource Loading
Canonical, Alternate Languages, and Social Metadata
Identify the preferred URL and provide useful metadata when a page is shared.
A canonical link identifies the preferred URL for a document when equivalent or duplicate versions exist. It belongs in the head:
<link rel="canonical" href="https://example.com/guides/html/">
The canonical URL should be absolute and should point to the intended canonical page. Do not point every page to the homepage. Canonicalization is a signal to search engines, not a substitute for consistent internal links, redirects, or a clean URL strategy.
For sites with genuinely equivalent language versions, hreflang alternate links can identify the relationship between them. The language and region codes must match the actual page versions, and the set of links should be reciprocal and consistent.
Social platforms may read Open Graph metadata:
<meta property="og:title" content="HTML Tutorial: From Basics to Accessible Pages">
<meta property="og:description" content="Learn modern HTML with practical examples and projects.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/html/">
<meta property="og:image" content="https://example.com/images/html-guide.png">
These values should describe the page and use image URLs that are publicly accessible. In Next.js, prefer generating these tags through the Metadata API so the same values are not hand-maintained in several places.