How to add canonical url astro

AstroHow-ToBeginner · 3 min read

How to Add Canonical URL in Astro for SEO

In Astro, add a canonical URL by including a <link rel="canonical" href="your-url" /> tag inside the <head> of your page component. This tells search engines the preferred URL for your content to avoid duplicate indexing.

📐

Syntax

To add a canonical URL in Astro, place a <link> tag with rel="canonical" and the href attribute inside the <head> section of your page. This tag points to the preferred URL for the page.

<link>: HTML tag to link external resources.
rel="canonical": Specifies the link as a canonical URL.
href="URL": The preferred URL you want search engines to index.

html

<head>
  <link rel="canonical" href="https://example.com/page-url" />
</head>

💻

Example

This example shows how to add a canonical URL in an Astro page component. The canonical link is placed inside the <head> tag to tell search engines the main URL for this page.

astro

---
const canonicalUrl = 'https://example.com/my-page';
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Astro Page</title>
    <link rel="canonical" href={canonicalUrl} />
  </head>
  <body>
    <h1>Welcome to My Astro Page</h1>
    <p>This page has a canonical URL set for SEO.</p>
  </body>
</html>

Output

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Astro Page</title> <link rel="canonical" href="https://example.com/my-page"> </head> <body> <h1>Welcome to My Astro Page</h1> <p>This page has a canonical URL set for SEO.</p> </body> </html>

⚠️

Common Pitfalls

Common mistakes when adding canonical URLs in Astro include:

Placing the <link rel="canonical"> tag outside the <head> section, which makes it ineffective.
Using relative URLs instead of absolute URLs in the href attribute, which can confuse search engines.
Forgetting to update the canonical URL dynamically for different pages, causing duplicate canonical tags.

Always use absolute URLs and place the tag inside <head>.

astro

---
const wrongUrl = '/my-page';
---
<html lang="en">
  <head>
    <link rel="canonical" href={wrongUrl} /> <!-- Wrong: relative URL -->
  </head>
  <body>
    <h1>Page</h1>
  </body>
</html>

---
const correctUrl = 'https://example.com/my-page';
---
<html lang="en">
  <head>
    <link rel="canonical" href={correctUrl} /> <!-- Correct: absolute URL -->
  </head>
  <body>
    <h1>Page</h1>
  </body>
</html>

📊

Quick Reference

Tips for adding canonical URLs in Astro:

Always use absolute URLs in the href.
Place the canonical <link> inside the <head> tag.
Use variables to set dynamic URLs for multiple pages.
Check your rendered HTML in browser DevTools to confirm the tag is present.

✅

Key Takeaways

Add the canonical URL inside the tag using .

Always use absolute URLs to avoid confusion by search engines.

Place the canonical tag in every page to prevent duplicate content issues.

Use Astro variables to dynamically set canonical URLs for different pages.

Verify the canonical tag appears correctly in the final HTML output.