fix: Drops pages could have dedicated og:image

[Jarsen136]

• Closes Drops pages could have dedicated og:image #6349

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	999937a
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64a43da9708e790008bcc956
😎 Deploy Preview	https://deploy-preview-6363--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[reviewpad]

AI-Generated Summary: This pull request addresses a bug where drop pages were not having their dedicated open graph images (og:image). It introduces several changes across multiple files to resolve this.

In 'DropContainer.vue', 'UnlockableCollectionBanner.vue', and 'UnlockableContainer.vue', the open graph meta tags have been updated with the correct description and image sources. The files also have additional imports for 'unlockableDesc' and 'convertMarkdownToText' from the utils.

In 'DropContainer.vue', the 'handleSubmitMint' function's 'createUnlockableMetadata' call has been updated to include a description.

In 'UnlockableContainer.vue', similar changes as 'DropContainer.vue' are applied. The 'handleSubmitMint' function now submits an image and a description for creating the unlockable metadata.

Lastly, in 'utils.ts', the function 'createUnlockableMetadata' has been modified to have two parameters, 'imageHash' and 'description'.

Overall, these changes should provide a dedicated og:image meta tag for each drop page, enhancing the website's SEO.

[Jarsen136]

Emm. I still do not figure out why it does not work, as the seo tag had been updated accordingly.

link: https://deploy-preview-6363--koda-canary.netlify.app/stmn/drops/free-drop

The preview information is still the same as the previous one.

[prury]

/drops shows the image correctly
drops/free-drop shows the image correctly
items inside the drop collection shows their respective image/description
tested on: twitter, telegram, discord (open graph site wont load the image, don't know why, but not important.)

as Jarsen said, the right description for the drop link still won't show

opengraph tags, if it helps:

  <!-- HTML Meta Tags -->
  <title>undefined</title>
  <meta name="description" content="undefined">

  <!-- Facebook Meta Tags -->
  <meta property="og:url" content="https://deploy-preview-6363--koda-canary.netlify.app/stmn/drops/free-drop">
  <meta property="og:type" content="website">
  <meta property="og:title" content="undefined">
  <meta property="og:description" content="undefined">
  <meta property="og:image" content="">

  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta property="twitter:domain" content="deploy-preview-6363--koda-canary.netlify.app">
  <meta property="twitter:url" content="https://deploy-preview-6363--koda-canary.netlify.app/stmn/drops/free-drop">
  <meta name="twitter:title" content="undefined">
  <meta name="twitter:description" content="undefined">
  <meta name="twitter:image" content="">

  <!-- Meta Tags Generated via https://www.opengraph.xyz -->
        

[roiLeo]

maybe something related with kodadot workers? ssr-opengraph?

[preschian]

Emm. I still do not figure out why it does not work, as the seo tag had been updated accordingly.

link: deploy-preview-6363--koda-canary.netlify.app/stmn/drops/free-drop

seems like prerendering on netlify is not working. I can help with canary/beta by using worker
so, what we can do in this PR is validate the metadata (or image) on the client side by using chrome extension

I will open the PR on the workers side

[preschian]

adjust e2e test? otherwise lgtm 👍

[codeclimate]

Code Climate has analyzed commit 999937a and detected 0 issues on this pull request.

View more on Code Climate.

[Jarsen136]

adjust e2e test? otherwise lgtm 👍

✅ E2E test pass

[prury]

Emm. I still do not figure out why it does not work, as the seo tag had been updated accordingly.
link: deploy-preview-6363--koda-canary.netlify.app/stmn/drops/free-drop

seems like prerendering on netlify is not working. I can help with canary/beta by using worker so, what we can do in this PR is validate the metadata (or image) on the client side by using chrome extension

I will open the PR on the workers side

https://og-image-green-seven.vercel.app/Waifu%20T-Shirt%20Free%20Mint.jpeg?image=https%3A%2F%2Freplicate.delivery%2Fpbxt%2FDqeaImcF1W3AcCeBw2EwCxpvss9CBHM2oeZKBBfHMrqSmzpEB%2Fout-0.png