How to use IPFS images/media types in Open Graph tags

I’m looking to use IPFS images/media types withing Open Graph meta tags to be able to render the images when I share them in messages/social media etc. Is this currently possible?

I’m not quite sure what you mean by “images/media types” unless you’re simply referring to using images, video, audio, etc files that are stored in IPFS. Open Graph, is this the Facebook thing? The simplest way would to use one of the IPFS gateways and access it though an http url.

here is an example:

say you have a page where IPFS content is set to:

  • <meta property="twitter:image" content="https://cloudflare-ipfs.com/ipfs/bafybeiht4ywjife55odv4w33vddazphmm2jbg4fp4mutzatralbs7ygvgq">
  • og:image, etc.
  • but the preview images won’t render.

In this online tool, try pasting
this https://cloudflare-ipfs.com/ipfs/bafybeiht4ywjife55odv4w33vddazphmm2jbg4fp4mutzatralbs7ygvgq into the form field that says image. you’ll see it only renders for discord.

not sure whether this can be resolved via IPFS services or if it’s something twitter and facebook themselves need to start supporting…

You refer to file data directly using CID, which has no extension.
Try wrapping that file into a directory to preserve filename, or add ?filename=img.jpg at the end of URL.

Some services won’t render images unless the link ends with a proper extension: https://cloudflare-ipfs.com/ipfs/bafybeiht4ywjife55odv4w33vddazphmm2jbg4fp4mutzatralbs7ygvgq?filename=img.jpg