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

gmotta-dev · 2023-05-30T19:06:06Z

gmotta-dev
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
Collaborator

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
Collaborator

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.

gmotta-dev 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
Collaborator

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.

gmotta-dev 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
Collaborator

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).

7 replies

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">

menteshynov Jun 27, 2024

What works for me is to use VERCEL_PROJECT_PRODUCTION_URL instead of VERCEL_URL, this is also recommended in the Vercel documentation here https://vercel.com/docs/projects/environment-variables/system-environment-variables

pearcircuitmike Jul 30, 2024

This is bizarre behavior and I don't feel like this should be the solution?

pearcircuitmike Jul 30, 2024

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

Is this the correct answer in general? I have the exact same problem but it seems weird that this would be the right move? Curious about the security implications too

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.
For example, WhatsApp imposes a limit of 300 KB to opengraph images.

You can use tools like image smaller to compress images without losing quality.

For dynamically generated opengraph-image, try using image compression libraries like sharp

0 replies

ngquhuanbl · 2025-10-02T06:42:48Z

ngquhuanbl
Oct 2, 2025

Hello, after digging for a while, i found the root cause!
Disabling Vercel Authentication is a misleading solution, and doesn't address the root cause.
When Vercel deploys, the deployment is associated with a commit.
And the path you see of the og image is the URL of the deployment upon this commit.

Your production domain is just a custom domain, pointing to the result of the deployment of this commit, which is originally built targeting a commit-based domain.

When configuring the OpenGraph, for instance using the method mentioned in this issue report, I believe the author defining the url path for the OpenGraph images using relative URL. According to this section of NextJS document, if the metadataBase is not provided, in production environment, VERCEL_URL will be used as a fallback. And VERCEL_URL is actually a System Environment Variable of Vercel, which mean it's automatically populated during the deployment.
Therefore, when we deploy, Vercel will create a deployment for the commit, which has the VERCEL_URL corresponding to that commit. And the result of the metadataBase is the URL we see, with some commit has within it.

To resolve this, the official way is that we can created another environment variable, (which should not HAVE THE SAME name with any Vercel system environment variables), let's called it PROD_URL. Then, define metadataBase correctly as below:

// layout.tsx

// ...
import type { Metadata } from "next";

const defaultUrl = process.env.PROD_URL
  ? `https://${process.env.PROD_URL}`
  : "http://localhost:3000";

export const metadata: Metadata = {
  metadataBase: new URL(defaultUrl),
  // your other metadata (e.g. OpenGraph, etc.) go here
 }

Then, in your Vercel Environment settings, add a environment variables named PROD_URL, whose value is your production domain. Make sure this variables is visible in the Production environment. See instructions here

Here are a few other important notes:

If you define the OpenGraph using the file-based approach (i.e. created the file following the conventional name rule in /app), at the same times, you define the configuration for the metadata using JS/TS code in layout.tsx. The configuration using JS/TS code won't be applied. I guess that the file-based approach has higher priority.
Therefore, in order for the metadataBase to work, make sure you dont apply any file-based OpenGraph approach in your repo.
You can put your images in the public folder, and define relative path to them in the metadata config. E.g. my image is at public/shared/og-img.jpg, then the relative path I use in my metadata config is /shared/og-img.jpq.

Hope this help!

0 replies

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

Uh oh!

Uh oh!

Summary

Additional information

Example

Replies: 6 comments · 13 replies

Uh oh!

Uh oh!

icyJoseph May 30, 2023 Collaborator

Uh oh!

Uh oh!

icyJoseph May 30, 2023 Collaborator

Uh oh!

gmotta-dev May 30, 2023 Author

Uh oh!

icyJoseph May 30, 2023 Collaborator

Uh oh!

Uh oh!

gmotta-dev May 30, 2023 Author

Uh oh!

icyJoseph May 31, 2023 Collaborator

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 6 comments 13 replies

icyJoseph
May 30, 2023
Collaborator

icyJoseph May 30, 2023
Collaborator

gmotta-dev May 30, 2023
Author

icyJoseph May 30, 2023
Collaborator

gmotta-dev May 30, 2023
Author

icyJoseph May 31, 2023
Collaborator