I’m working on a Next.js project and I’m trying to implement dynamic OpenGraph meta tags. Specifically, I want to set the og:url dynamically based on the current page URL. However, I’m not sure how to achieve this within the Next.js framework.
export async function generateMetadata({ params, searchParams }, parent) {
const metadata = await getRequest(
`get-page-seo`
);
if (!metadata) {
return null;
}
const previousImages = (await parent).openGraph?.images || [];
let metatitle = metadata.meta_title;
let metadescription = metadata.meta_description
let metaogImage = metadata.og_image && metadata.seo.og_image;
let metaKeyword = metadata.meta_key
return {
title: metatitle,
description: metadescription,
keywords: metaKeyword,
openGraph: {
images: [`${metaogImage}`, ...previousImages],
type: "website",
url : "" // This should be dynamic value will be same as browser url
},
twitter: {
card: "summary_large_image",
title: twitterTitle,
description: twitterDescription,
images: [`${twitterImage}`, ...previousImages],
},
};
}