When you share a URL on Twitter, LinkedIn, Facebook, Slack, or Discord, the platform displays a preview card containing an image, a title, and a short description. This preview is controlled by Open Graph meta tags in the HTML head of the page. Getting these tags right makes shared links look professional and increases click-through rates.
The Open Graph Protocol
The Open Graph Protocol was introduced by Facebook in 2010 and is now the standard used by virtually every social platform for generating link previews. It uses HTML meta tags with the property attribute prefixed by og:.
The four essential tags are og:title (the title of the content), og:description (a short summary), og:image (the URL of the preview image), and og:url (the canonical URL of the page).
The og:image Tag
The og:image tag is the most impactful of the four. A compelling image dramatically increases engagement with shared links. The recommended dimensions are 1200 x 630 pixels (an aspect ratio of approximately 1.91:1). Images smaller than 200 x 200 pixels are often ignored by platforms.
Additional tags control image behavior: og:image:width and og:image:height tell platforms the dimensions so they can plan the layout without fetching and measuring the image first. og:image:type specifies the MIME type (image/jpeg, image/png).
Twitter Card Tags
Twitter (now X) supplements Open Graph with its own twitter: meta tags. The most important are twitter:card (which specifies the card type: summary, summary_large_image, app, or player), twitter:title, twitter:description, and twitter:image.
If Twitter card tags are absent, Twitter falls back to the Open Graph tags. For the best Twitter appearance, include both sets of tags.
Common Problems
Missing og:image: the platform shows only text with no image. Fix by adding the og:image tag pointing to a reachable HTTPS URL.
Wrong image dimensions: the image is cropped, distorted, or not shown. Fix by using the recommended 1200 x 630 pixel dimensions.
Image not indexed yet: platforms cache OG images. After updating your og:image, use the platform's share debugger (Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape.
Image behind authentication: the platform's scraper cannot access the image. Make sure the og:image URL is publicly reachable without login.
Using the DevHexLab OG Image Previewer
Open the tool at /tools/image/og-image-previewer. Enter the URL of your page. The tool fetches the OG tags and renders preview cards showing how the link will appear on major platforms. Fix any issues highlighted in the tag audit section.
Frequently Asked Questions
How do I generate OG images dynamically for each blog post?
Generate the og:image using an HTML-to-image tool with a template that includes the post title and a background image. Many Next.js applications use the ImageResponse API for this.
Will changing my og:image update immediately on social media?
No. Platforms cache OG images aggressively. Use the platform's own debug tool to force a refresh after making changes.
Set your OG tags correctly and every shared link becomes a professional-looking card.