feat(seo): add canonical URL meta field

Author: ansidev

src/components/SEOMeta.astro

@@ -4,6 +4,7 @@ interface Props {
   description?: string
   favicon?: string
   faviconMimeType?: string
+  canonicalURL?: string | undefined
   keywords?: string
   author?: string
   robots?: string
@@ -14,16 +15,20 @@ const {
   description,
   favicon,
   faviconMimeType,
+  canonicalURL,
   keywords,
   author,
   robots,
 } = Astro.props
+
+const _canonicalURL = canonicalURL || Astro.url.href
 ---
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="icon" type={faviconMimeType} href={favicon} />
+{_canonicalURL && <link rel="canonical" href={_canonicalURL} />}
 
 <!-- Primary Meta Tags -->
 <title>{title}</title>

src/content/config.ts

@@ -8,6 +8,7 @@ const leetcodeSolutionCollection = defineCollection({
     pubDate: z.string(),
     difficulty: z.string(),
     tags: z.array(z.string()),
+    canonicalURL: z.string().optional(),
   }),
 })
 

src/layouts/AppLayout.astro

@@ -9,12 +9,13 @@ import siteConfig from '@/configs/site'
 export interface Props {
   title: string
   description: string
+  canonicalURL?: string | undefined
   author: string
   headerCssClasses?: string
   keywords?: string[]
 }
 
-const { title, description = '', author, headerCssClasses = '' } = Astro.props
+const { title, description = '', canonicalURL, author, headerCssClasses = '' } = Astro.props
 const { favicon, faviconMimeType } = siteConfig
 const pageDescription =
   description.length > 0 ? description : `${title} - ${siteConfig.description}`
@@ -26,6 +27,7 @@ const pageDescription =
     <SEOMeta
       title={title}
       description={pageDescription}
+      canonicalURL={canonicalURL}
       favicon={favicon}
       faviconMimeType={faviconMimeType}
       author={author}

src/layouts/PostLayout.astro

@@ -18,6 +18,7 @@ const { author } = siteConfig
   headerCssClasses="max-w-5xl"
   title={frontmatter.title}
   description={frontmatter.title}
+  canonicalURL={frontmatter.canonicalURL}
   keywords={[
     ...((frontmatter.keywords as string[]) || []),
     ...((frontmatter.tags as string[]) || []),