#Opengraph / Vercel / NextJS - URL & Metadata Problem

5 messages · Page 1 of 1 (latest)

hallow tiger
#

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!

floral domeBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

marble locust
#

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

hallow tiger
zenith dust