The og:image meta tag tells social platforms which image to display when someone shares your URL.
It is one of the most important Open Graph tags because the image usually dominates the preview card. A good og:image makes a link feel clear, credible, and worth opening. A missing or broken one often leaves platforms guessing, which can produce random thumbnails, cropped images, or no image at all.
If you publish product pages, blog posts, landing pages, documentation, or changelog updates, this tag should be part of your publishing checklist.
What Is og:image?
og:image is an Open Graph meta property used inside the HTML <head> of a page.
The basic syntax looks like this:
<meta property="og:image" content="https://example.com/social-preview.jpg" />
When a platform crawls your URL, it reads that tag and uses the image URL as the visual preview for the shared link.
The image URL should be:
- absolute
- publicly accessible
- served over HTTPS
- stable enough for platform caches
- sized for social preview cards
Do not use a relative path like /images/preview.jpg. Use the full URL.
The Minimum Open Graph Setup
og:image works best with the rest of the core Open Graph tags:
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A short summary of the 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" />
For articles, change og:type to article and include article metadata when your site supports it.
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-05-05T09:00:00+00:00" />
The important part is that crawlers can read these tags in the initial HTML response. If your tags only appear after client-side JavaScript runs, some platforms may not see them.
Best og:image Size
For most pages, use:
1200 x 630 pixels
That gives you a 1.91:1 aspect ratio, which is the safest default for Open Graph cards across major platforms and messaging apps.
Use this size for:
- SaaS landing pages
- ecommerce product pages
- blog posts
- documentation pages
- comparison pages
- portfolio pages
- feature announcements
For deeper sizing details, read the OG image size guide. If you need one default answer, start with 1200 x 630.
Recommended og:image Tags
The main tag is enough for some platforms, but adding width, height, and alt text gives crawlers more context.
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Preview image for the page." />
Use og:image:alt to describe the image. Keep it useful and concise, just like image alt text elsewhere on your site.
og:image for X Cards
X uses its own Twitter Card tags, but it can still fall back to Open Graph data in many setups. For better control, add explicit X card tags:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your page title" />
<meta name="twitter:description" content="A short summary of the page." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
You can use the same 1200 x 630 image for both og:image and twitter:image if the design keeps important text and visuals away from the edges.
If X is a priority channel, consider generating a dedicated X variant with a slightly tighter 2:1 layout.
Common og:image Mistakes
Using a relative image URL
This is one of the easiest ways to break previews.
Bad:
<meta property="og:image" content="/og-image.jpg" />
Good:
<meta property="og:image" content="https://example.com/og-image.jpg" />
Social crawlers do not browse your site like a user. Give them the full URL.
Using an image behind authentication
If a crawler cannot fetch the image, it cannot render the preview. Avoid images that require login, signed cookies, internal network access, or temporary permissions.
Shipping one generic image for every URL
A logo card is better than a broken preview, but it is still weak. A product page should show the product. A blog post should reflect the article topic. A feature page should communicate the feature.
This is where dynamic OG image generation helps: one reusable template can create many page-specific preview images.
Placing text too close to the edge
Even with the correct image size, platforms can crop previews differently. Keep headlines, logos, prices, and product photos inside a generous safe area.
Forgetting that platforms cache previews
If you update the og:image tag and still see the old image, the platform may be showing cached metadata. Use platform debuggers to request a fresh scrape.
How to Debug og:image
When an image does not show, work through this checklist.
1. View the page source
Open the rendered page source and confirm the tag exists in the <head>.
Look for:
<meta property="og:image" content="https://example.com/og-image.jpg" />
If it is missing from the initial HTML, fix your metadata rendering first.
2. Open the image URL directly
Paste the image URL into a browser.
It should load without:
- login
- redirects to private pages
- certificate warnings
- blocked robots rules
- expired signatures
3. Check the image dimensions
If the image is tiny, platforms may show a small thumbnail or ignore it. Use 1200 x 630 as the default.
4. Test the URL in platform debuggers
Use the platform's preview or debugging tool to see what it reads. If you recently changed the image, request a re-scrape.
5. Change the image URL when caches are stubborn
If a platform keeps showing an old image, changing the image filename or adding a versioned asset URL can force a fresh fetch.
og:image Examples by Page Type
Product page
<meta property="og:title" content="Prestige GMT Automatic Watch" />
<meta property="og:description" content="A luxury travel watch with dual-time precision." />
<meta property="og:image" content="https://example.com/og/prestige-gmt.jpg" />
<meta property="og:type" content="product" />
The image should show the product, product name, price or offer, and brand identity.
Blog post
<meta property="og:title" content="How to Improve Social Preview Images" />
<meta property="og:description" content="A practical guide to better Open Graph images." />
<meta property="og:image" content="https://example.com/og/social-preview-guide.jpg" />
<meta property="og:type" content="article" />
The image should make the article topic visible without copying the full page title.
SaaS feature page
<meta property="og:title" content="Dynamic OG Images for Product Pages" />
<meta property="og:description" content="Generate branded social previews from reusable templates." />
<meta property="og:image" content="https://example.com/og/dynamic-og-images.jpg" />
<meta property="og:type" content="website" />
The image should show the feature, the product name, and a clear visual cue.
A Better Workflow for og:image
Manually designing an image for every page works when you publish rarely. It breaks down when you have many URLs.
A better workflow is:
- Create a template for each page type.
- Keep dimensions at 1200 x 630.
- Define dynamic fields like title, subtitle, price, product image, category, and logo.
- Generate a unique image URL for each page.
- Put that URL into the
og:imagetag. - Test the final page before sharing.
That is the workflow OGDynamic is built around.
With OGDynamic, you can create a branded template once, then reuse it across product pages, blog posts, landing pages, and documentation. Instead of treating og:image as a static file you remember at the end, it becomes a repeatable part of your publishing system.
For implementation examples, see the documentation. To create a preview manually, start from the template gallery.
Final Answer: How Should You Use og:image?
Use the og:image meta tag to define the social preview image for each page:
<meta property="og:image" content="https://example.com/og-image.jpg" />
Use an absolute HTTPS URL, make the image publicly accessible, start with 1200 x 630 pixels, and keep the content readable on mobile.
Most importantly, avoid using one generic fallback image for every page. A strong og:image should match the exact product, article, feature, or landing page being shared.
If you want a broader non-technical overview, read What Is an OG Image?. If you want to generate branded previews faster, create an OG image with OGDynamic.