not previewing correctly on social media

[warengonzaga]

🤔 Not Existing Bug?

• [X] Yes, I'm sure that this is a bug!

👀 Current Behavior

Not previewing to social media when shared.

🎯 Expected Behavior

It should have a preview when shared on social media.

📋 Steps To Reproduce

1. Copy-paste the URL to any social media
2. It will not show any preview
3. Done

📜 Code of Conduct

• [X] I agree to follow this project's Code of Conduct.

[warengonzaga]

The idea is that it does not have Metadata/Opengraph in the header of the homepage. Learn more here: https://ogp.me

It should be easy to generate here. https://www.opengraph.xyz

[kquirapas]

Ill take this

[warengonzaga]

Push the updates to #35 @kquirapas

[jnebab]

is this fixed? I checked it in twitter card validator and there seems to be issue on the card preview but meta tags are all good.

[kquirapas]

@jnebab I always use manual image so im curious what do you mean by this in Seo.tsx and how does opengraph do it?

const defaultMeta = {
  // CODE SNIPPED
  /**
   * No need to be filled, will be populated with openGraph function
   * If you wish to use a normal image, just specify the path below
   */
  image: "",
};

Would it work better if we instead use a normal image?

[jnebab]

@jnebab I always use manual image so im curious what do you mean by this in Seo.tsx and how does opengraph do it?

const defaultMeta = {
  // CODE SNIPPED
  /**
   * No need to be filled, will be populated with openGraph function
   * If you wish to use a normal image, just specify the path below
   */
  image: "",
};

Would it work better if we instead use a normal image?

yes. this should be manually populated with an image URL since we dont have any images displayed on the homepage. opengraph is supposed to crawl for any image inside the link, but since we do not have any, it can't automatically generate a preview.

[warengonzaga]

@jnebab I always use manual image so im curious what do you mean by this in Seo.tsx and how does opengraph do it?

const defaultMeta = {
  // CODE SNIPPED
  /**
   * No need to be filled, will be populated with openGraph function
   * If you wish to use a normal image, just specify the path below
   */
  image: "",
};

Would it work better if we instead use a normal image?

yes. this should be manually populated with an image URL since we dont have any images displayed on the homepage. opengraph is supposed to crawl for any image inside the link, but since we do not have any, it can't automatically generate a preview.

Let's setup a default one instead, something like fallback.

[kquirapas]

On it @warengonzaga I'll use this for now https://bafkreibpbviej7pxbkbhmzrhqeejjaunkhegmaokipsmqdptvpmkkhmima.ipfs.nftstorage.link/

[warengonzaga]

On it @warengonzaga I'll use this for now https://bafkreibpbviej7pxbkbhmzrhqeejjaunkhegmaokipsmqdptvpmkkhmima.ipfs.nftstorage.link/

That is perfect!

[kquirapas]

Pushed straight to dev: https://github.com/web3phl/directory/pull/35/commits/4ab9962213fd1371ad90f83420dbc64264c75dac

Let's close issue on confirmation of it working

[warengonzaga]

Working as expected on dev branch. https://www.opengraph.xyz/url/https%3A%2F%2Fdirectory-dev.web3philippines.org

[kquirapas]

Confirmed working.

Closing issue