I am facing an issue with my Nextjs project that uses the app router. Inside the app directory, there is a file named opengraph-image.png. I have set this file to be the OG Image for the landing page, but after deploying and checking, the OG image does not appear. I have restructured my code in layout.js by moving it into RootLayout due to a mix of client and server side code. Can anyone provide insight on why the OG image is not displaying?
import RootLayout from "@/components/root/root-layout";
import { Metadata } from "next";
const title = "Test Title";
const description = "Test Description";
export const metadata = {
title,
description,
openGraph: {
title,
description,
},
twitter: {
title,
description,
card: "summary_large_image",
creator: "@me",
},
metadataBase: new URL("https://urlgoeshere"),
themeColor: "#ffffff",
};
export default function OGLayout({ children }) {
return <RootLayout children={children} />;
}
I even tried hardcoding an image instead of generating it dynamically, but the image still doesn't show up.