Adding dynamic URLs to the canonical tags in Next.js version 14.2.4: A comprehensive guide

Question

Adding dynamic URLs to the canonical tags in Next.js version 14.2.4: A comprehensive guide

I'm currently facing an issue with implementing dynamic URLs in my Next.js dynamic routes.

To generate metadata, I am utilizing a server-rendered page:

export const metadata: Metadata = {
   title: `InterviewQA |  ItsIndianGuy`,
   description:
      "Explore interview questions in various programming languages such as JavaScript, Python, C++ and more. Enhance your preparation with comprehensive language-specific content.",
   alternates: {
      canonical: "https://itsindianguy.in/interview-qa",
   },
};

The specific dynamic page that requires SEO optimization is shown in the image below:

https://i.sstatic.net/oifof2A4.png

My challenge lies in implementing this for dynamic pages as opposed to static pages, where I can't use hooks to retrieve the pathname on server-rendered pages.

What steps should I take next to address this issue?

typescript next.js seo next.js14

Answer 1

Answer №1

If you want to enhance your dynamic page, consider adding the following code snippet at the top:

import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
   params: { slug: string }
   searchParams: { [key: string]: string | string[] | undefined }
 }

 export async function generateAdditionalData(
  { params, searchParams }: Props,
    parent: ResolvingMetadata
   ): Promise<Metadata> {
  // extract parameters from the route
   const slug = params.slug

 // fetch data or use a local JSON file
 const product = await fetch(`https://.../${slug}`).then((res) => res.json())


return {
   title: product.title,
 }
}

Answer 2

If you want to enhance your dynamic page, consider adding the following code snippet at the top:

import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
   params: { slug: string }
   searchParams: { [key: string]: string | string[] | undefined }
 }

 export async function generateAdditionalData(
  { params, searchParams }: Props,
    parent: ResolvingMetadata
   ): Promise<Metadata> {
  // extract parameters from the route
   const slug = params.slug

 // fetch data or use a local JSON file
 const product = await fetch(`https://.../${slug}`).then((res) => res.json())


return {
   title: product.title,
 }
}

Adding dynamic URLs to the canonical tags in Next.js version 14.2.4: A comprehensive guide

Answer №1

Similar questions

Nestjs struggles with resolving dependencies

Utilizing the moment function within an Angular application

Expo project encountering issues with nested navigation in React-Native

Testing Next.js's getServerSideProps function with Jest: A Step-by-Step Guide

Passing a parameter from a redirect function to an onClick in React using TypeScript

Next.js page freezes when Axios request is made causing the tab to become unresponsive

Implementing Google Fonts with Tailwind CSS in a Next.js Project

Using Typescript to import an npm package that lacks a definition file

Guide for Showing Data from Json Mapper in Angular 5

The issue of assigning a file as a prop in React TypeScript: ("True" type cannot be assigned to "ChangeEventHandler<HTMLInputElement>")

The ngx-mat-intl-tel-input plugin is experiencing issues with functionality within the Angular 17 framework

What is the best way to refresh the snapshots in my React/TypeScript project?

What is causing the TypeError in next-auth when attempting to destructure the 'manager' property of the 'connection' object, which is null?

Exploring opportunities to earn revenue from a website created with Next Js through Adsterra

Issue with Variable Passing Correctly to Form

The i18next-http-backend module could not be loaded

Challenging Issue: "The 'any' type cannot be assigned to the 'never' type"

Having trouble setting State in React with Typescript?

Testing a NestJS service with multiple constructor parameters can be done by utilizing various techniques such as dependency

Generate an observable by utilizing a component method which is triggered as an event handler