{"componentChunkName":"component---src-templates-main-js","path":"/dynamic-og-image-generator/","result":{"data":{"site":{"siteMetadata":{"title":"Sagar Hani","author":"Sagar Hani"}},"markdownRemark":{"id":"e9419439-e440-589f-9de0-2703a9f3c543","excerpt":"image 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…","html":"<p><img src=\"https://res.cloudinary.com/sagarhani/image/upload/v1621696014/sagarhani.in/og-image.png\" alt=\"image\"></p>\n<p>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 <a href=\"https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fdynamic-og-image-generator.vercel.app%2F\">this</a>.</p>\n<p>This is because the <a href=\"https://ogp.me/\">Open Graph protocol</a> 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.</p>\n<p>I have built a tool <a href=\"https://dynamic-og-image-generator.vercel.app/\">Dynamic Open Graph Image Generator</a> where we can dynamically generate the open graph image on the fly for the webpages.\nAll we need to do is just add the url as a content to the og:image property of the <code class=\"language-text\">meta</code> tag as below :</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span>\n  <span class=\"token attr-name\">property</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>og:image<span class=\"token punctuation\">\"</span></span>\n  <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://dynamic-og-image-generator.vercel.app/api/generate?title=YOUR_TITLE&amp;author=AUTHOR_NAME&amp;avatar=IMAGE_URL&amp;websiteUrl=WEBSITE_URL&amp;theme=THEME_NAME<span class=\"token punctuation\">\"</span></span>\n<span class=\"token punctuation\">/></span></span></code></pre></div>\n<p>and replace the placeholders with desired values.</p>\n<br />\n<h3>🛠 How it is built ?</h3>\n<p>This tool is built using <a href=\"https://nextjs.org/\">NextJS</a>. 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 <a href=\"https://developers.google.com/web/tools/puppeteer\">puppeteer</a>, 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 <a href=\"http://styled-components.com/\">Styled Components</a>.</p>\n<blockquote>\n<p>This website is now using <a href=\"https://dynamic-og-image-generator.vercel.app/\">https://dynamic-og-image-generator.vercel.app</a> to generate the OG images for each and every page.</p>\n</blockquote>","frontmatter":{"title":"Dynamic OG Image Generator","date":"May 22, 2021","description":null,"image":"https://res.cloudinary.com/sagarhani/image/upload/v1621696014/sagarhani.in/og-image.png"}}},"pageContext":{"slug":"/dynamic-og-image-generator/","previous":{"fields":{"slug":"/named-exports-vs-default-exports/"},"frontmatter":{"title":"Named exports vs Default exports","image":"https://res.cloudinary.com/sagarhani/image/upload/v1607778433/sagarhani.in/named-vs-default_wkxucz.png"}},"next":null}}}