Canonical URLs
10-15 minIntermediate
Preventing duplicate content issues via self-referencing tags.
Beginner Recommended
Static HTML
Link Tag.
1
Head
1
Manually add to <head>.
2
<link rel="canonical" href="https://mysite.com/page-a" />
Easy Recommended
Next.js
Metadata API.
1
Layout
1
In layout.tsx define the base.
2
export const metadata = {
metadataBase: new URL('https://site.com'),
alternates: {
canonical: '/',
},
}
Intermediate Recommended
React (Helmet)
Dynamic.
1
Component
1
<Helmet>
<link rel="canonical" href={window.location.href} />
</Helmet>
Easy Recommended
Vue / Nuxt
useHead.
1
Composable
1
useHead({
link: [ { rel: 'canonical', href: 'https://site.com' + route.path } ]
})
Easy Recommended
SvelteKit
Page Store.
1
Head
1
<script>
import { page } from '$app/stores';
</script>
<svelte:head>
<link rel="canonical" href={$page.url.href} />
</svelte:head>
Easy Recommended
Astro
Canonical Prop.
1
Props
1
Pass canonical URL to your main Layout.
2
<link rel="canonical" href={Astro.url} />
Easy Recommended
Laravel
Helper.
1
Blade
1
<link rel="canonical" href="{{ url()->current() }}" />
Easy Recommended
Rails
Request.
1
ERB
1
<link rel="canonical" href="<%= request.original_url %>" />
Easy Recommended
Django
Request.
1
Template
1
Enable request context processor.
2
<link rel="canonical" href="{{ request.build_absolute_uri }}" />
Easy Recommended
Python (Flask)
Request.
1
Jinja2
1
<link rel="canonical" href="{{ request.url }}" />
Intermediate Recommended
ASP.NET Core
DisplayUrl.
1
Extensions
1
Import Microsoft.AspNetCore.Http.Extensions.
2
<link rel="canonical" href="@Context.Request.GetDisplayUrl()" />
Intermediate Recommended
Go (Gin)
Variable.
1
Template
1
Pass URL from handler.
2
<link rel="canonical" href="{{ .Canonical }}" />
Intermediate Recommended
Java (Spring)
Servlet.
1
Thymeleaf
1
<link rel="canonical" th:href="${#httpServletRequest.requestURL}" />
Verification Checklist
- View Source