React-markdown: How to set og:image for images in markdown?

[vadimshvetsov]

Let’s say I have some images in my markdown. I want to set meta tags with Next.js Head component. Is there any way to get random/all images and set meta tag with its proper og:image with proper source and og:image:width and og:image:height from image dimensions. I see the way to set my image component, but maybe someone solved this problem and can share an example?

[EricWVGG]

IMO this is outside the scope of this package.

You can publish your markdown thusly…
![inline image](/path/to/image.jpg "title text" class="someClass" width="200" height="200" og:image="/blah/blah/blah" og:width="200" og:height="500" )

Whatever your mechanism is to retrieve the markdown, you can then feed that to Head as well as react-markdown. But react-markdown itself doesn't really care about this.

[ChristianMurphy]

CommonMark does not have a mechanism to add additional attributes to links. As such this would not be supported in core.
However there are some solutions:

1. you could use an HTML <img og:image:height="" src="" />
2. You could extend the remark markdown parser to support a custom syntax of your choose, see https://unifiedjs.com/learn/ to learn more