Search code examples
htmlnext.jsseo

Open Graph tags rendering but not working on facebook debug

I'm using Next.js + SSG to render my pages, here's what my <Head /> looks like:

<Head>
  <title>{title}</title>
  <meta name="title" content={`${title} - MySite`} />
  <meta name="description" content={description} />

  <meta name="og:title" content={title} />
  <meta name="og:description" content={description} />
  <meta
    name="og:image"
    content={`${getBaseUrl()}/static/images/logo.png`}
  />
  <meta
    name="og:image:secure_url"
    content={`${getBaseUrl()}/static/images/logo.png`}
  />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1920" />
  <meta property="og:image:height" content="1080" />
  <meta property="og:image:alt" content="mysite logo image" />
  <meta property="og:site_name" content="mysite" />
  <meta property="og:url" content={getBaseUrl()} />
  <meta name="twitter:card" content="summary_large_image" />
</Head>

The rendered HTML looks like this:

<title>Home</title>
<meta name="title" content="Home - MySite" />
<meta name="description" content="MySite desc" />

<meta name="og:title" content="Home" />
<meta name="og:description" content="MySite desc" />
<meta
  name="og:image"
  content="https://mysite.so/static/images/logo.png"
/>
<meta
  name="og:image:secure_url"
  content="https://mysite.so/static/images/logo.png"
/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta property="og:image:alt" content="mysite logo image" />
<meta property="og:site_name" content="mysite" />
<meta property="og:url" content="https://mysite.so" />
<meta name="twitter:card" content="summary_large_image" />

But nothing seems to work... Facebook Debug doesn't pick up anything. It says: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

Any ideas about what I'm doing wrong?

Live site can be seen here: https://dev.reactive.so

Solution

  • Turns out it was due to the package next-themes needing pages to be conditionally rendered to avoid a theme flicker. Here's a link to the PR if you're interested.