Have you noticed that when you share a link on social platforms like facebook, linkedIn or twitter, you will see a preview card of that website with few details like it's title, description and an image something like this.
This is because the Open Graph protocol enables web page to become a rich object in a social graph. Information is scrapped from the meta tags of that webisite. Meta tags are specific snippets of text and image content that provide a summary for a webpage. Often meta tag data shows up whenever someone shares a link on social media, in messaging, or in your business chat software. It helps search engines and other services (like crawlers) scan your webpage and figure out what's it is about.
I have built a tool Dynamic Open Graph Image Generator where we can dynamically generate the open graph image on the fly for the webpages.
All we need to do is just add the url as a content to the og:image property of the meta tag as below :
<meta
property="og:image"
content="https://dynamic-og-image-generator.vercel.app/api/generate?title=YOUR_TITLE&author=AUTHOR_NAME&avatar=IMAGE_URL&websiteUrl=WEBSITE_URL&theme=THEME_NAME"
/>and replace the placeholders with desired values.
🛠 How it is built ?
This tool is built using NextJS. The API would extract the details from the query parameters and use them to build a template. Then, this template page is opened in headless chromium with the help of puppeteer, it takes the screenshot of the page, respond the API with the image file. The theme of the template depends on the theme name passed in URL. Template page is built using Styled Components.
This website is now using https://dynamic-og-image-generator.vercel.app to generate the OG images for each and every page.
