fix: Canonical links

You must have a canonical link for each language.
gorzelinski · Nov 10, 2024 · 7179e32 · 7179e32
1 parent d12bd32
commit 7179e32
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 13 deletions.
diff --git a/app/[lang]/about/page.tsx b/app/[lang]/about/page.tsx
@@ -32,6 +32,7 @@ export async function generateMetadata({
 }: PageProps): Promise<Metadata> {
   const { layout, page } = await getDictionary(lang)
   const languages = generateAlternateLinks(LINKS.about)
+  const canonical = localizePath(LINKS.about, lang)
   const metaImageParams = {
     theme: getCookie(COOKIES.theme, { cookies }) as Theme,
     title: page.about.metadata.title,
@@ -43,7 +44,7 @@ export async function generateMetadata({
     title: page.about.metadata.title,
     description: page.about.metadata.description,
     alternates: {
-      canonical: LINKS.about,
+      canonical,
       languages
     },
     openGraph: {

diff --git a/app/[lang]/blog/[slug]/page.tsx b/app/[lang]/blog/[slug]/page.tsx
@@ -60,7 +60,7 @@ export async function generateMetadata({
 }: NestedPageProps): Promise<Metadata> {
   const { frontmatter } = await getMDX<'post'>(LINKS.blog, slug, lang)
   const { layout, page } = await getDictionary(lang)
-  const canonical = `${LINKS.blog}${slug}/`
+  const canonical = localizePath(`${LINKS.blog}${slug}/`, lang)
   const languages = generateAlternateLinks(canonical)
   const metaImageParams = {
     theme: getCookie(COOKIES.theme, { cookies }) as Theme,

diff --git a/app/[lang]/blog/page.tsx b/app/[lang]/blog/page.tsx
@@ -5,7 +5,7 @@ import { WebPage, WithContext } from 'schema-dts'
 import { PageProps, Theme } from '@/types'
 import { COOKIES, LINKS } from '@/constants'
 import { getDictionary, getMDXes } from '@/scripts'
-import { generateAlternateLinks, getMetaImage } from '@/lib'
+import { generateAlternateLinks, getMetaImage, localizePath } from '@/lib'
 import { openGraph, twitter } from '@/app/shared-metadata'
 import { H1, Header, Newsletter, Post, Section } from '@/design-system'
 import { small } from '@/design-system/elements/small'
@@ -15,6 +15,7 @@ export async function generateMetadata({
 }: PageProps): Promise<Metadata> {
   const { layout, page } = await getDictionary(lang)
   const languages = generateAlternateLinks(LINKS.blog)
+  const canonical = localizePath(LINKS.blog, lang)
   const metaImageParams = {
     theme: getCookie(COOKIES.theme, { cookies }) as Theme,
     title: page.blog.metadata.title,
@@ -26,7 +27,7 @@ export async function generateMetadata({
     title: page.blog.metadata.title,
     description: page.blog.metadata.description,
     alternates: {
-      canonical: LINKS.blog,
+      canonical,
       languages
     },
     openGraph: {

diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx
@@ -30,12 +30,13 @@ export async function generateMetadata({
 }: PageProps): Promise<Metadata> {
   const { page } = await getDictionary(lang)
   const languages = generateAlternateLinks(LINKS.home)
+  const canonical = localizePath(LINKS.home, lang)
 
   return {
     title: page.home.metadata.title,
     description: page.home.metadata.description,
     alternates: {
-      canonical: LINKS.home,
+      canonical,
       languages
     }
   }

diff --git a/app/[lang]/portfolio/[slug]/page.tsx b/app/[lang]/portfolio/[slug]/page.tsx
@@ -6,7 +6,12 @@ import { NestedPageProps, Theme } from '@/types'
 import { COOKIES, LINKS } from '@/constants'
 import { i18n } from '@/i18n.config'
 import { createPagination, getDictionary, getMDX, getSlugs } from '@/scripts'
-import { generateAlternateLinks, getAbsoluteURL, getMetaImage } from '@/lib'
+import {
+  generateAlternateLinks,
+  getAbsoluteURL,
+  getMetaImage,
+  localizePath
+} from '@/lib'
 import { openGraph, twitter } from '@/app/shared-metadata'
 import { Box, Grid, VStack } from '@/styled-system/jsx'
 import {
@@ -39,7 +44,7 @@ export async function generateMetadata({
 }: NestedPageProps): Promise<Metadata> {
   const { frontmatter } = await getMDX<'project'>(LINKS.portfolio, slug, lang)
   const { layout, page } = await getDictionary(lang)
-  const canonical = `${LINKS.portfolio}${slug}/`
+  const canonical = localizePath(`${LINKS.portfolio}${slug}/`, lang)
   const languages = generateAlternateLinks(canonical)
   const metaImageParams = {
     theme: getCookie(COOKIES.theme, { cookies }) as Theme,

diff --git a/app/[lang]/portfolio/page.tsx b/app/[lang]/portfolio/page.tsx
@@ -5,7 +5,7 @@ import { WebPage, WithContext } from 'schema-dts'
 import { PageProps, Theme } from '@/types'
 import { COOKIES, LINKS } from '@/constants'
 import { getDictionary, getMDXes } from '@/scripts'
-import { generateAlternateLinks, getMetaImage } from '@/lib'
+import { generateAlternateLinks, getMetaImage, localizePath } from '@/lib'
 import { openGraph, twitter } from '@/app/shared-metadata'
 import { H1, Header, Newsletter, Project, Section } from '@/design-system'
 import { small } from '@/design-system/elements/small'
@@ -15,6 +15,7 @@ export async function generateMetadata({
 }: PageProps): Promise<Metadata> {
   const { layout, page } = await getDictionary(lang)
   const languages = generateAlternateLinks(LINKS.portfolio)
+  const canonical = localizePath(LINKS.portfolio, lang)
   const metaImageParams = {
     theme: getCookie(COOKIES.theme, { cookies }) as Theme,
     title: page.portfolio.metadata.title,
@@ -26,7 +27,7 @@ export async function generateMetadata({
     title: page.portfolio.metadata.title,
     description: page.portfolio.metadata.description,
     alternates: {
-      canonical: LINKS.portfolio,
+      canonical,
       languages
     },
     openGraph: {

diff --git a/app/[lang]/subscription-confirmed/page.tsx b/app/[lang]/subscription-confirmed/page.tsx
@@ -5,7 +5,7 @@ import { WebPage, WithContext } from 'schema-dts'
 import { PageProps, Theme } from '@/types'
 import { COOKIES, LINKS } from '@/constants'
 import { getDictionary } from '@/scripts'
-import { generateAlternateLinks, getMetaImage } from '@/lib'
+import { generateAlternateLinks, getMetaImage, localizePath } from '@/lib'
 import { openGraph, twitter } from '@/app/shared-metadata'
 import { Confetti, H1, P, Section } from '@/design-system'
 
@@ -14,6 +14,7 @@ export async function generateMetadata({
 }: PageProps): Promise<Metadata> {
   const { layout, page } = await getDictionary(lang)
   const languages = generateAlternateLinks(LINKS.subscriptionConfirmed)
+  const canonical = localizePath(LINKS.subscriptionConfirmed, lang)
   const metaImageParams = {
     theme: getCookie(COOKIES.theme, { cookies }) as Theme,
     title: page.subscriptionConfirmed.metadata.title,
@@ -25,7 +26,7 @@ export async function generateMetadata({
     title: page.subscriptionConfirmed.metadata.title,
     description: page.subscriptionConfirmed.metadata.description,
     alternates: {
-      canonical: LINKS.subscriptionConfirmed,
+      canonical,
       languages
     },
     openGraph: {

diff --git a/app/[lang]/uses/page.tsx b/app/[lang]/uses/page.tsx
@@ -5,7 +5,7 @@ import { WebPage, WithContext } from 'schema-dts'
 import { PageProps, Theme } from '@/types'
 import { COOKIES, LINKS } from '@/constants'
 import { getMDX, getDictionary } from '@/scripts'
-import { generateAlternateLinks, getMetaImage } from '@/lib'
+import { generateAlternateLinks, getMetaImage, localizePath } from '@/lib'
 import { openGraph, twitter } from '@/app/shared-metadata'
 import {
   Article,
@@ -22,6 +22,7 @@ export async function generateMetadata({
 }: PageProps): Promise<Metadata> {
   const { layout, page } = await getDictionary(lang)
   const languages = generateAlternateLinks(LINKS.uses)
+  const canonical = localizePath(LINKS.uses, lang)
   const metaImageParams = {
     theme: getCookie(COOKIES.theme, { cookies }) as Theme,
     title: page.uses.metadata.title,
@@ -33,7 +34,7 @@ export async function generateMetadata({
     title: page.uses.metadata.title,
     description: page.uses.metadata.description,
     alternates: {
-      canonical: LINKS.uses,
+      canonical,
       languages
     },
     openGraph: {