Question 182187 in SEO Question posted in
Some basic information to get you started with this can be found here.

Seo – Next JS Dynamic Metadata

I was trying to update metadata dynamically in NextJS 13. For this I have a rest api as backend that sends metadata like title, description, keywords, images etc . My goal was, by this approach I can update the sites metadata anytime I want. But the problem is, after applying this, It works fine in my local server but once I hosted it to vercel server it is not working as I wanted. It fetched data once, but when I change the data in the API it is not updating in the website.

Here is a code sample of what I did,

  • using this function in about-us/page.tsx
export async function generateMetadata(): Promise<Metadata> {
    const meta = await getMetaApi("about");
    return {
        title: `${meta?.data?.page_name} | Legato Designs `,
        generator: "Legato Designs",
        applicationName: "Legato Designs",
        keywords: meta?.data?.meta_keywords?.split(","),
        authors: [{name: 'Golden Infotech Ltd'}, {name: 'Golden Infotech Ltd', url: 'https://goldeninfotech.com.bd/'}],
        creator: 'Golden Infotech Ltd',
        publisher: 'Legato Designs',
        metadataBase: new URL("https://legatodesigns.com/"),
        alternates: {
            canonical: '/',
            languages: {
                'en-US': '/en-US',
                'de-DE': '/de-DE',
            },
        },
        openGraph: {
            title: meta?.data?.og_title,
            description: meta?.data?.og_description,
            url: 'https://legatodesigns.com/',
            siteName: 'Legato Designs',
            images: [
                {
                    url: `${process.env.NEXT_PUBLIC_BASE_URL_IMG_ALT}${meta?.data?.og_image}`,
                    width: 800,
                    height: 600,
                },
                {
                    url: `${process.env.NEXT_PUBLIC_BASE_URL_IMG_ALT}${meta?.data?.meta_image}`,
                    width: 1800,
                    height: 1600,
                    alt: 'Legato Designs',
                },
            ],
            locale: 'en-US',
            type: 'website',
        },
        twitter: {
            card: 'summary_large_image',
            title: meta?.data?.og_title,
            description: meta?.data?.og_description,
            creator: '@goldeninfotech',
            images: [`${process.env.NEXT_PUBLIC_BASE_URL_IMG_ALT}${meta?.data?.og_image}`],
        },
        robots: {
            index: true,
            follow: true,
            nocache: true,
            googleBot: {
                index: true,
                follow: false,
                noimageindex: true,
                'max-video-preview': -1,
                'max-image-preview': 'large',
                'max-snippet': -1,
            },
        },
        icons: {
            icon: '/legato_fav.png',
            shortcut: '/legato_fav.png',
            apple: '/legato_fav.png',
            other: {
                rel: '/legato_fav',
                url: '/legato_fav.png',
            },
        },
        manifest: 'https://nextjs.org/manifest.json',

    };
}
  • Code for getMetaApi function
export const getMetaApi = async (page) => {
    try {
        const response = await Axios.get(`get-meta/${page}`);
        return response.data;
    } catch (err) {
        console.log(err)
    }
}
  • and here is what the api responses with
{
"status": true,
"data": {
"id": 1,
"page_name": "Home",
"slug": "home",
"meta_title": "Legato Designs | Home",
"meta_keywords": "legato design, best furniture mart",
"meta_description": "Shop high-quality furniture at Legato Designs. Our wide selection of modern and contemporary furniture will elevate your home decor.",
"meta_image": null,
"og_title": "Legato Designs Home",
"og_description": "Shop high-quality furniture at Legato Designs. Our wide selection of modern and contemporary furniture will elevate your home decor.",
"og_image": "uploads/collection/meta/6463bb1520020.20230516.jpg",
"created_at": "2023-04-16 12:47:31",
"updated_at": "2023-05-16 23:19:17"
}
}
Tags:

2

Answers


  1. 0

    You can instruct Next to re-generate your page (and re-fetch the metadata) at fixed intervals by exporting the following constant in your page:

    // re-validate every 10 minutes
export const revalidate = 600;

    You can read about other revalidation strategies in Next.js documentation here – https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating

    Login or Signup to reply.
  2. 0

    #typescript / #javascript

    //navigate to /app/layout.tsx

//paste the following code*


import { Metadata } from "next";

export const metadata: Metadata = {
 title: {
  template: "... | %s",
  default: "...",
 },
 description: "...",
 icons: {
  icon: "/...",
 apple: [
   {
     url: "/...",
   },
 ],
 other: [
    {
     rel: "custom logo description for your project ...",
     url: "/...",
    }
   ],
  },
 };



 //navigate to /app/page.tsx

 //paste the following code


 export const metadata = {
   title: {
    absolute: "custom page title for Home page...",
   }
 };

 //use the metadata object in your page.tsx, page.jsx files.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search