Open Graph images not working anymore after updating to Next 13, despite being present in the HTML #50546

gpmotta21 · 2023-05-30T19:06:06Z

gpmotta21
May 30, 2023

Summary

Since upgrading to the latest 13 version, I have encountered an issue where my Open Graph images are no longer appearing when I share my page. Interestingly, the images are present in the HTML code. I am using the metadata object inside the layout.ts

Here is the link to the page: https://varos.com.br/vza

Additional information

No response

Example

No response

icyJoseph · 2023-05-30T19:49:55Z

icyJoseph
May 30, 2023

Hi,

I do believe you are using window or document, as part of rendering, and that's crashing out.

Most precisely, your page is crashing when rendering on the server. How do I know this? Well I looked at the HTML sent by the server, and it is errored HTML.

Your app is then hydrated client side, and it looks like it works. Naturally bots miss out on this.

So, tell me, where do you think the app is crashing on the server? Are you perhaps using "use client", expecting it to only render on the client?

5 replies

icyJoseph May 30, 2023

This what the server sends:

<!DOCTYPE html>
<html id="__next_error__">
  <head>
    <meta charSet="utf-8" />
    <meta name="next-size-adjust" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="[/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js](https://varos.com.br/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js)" noModule=""></script>
  </head>
  <body>
</html>

I omitted the scripts for brevity.

gpmotta21 May 30, 2023
Author

I think I found out why, the problem was being caused by a font that I was importing from Adobe using the HTML Link , when I remove this tag, apparently works fine. Do you think it could be it?

icyJoseph May 30, 2023

Might be. You can check locally by doing next build and next start, then inspect the pages source code (left click view source in Chrome).

Not sure why the font would crash the SSR though.

gpmotta21 May 30, 2023
Author

I found out where the error is, but I dont know how I could solve this. The error is being caused if I use the useSearchParams Hook. If I use this hook and the metadata object at the same time, the OG Image is not displayed. Even if I use this hook inside a client component, it will break my OG Image.

import { NextPage } from "next";

export const metadata = {
  title: "Parabéns pelo seu Valuation Box! – Valuation Box – Varos",
  description:
    'Parabéns pela sua assinatura! Sua assinatura do Valuation Box foi ativada com sucesso. Cheque sua caixa de entrada pelo e-mail com o assunto "Plataforma Varos - Acesso Liberado" para acessar a plataforma. Você também receberá um e-mail nosso comprovando a sua compra. Acessar Plataforma Varos © 2021.',
  openGraph: {
    images: [
      {
        url: "https://nextjs.org/og.png",
        width: 800,
        height: 600,
      },
    ],
  },
};

const MyPage: NextPage = ({}) => {
  return (
    <div>
      This is my page
      <MyButton />
    </div>
  );
};

export default MyPage;

'use client'

import {  useSearchParams } from "next/navigation";

const MyButton = ({}) => {

const params = useSearchParams()

  return (
    <button>
      Hello
    </button>
  );
};

export default MyButton;

icyJoseph May 31, 2023

One kind of unrelated think, but you NextPage as a page type, I think, is gone.

I went to view-source:https://varos.com.br/vza and I see meta tags now, also I tested with the LinkedIn Post Inspector, and it looks like it can crawl your site and generate the OG data.

https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fvaros.com.br%2Fvza

So I guess, you fixed it?

GustavoContreiras · 2023-10-23T12:37:05Z

GustavoContreiras
Oct 23, 2023

It's happening with me too. I can see things set on the final HTML but it's not working when I share link on Whatsapp.

1 reply

mxfng Nov 22, 2023

Encountered the same issue in my own app. useSearchParams appears to be the culprit for me too.

alexhollender · 2023-12-05T19:12:15Z

alexhollender
Dec 5, 2023

I'm having a similar issue. I'm currently using next 14.0.3. One of my sites uses useSearchParams, though removing it didn't seem to help. However another one of my sites doesn't use useSearchParams, and is also having the same issue. As far as I can tell from the metadata > opengraph-image documentation the only think I should need to do is place an opengraph-image.jpg file at the route/segment (which is what has worked for me in the past). However, since that's not working I tried explicitly defining the images in my metadata object:

import ogImage from './opengraph-image.jpg'
...
export const metadata = {
  ...
  openGraph: {
    ...
    images: [
      {
        url: ogImage.src,
        width: ogImage.width,
        height: ogImage.height
      },
    ],
  },
  twitter: {
    images: [
      {
        url: ogImage.src,
        width: ogImage.width,
        height: ogImage.height
      },
    ]
  },
}

This seems to fix the issue for now (though again, according to the documentation, doesn't seem like it should be required in order for this to work).

4 replies

TudorEsan Dec 28, 2023

not working for me, when i am trying to access the image it wants me to log in to vercel... any help?

agusmoles Jan 8, 2024

Same here, it asks me for authentication for one project but not for the other one. Im using static metadata and opengraph-image.png file convention approach in both, but still working differently.

EDIT: I fixed it using a hardcoded metadataBase instead of the autogenerated VERCEL_URL, which uses the deploy link instead of my own domain (which anyways should be public, but idk)

From:

metadataBase: process.env.VERCEL_URL
    ? new URL(`https://${process.env.VERCEL_URL}`)
    : new URL(`http://localhost:${process.env.PORT || 3000}`),

to

metadataBase: process.env.VERCEL_URL
    ? new URL(`https://agustinmoles.com.ar`)
    : new URL(`http://localhost:${process.env.PORT || 3000}`),

EDIT2:

Ok, this was the issue, I had it enabled by default for the new project this config:

which asks for auth for every domain except production ones and it seems somehow Vercel doesnt take autogenerated URL as a production link even though it is.

Abdellah-Idrissi Feb 5, 2024

the solution 2 solved the problem fr me as well , but is it safe to nit anable the vercel auth ?

anvodev Apr 18, 2024

The reason why NextJS don't appear og image properly is due to the lack of metadataBase (https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase). I add metadataBase and it work for my site. Don't need to disable the Vercel Authentication.
Previous tag:

<meta name="twitter:image" content="https://anvodev-lc3fnlc4e-votanleans-projects.vercel.app/_next/static/media/token-bucket-cover.c9aa9bce.png">

After adding metadataBase:

<meta property="og:image" content="https://www.anvo.dev/_next/static/media/token-bucket-cover.c9aa9bce.png">

TudorEsan · 2023-12-28T11:14:36Z

TudorEsan
Dec 28, 2023

Hi for me it was not having: metadataBase: new URL("https://baseUrl") in my metadata, found this on stack overflow: https://stackoverflow.com/questions/76569441/next-js-13-og-image-not-working-when-i-put-it-in-app-directory

0 replies

DeepakBalaraman · 2024-03-13T07:03:35Z

DeepakBalaraman
Mar 13, 2024

Turns out, the file size of the og:image could be a problem.
I reduced the file size to less than 300kb and it solved the issue.

You can use tools like image smaller to do that without losing quality.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Open Graph images not working anymore after updating to Next 13, despite being present in the HTML #50546

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 5 comments 10 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Open Graph images not working anymore after updating to Next 13, despite being present in the HTML #50546

Summary

Additional information

Example

Replies: 5 comments · 10 replies

gpmotta21 May 30, 2023 Author

gpmotta21 May 30, 2023 Author

Replies: 5 comments 10 replies

gpmotta21 May 30, 2023
Author

gpmotta21 May 30, 2023
Author