Next.js Discord

Discord Forum

open graph is not working

Unanswered
Mini Rex posted this in #help-forum
Open in Discord
Mini RexOP
open graph is not working in next js 13 because it is not getting server rendered metadata can anyone tell me how can i server render my open graph in metatag
website :- https://striversheet.pradeepbisht.com/
github :-https://github.com/pradeep800/striver-sheet-webiste/blob/main/app/layout.tsx
if you check view page source it is adding script tag whcih should not be the case it should send html
can someone tell me how i can i make this metatag render on server side

23 Replies

Real issue is it is generating metatag by script but they should be rendered in server
@Mini Rex Still same issue u can see github code
joulev
your code is still wrong. openGraph.images is an array. read the docs very carefully before saying it doesn't work
since you use typescript, import the Metadata type and use it to type metadata
@Mini Rex Real issue is it is generating metatag by script but they should be rendered in server
joulev
get your code correct first before we talk about this issue
Mini RexOP
i have tried it also it doesn't work
i am using Metadata type and it allow me do so i thought it is valid(i still think it is idk)
joulev
hmm, interesting
@joulev hmm, interesting
Mini RexOP
please help i am most probably going to be stuck with this error for eternity
joulev
with this code it works fine for me
import { Metadata } from "next";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head />
      <body>{children}</body>
    </html>
  );
}

export const metadata: Metadata = {
  title: "Striver's Sheet",
  icons: {
    icon: "/ss.png",
  },

  openGraph: {
    type: "website",
    locale: "en_US",
    siteName: "Striver Sheet",
    description:
      "Level up your interview skills in 27 days with 191 frequently asked questions with videos, curated for DSA interviews.",
    images: [
      { url: "https://striversheet.pradeepbisht.com/opengraph-image.jpg" },
    ],
    url: "https://striversheet.pradeepbisht.com",
    title: "Striver Sheet",
  },
  twitter: {
    description:
      "Level up your interview skills in 27 days with 191 frequently asked questions with videos, curated for DSA interviews.",

    images: [
      { url: "https://striversheet.pradeepbisht.com/opengraph-image.jpg" },
    ],
    creator: "Pradeep Bisht",
    title: "Striver Sheet",
  },
};

so make a minimal reproduction repository (your app is too big atm for me to debug with the time that i have)
Mini RexOP
still script tag
joulev
that's why i told you to make a minimal reproduction repository because something is currently wrong with your code but i can't know what is considering the repo's size
Mini RexOP
i am also seeing some weird error try refreshing my website for some time it show vercel icon and i don't have any vercel icon on my repo
// import { Toaster } from "@/components/ui/toaster";
// import "./globals.css";
// import { Asap } from "next/font/google";
import { Metadata } from "next";
// import { NextThemeProvider } from "@/components/theme-provider";
// import { Analytics as VercelAnalytics } from "@vercel/analytics/react";
// import NextTopLoader from "nextjs-toploader";
// const asap = Asap({ subsets: ["latin"] });
export const metadata: Metadata = {
  title: "Striver's Sheet",
  icons: {
    icon: "/ss.png",
  },

  openGraph: {
    type: "website",
    locale: "en_US",
    siteName: "Striver Sheet",
    description:
      "Level up your interview skills in 27 days with 191 frequently asked questions with videos, curated for DSA interviews.",
    images: [
      { url: "https://striversheet.pradeepbisht.com/opengraph-image.jpg" },
    ],
    url: "https://striversheet.pradeepbisht.com",
    title: "Striver Sheet",
  },
  twitter: {
    description:
      "Level up your interview skills in 27 days with 191 frequently asked questions with videos, curated for DSA interviews.",

    images: [
      { url: "https://striversheet.pradeepbisht.com/opengraph-image.jpg" },
    ],
    creator: "Pradeep Bisht",
    title: "Striver Sheet",
  },
};
export default async function RootLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <div>hello</div>
      </body>
    </html>

    // <html lang="en" suppressHydrationWarning>
    //   <head />
    //   <body className={`${asap.className} scrollbar`}>
    //     <NextThemeProvider attribute="class" defaultTheme="system" enableSystem>
    //       <NextTopLoader />
    //       <main className="min-h-[100%] p-3 dark:bg-background">
    //         {children}
    //       </main>
    //     </NextThemeProvider>
    //     <Toaster />
    //     <VercelAnalytics />
    //     {modal}
    //   </body>
    // </html>
  );
}
still not working
joulev
minimal reproduction repository as in a complete nextjs app that is minimal enough (not having business logic, not having unnecessary packages/code/logic/etc) that still reproduces the problem, not a nextjs app as big as this
Mini RexOP
https://github.com/pradeep800/striver-sheet-webiste/blob/main/app/(general)/layout.tsx
when i remove <Navbar/> it is start working
Mini RexOP
it was something to do with mode.tsx
i am closing it now