My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

How to create awesome og:images using React components

Daniel Esteves's photo
Daniel Esteves
·Feb 15, 2021·

1 min read

One of the most tedious things when writing posts is not writing the post itself, it's finding the right image so that when we share it on social networks it catches the eye and people want to go in and see it; we even use tools like Canva or PhotoShop to make them, or we call our design and marketing team to create this image. ✋ No more.

What if I tell you that you can create images with React components?

I have already some time testing Flayyer which is a og:image as a service, what this service promises us is to create templates with React or Vue and use them to create images based on them, in these templates we can pass variables with which we can build our images, for example the title and the backgroundImg of a post and we can get the following results:

If you want to learn more about how to make this kind of og:images enter to the post and learn how to build your on custom image!! 🏋️

- See you at code 👨‍💻