Next.js Discord

Discord Forum

OpenGraph image HELP!!

Answered
Pyramid ant posted this in #help-forum
Open in Discord
Pyramid antOP
I'm struggling with the OG implementation. I've added the opengraph-image.png in the root folder of the page I want to use, but it's not working. Am I missing something? Here's the documentation

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx
Answered by American Crow
I'd guess metadataBase helps you:
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}
View full answer

96 Replies

Pyramid antOP
Pyramid antOP
I can see the metatag genereted correctly, but the preview don't work. Am I missing somethin?
Landing page

https://www.bigweb.club/en/home
averydelusionalperson
your image url is not accessible
please check it once
Pyramid antOP
I can open it! also using incognito mode... how can it be?
averydelusionalperson
it's branched deployed version of vercel
url
I'm not able to access it
please use the image url which is accessible to everyone
Pyramid antOP
you are right!!
Now my question is: this url is auto-genereted by Next!!
averydelusionalperson
you can place the image in public folder, and just use /opengraph-image.png If I'm not wrong
nvm
you're generating it
so, open the url which is accessible to everyone
instead of the branched deployment
Pyramid antOP
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx
in the doc I see 'any route segment'... and it make sense, because I could have different OG image depending on the page..
anyway, I'll give your proposal a try
averydelusionalperson
what
?
I didn't give any proposal lmao
just use the proper deployed url
American Crow
averydelusionalperson
exactly
Pyramid antOP
the point is that the meta tag (and the og url) is auto generated!!!
@Pyramid ant Click to see attachment
Pyramid antOP
I''m not controlling this code...
@Pyramid ant the point is that the meta tag (and the og url) is auto generated!!!
averydelusionalperson
can you share the proper deployed url once please?
Pyramid antOP
https://www.bigweb.club
this one, right?
averydelusionalperson
hmm, right
the image url should've been updated
:thinq:
og tags are working fine, image is the problem
Pyramid antOP
apparently!!!
averydelusionalperson
would you mind showing the code where you're generating the metadata?
Pyramid antOP
but technically, I'm not managing the url, because is autogenerated...
averydelusionalperson
yeah
Pyramid antOP
For what I know, I only place the og-image in the folder... no more.
maybe there is a conflict with other meta data in the layout??
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 />
      </>
  )
}
averydelusionalperson
hmm
can you deploy the project once again?
I haven't used OG's yet, but I think either you used url of those image incorrectly or vercel deployment hasn't been done correctly.
Pyramid antOP
https://www.bigweb.club/

here you are..
no error in the building report during deploy
American Crow
i only have an app router typescript example
dont know if that helps you
averydelusionalperson
can you do global search in your code editor for this : project-bigweb-cyt944yza-thelore85
I can try with .jpg
averydelusionalperson
dayum
American Crow
I'd guess metadataBase helps you:
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}
Answer
averydelusionalperson
yeah, try that ^
metadataBase
averydelusionalperson
I still don't get why project-bigweb-cyt944yza-thelore85 got there in the first place
American Crow
me neither
averydelusionalperson
prolly some weird vercel cache issues
American Crow
some CI issue
averydelusionalperson
yeah
Pyramid antOP
// 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", }, },
  openGraph: {
    images: '/og-image.png',
  },
};
I've
- deleted all opengraph-image.png i had before
- placed the image in public folder
- deploing
averydelusionalperson
noice
averydelusionalperson
wut
how did he forget that
Pyramid antOP
whats that?
it's the baseURL for your metadata
Pyramid antOP
fine, i'll place it!
American Crow
lol
averydelusionalperson
🤦‍♂️
lmao
Pyramid antOP
// HEAD - metadata setting
export const metadata = {
  metadataBase: new URL('https://www.bigweb.club'),
  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", }, },
  openGraph: {
    images: '/og-image.png',
  },
};
American Crow
i am out eating you got this @averydelusionalperson 😄 gl!
Thanks for the help BTW
I didn't remember the metaDataBase
Pyramid antOP
here we are with new deploy!
https://www.bigweb.club/en/home
and man!!!! i can see the image!!!!
averydelusionalperson
less fucking go
finally
thanks @American Crow
Pyramid antOP
I've learn a new thing!!!
tks yuo bros!!!!
averydelusionalperson
sure, mark @American Crow message as solution, since he did found the solution after all
Pyramid antOP
I'll mark as resoved!
averydelusionalperson
🫡
Pyramid antOP
both of you, superstars!
averydelusionalperson
🤝