Opengraph / Vercel / NextJS - URL & Metadata Problem

Unanswered

Cicada killer posted this in #help-forum

Cicada killerOP

2024-07-02T11:11:52.810Z

Hi there,

We are an online marketplace for tattoos. We want to use webhooks to show the title, description and image of tattoo, when the page URL is shared on social apps like Twitter, Facebook, Discord...

We did coding for the extension by using the correct version of OpenGraph og tags and Twitter tag, but whatever we do, the text and image won't appear when we share the page URL.

You can check this example URL: https://base-sepolia.birthmark.app/tattoo-collections/0x387ee43b9995201eaf4bf950ae0c96a2b222c9b8/nfts/0/tribal-sea-creature-tattoo-by-241cab

For more context, this is the code snipped we have used in the layout:

export const metadata = {
  metadataBase: new URL('https://base-sepolia.birthmark.app'/),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
    },
  },
  openGraph: {
    title: 'Birthmark Tattoo',
    description: 'An online tattoo shop where you can explore and buy original tattoos from any artist in the world.',
    url: 'https://base-sepolia.birthmark.app/',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://base-sepolia.birthmark.app/images/loader.gif',
        width: 600,
        height: 600,
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}

And this is what's inside the index.tsx file:

return (
    <>
      <Head>
        <title>{t("birthmarktattoo")}</title>
        <meta name="description" content={t("tattooshop")} />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <link rel="icon" href="/favicon.ico"></link>

        {/* Open Graph / Facebook /}
        <meta property="og:title" content={ t("birthmarktattoo")} />
        <meta property="og:type" content="website" />
        <meta property="og:image" content={https://base-sepolia.birthmark.app/images/loader.gif} /> 
        <meta property="og:image:type" content="image/gif" />
        <meta property="og:image:width" content="800" />
        <meta property="og:image:height" content="600" />
        <meta property="og:url" content={https://base-sepolia.birthmark.app/} /> 
        <meta property="og:description" content="Online tattoo shop where you can explore and buy original tattoos from any artist on earth. Search artists nearby, buy tattoos with digital certificate of authenticity, trade on secondary markets." />
        <meta property="og:locale" content="en_US" />
        <meta property="og:site_name" content="BirthMark"></meta>

        {/ Twitter */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:url" content={https://base-sepolia.birthmark.app/} /> 
        <meta name="twitter:title" content={ t("birthmarktattoo")} />
        <meta name="twitter:description" content="Online tattoo shop where you can explore and buy original tattoos from any artist on earth. Search artists nearby, buy tattoos with digital certificate of authenticity, trade on secondary markets."/>
        <meta name="twitter:image" content={https://base-sepolia.birthmark.app/images/loader.gif} />
      </Head>

All help is truly appreciated!

4 Replies

West African Crocodile

2024-07-05T18:48:42.929Z

I have the same issue, I believe this is a bug

@West African Crocodile I have the same issue, I believe this is a bug

Cicada killerOP

2024-07-07T10:22:57.280Z

Thank you!

Would really appreciate some direction here. 🙏

Beveren

2024-07-16T22:58:57.869Z

Try this validation tool to double check your meta tags: https://thumbsmith.com/validator

West African Crocodile

2024-07-21T03:35:00.099Z

@Beveren The issue is that the tags are not being rendered unfortunately, even though they are explicitly set according to docs