Next.js Discord

Discord Forum

Issue with updating Open Graph image

Unanswered
Himalayan posted this in #help-forum
Open in Discord
HimalayanOP
Hey I updated my open graph images in app/ but it still uses the old image, not sure what I should do? I use Vercel, tried to redeploy etc.

28 Replies

Pyramid ant
did you solve the issue? I'm facing a similar problem..
@Pyramid ant did you solve the issue? I'm facing a similar problem..
hey there, can you try putting the image to public folder and see if it works?
Pyramid ant
I'll give it a try, but consider that the meta tag are generated corretcly in the production:

https://www.bigweb.club/en/home
meta tag in prod:
\
the image link is working in production as well
try using public folder once
@Pyramid ant its not loading because its not in the public folder
or maybe the image is inaccessible
Pyramid ant
on it... deploying rith now
still not working... apparently
I can open it also in incognito mode...
how are you deploying the app actually?
and send your code
are you hardcoding a uri
Pyramid ant
I'm deploying in vercel
I've simply put the image in the folder es indicate in the documentation:
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
here the position of the image in my project:
send your layout.js
Pyramid ant
import Footer from './Components/Sections/Footer'
import MainNavbar from './Components/Navigation/MainNavbar';

// HEAD - metadata setting
export const metadata = {
  title: "Web Development & Marketing | Create Your Online Presence | BIGWEB.club",
  description: "Grow your business online with BIG WEB! We create custom websites, high-performing e-commerce stores, and tailored marketing campaigns to help you reach new customers and increase sales.",
  keywords: "web development, online marketing, websites, e-commerce, marketing campaigns, SEO, SEM, social media marketing, lead generation, online growth",
  robots: "index, follow",
  icons: { icon: "/img/favicon/favicon.ico", shortcut: "/img/favicon/favicon.ico", apple: "/img/favicon/favicon.ico", other: { rel: "apple-touch-icon-precomposed", url: "/img/favicon/favicon.ico", }, },
};

export default function pageLayout({ children }) {
  
  return (
      <>
        <MainNavbar />
        {children}
        <Footer />
      </>
  )
}
Pyramid ant
according with the documentation, there is no file... you just need to place the image in the folder, isn't it?
Sorry, but I won't be able to help you with the issue, as I don't have sufficient knowledge about this, and I don't want to end up giving inaccurate info
Pyramid ant
no prob, tks anyway
Asiatic Lion
Did you solve this? im having problems with the image appearing in whatsapp