Next OG Image not detected by Facebook Debugger-CodePudding

I have set up the NextJs OG Image and everything works well. Only the image cannot be inferred by Facebook. The error/warning is The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags. when i supply the url of the page to Facebook the url is not being detected. The code in my Head looks like

<meta property="og:url" content={
            `${
              process.env.NEXT_PUBLIC_VERCEL_URL ? 'https://'   process.env.NEXT_PUBLIC_VERCEL_URL : 'http://localhost:3000'
            }/${user.Name}`
          }/>
          <meta property="og:type" content="website"/>
          <meta property="og:title" content={`${user.Name}`}/>
          <meta property="og:description" content="undefined"/>
        <meta
         property="og:image"
          name="og:image"
          content={
            `${
              process.env.NEXT_PUBLIC_VERCEL_URL ? 'https://'   process.env.NEXT_PUBLIC_VERCEL_URL : 'http://localhost:3000'
            }/api/og-image?title=Nameofuser&description=A description`
          }
        />

According to a source Facebook only checks for og:image in the first 50Kbs of the page source. If you are using inline CSS, the og:image will not be seen by Facebook does this mean that Facebook will not find the image. Or am I setting this us the wrong way

Edit: I have also copy pasted the code in the NextJS documentation onto my page and the image still does not show. The simple code is

<Head>
        <title>Cool Title</title>
        <meta name="description" content="Checkout our cool page" key="desc" />
        <meta property="og:title" content="Social Title for Cool Page" />
        <meta
          property="og:description"
          content="And a social description for our cool page"
        />
        <meta
          property="og:image"
          content="https://example.com/images/cool-page.jpg"
        />
      </Head>

from the documentation link . Is this a known bug in NextJS that I am unaware of

CodePudding user response：

Eventually I was able to fix the issue. My entire app is wrapped with an AuthProvider by firebase. And for some reason, having it present makes facebook debuggers not wait for the authentication state or something. I would lazy load the AuthComponent and my first load size would come to even about 80Kb from around 182Kb but still facebook debuggers would still not load my og image. This is my solution

import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
const AuthContextProvider = dynamic(() => import('../auth/AuthProvider'), {
  ssr: typeof window==="undefined"
})

function MyApp({ Component, pageProps }) {
  // mock state to make sure we are running in browser
  const [inBrowser, setInBrowser] = useState(false)

  useEffect(() => setInBrowser(true), [])
  return (
    <>
      {inBrowser ? (
        // running in browser load Auth
        <AuthContextProvider>
          <Component {...pageProps} />
        </AuthContextProvider>
      ) : (
        // building or running in pipeline
        <Component {...pageProps} />
      )}
    </>
  );
}
export default MyApp;

When build is running the second block of code is executed, which facebook does (not in a browser environment) and when a normal user loads the page the first block of code is run.

If there are security tradeoffs to this (I do not think there is) one can point it out. But that's the solution.

Also later I still brought back lazy loading the AuthContext Component, in line 3, because why not, honestly