0
0
NextJSframework~10 mins

Canonical URLs in NextJS - Step-by-Step Execution

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Concept Flow - Canonical URLs
Page Request Received
↓
Check if Canonical URL is set
Yes | No↓
Add <link rel="canonical"> tag
↓
Render Page with Canonical URL
↓
Browser & Search Engines read canonical tag
↓
Search engines use canonical URL for indexing
When a page is requested, Next.js checks if a canonical URL is set. If yes, it adds a <link rel="canonical"> tag in the page head. This helps browsers and search engines know the preferred URL for the content.
Execution Sample
NextJS
import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head><link rel="canonical" href="https://example.com/page" /></Head>
      <main>Page content</main>
    </>
  );
}
This Next.js component adds a canonical URL tag to the page head to tell search engines the preferred URL.
Execution Table
StepActionResultNotes
1Page requested by browserNext.js starts renderingInitial request triggers render
2Check for canonical URL in HeadFound <link rel="canonical" href="https://example.com/page" />Canonical URL is set
3Add canonical tag to HTML headHTML head includes canonical link tagTag added before main content
4Render main content<main>Page content</main>Page body rendered
5Send full HTML to browserBrowser receives HTML with canonical tagBrowser and search engines see canonical URL
6Search engines read canonical URLUse canonical URL for indexingAvoids duplicate content issues
7EndPage fully rendered and indexedProcess complete
💡 All steps complete; canonical URL tag added and page rendered
Variable Tracker
VariableStartAfter Step 2After Step 3Final
canonicalTagundefined<link rel="canonical" href="https://example.com/page" /><link rel="canonical" href="https://example.com/page" />Present in HTML head
pageContentundefinedundefinedundefined<main>Page content</main>
Key Moments - 2 Insights
Why do we add a canonical URL tag in the page head?
The canonical tag tells search engines which URL is the preferred one to index, preventing duplicate content issues. See execution_table step 6.
What happens if we don't add a canonical URL tag?
Search engines might index multiple URLs with the same content, which can hurt SEO. In execution_table step 2, if no canonical tag is found, it is not added.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution_table, what is the canonicalTag variable after step 3?
A<link rel="canonical" href="https://example.com/page" />
Bundefined
C<main>Page content</main>
DNo tag present
💡 Hint
Check variable_tracker row for canonicalTag after Step 3
At which step does the canonical URL tag get added to the HTML head?
AStep 1
BStep 2
CStep 3
DStep 4
💡 Hint
See execution_table action column for when the tag is added
If the canonical URL was missing, what would change in the execution_table?
AStep 6 would still use a canonical URL
BStep 2 would show no canonical tag found
CStep 3 would add a default canonical tag
DPage content would not render
💡 Hint
Refer to key_moments about missing canonical tag and execution_table step 2
Concept Snapshot
Canonical URLs in Next.js:
- Add <link rel="canonical" href="URL" /> inside <Head>
- Helps search engines know the preferred page URL
- Prevents duplicate content SEO issues
- Rendered in HTML head before page content
- Essential for SEO best practices
Full Transcript
When a page is requested in Next.js, the system checks if a canonical URL is set in the Head component. If found, it adds a <link rel="canonical"> tag to the HTML head. This tag tells browsers and search engines which URL is the preferred one for indexing. The page content is then rendered and sent to the browser. Search engines read the canonical tag to avoid indexing duplicate content. If no canonical URL is set, the tag is not added, which can cause SEO problems. This process ensures the page is properly indexed with the correct URL.