Open Graph Images
Abhinab Choudhury
An OG Image, also known as an Open Graph Image, is one of the most underestimated, but incredibly important, parts of a modern website. In this era where AI-generated websites and frameworks like React dominate the frontend landscape, small but essential details like Open Graph images often get overlooked.
Whether you’re building a portfolio, blog, SaaS platform, or e-commerce store, a properly configured OG image can dramatically improve your click-through rates and social engagement.
What is an Open Graph (OG) Image?
An OG image is a part of the Open Graph Protocol, created by Facebook. It allows you to control how your web page appears when shared on platforms like Facebook, Twitter (X), LinkedIn, WhatsApp, etc.
The OG image is displayed as a preview thumbnail and is usually shown alongside your title and description when the URL is shared.
Here’s how you can define OG meta tags in your HTML <head> section:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of your page" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />
The image URL must be public and not behind any authentication.
Use a full absolute URL (e.g.,
https://example.com/image.jpg).Recommended resolution: 1200 x 630 pixels
Recommended aspect ratio: 1.91:1
File types: JPG or PNG
File size: Ideally under 5MB
Twitter doesn’t always use Open Graph tags. It prefers its metadata called Twitter Cards. Here’s how you can ensure compatibility:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<meta name="twitter:site" content="@YourTwitterHandle" />
The most effective card type is summary_large_imageone that shows a wide image preview—similar to Facebook or LinkedIn.
We have packages which helps us a lot with OG Image generation, some of them are mentioned below.
Vercel OG Image Generator (
@vercel/og)Satori (HTML to SVG for OGs)
OG Image Generator Link
Subscribe to my newsletter
Read articles from Abhinab Choudhury directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by