An Open Graph image is the preview picture that appears when someone shares a page’s link. It sits on the link card with the title and description. You declare it with HTML meta tags in the page’s <head>. Without those tags, most platforms show a bare URL or an empty box.
This guide covers what Open Graph images are, which tags you need, and why every path on your site should carry its own preview, not one image for the whole domain.
What an OG image is
When a link is shared, the platform’s crawler fetches that URL and reads meta tags from the raw HTML. It does not run your JavaScript. The tag that points at the picture is og:image. The crawler downloads that file and uses it as the card’s visual.
People use “OG image” to mean two related things:
- The og:image tag: the HTML that points to the file.
- The Open Graph image: the picture that shows up in the preview.
The tag is the pointer; the image is what people see.
The tags you need
A usable preview usually needs five Open Graph properties on the page being shared:
-
og:title: the headline on the card -
og:description: the short supporting line under the title -
og:image: an absolute HTTPS URL to the preview image -
og:url: the canonical URL for this page -
og:type: what kind of object the page is (website,article,product, and so on)
That is the whole contract for most crawlers. Frameworks and CMS plugins are just ways of emitting these same tags into <head>. Relative image paths and plain http URLs are the usual silent failures; use a full https://… URL for og:image.
If you want the protocol background (how crawlers read tags, and what else exists beyond this core set), see the Open Graph protocol explained.
One image per path, not one for the site
Open Graph is scoped to the URL being fetched. When someone shares yoursite.com/products/boots, the crawler reads the tags on that path. When they share the homepage, it reads the homepage’s tags. There is no site-wide OG image that covers every share unless you deliberately put the same values on every page.
That is why a single logo card for the whole domain underperforms. The shared URL is a specific page. The card should describe that page.
In practice that means:
- Homepage: brand, positioning, and a title that reads as the company or store, not a product SKU.
- Product page: the product name, a clear product visual, and the detail that makes this SKU different (price, colorway, category).
- Article or blog post: the post title, a readable headline on the image, and enough context that the card is not interchangeable with every other post.
- Collection, category, or landing path: the name of that section and imagery that matches it, not the homepage logo again.
Each of those paths gets its own og:title, og:description, og:image, and og:url. Reusing one image across hundreds of URLs is allowed by the protocol; it is just a weak preview.
What a good card includes
Strong Open Graph images carry information. A clear headline (large enough to read as a thumbnail), brand marks that make the card recognizably yours, and one detail that belongs to this page (a price, an author, a category, a date) beat a decorative background with no text.
Keep important text and logos away from the edges so cropping does not erase them. For canvas size and file constraints, use the OG image sizes and specs guide. The short version is a wide landscape image at about 1200×630 and a publicly reachable HTTPS URL.
What that looks like in practice
These two cards were generated dynamically from live product pages. Product name, photo, and price come from the page’s data, so each product gets its own preview instead of a shared logo box. Click either card for the full breakdown.
See how each was built in the Tecovas and Cotopaxi case studies, or browse all of our case studies.
These are illustrative examples we generated with OpenGraphImage to show what a dynamic card can look like. They are not running in production on these sites, and are not affiliated with or endorsed by the brands shown. The logos and products belong to their respective owners.
Doing this for every page
Hand-designing a unique image for every product, post, and landing path does not scale. You either build a pipeline that renders a template per path, or you generate the image when the crawler asks for it.
We built OpenGraphImage for the second path: you design a template once, point each page’s og:image at a URL we serve, and we render a branded card from that page’s live metadata. For storefronts, that looks like dynamic OG images on Shopify.
If the image will not update
Crawlers cache the first card they build for a URL. Changing the image file behind the same og:image URL often does nothing until that cache expires. Pointing og:image at a new URL (new filename or a version query string) is the reliable way to force a fresh fetch. Before you chase cache, confirm the tag is present in the raw HTML for that path and that the image URL is absolute HTTPS.
Check a page before you share it
Paste any URL into the OG & meta tag inspector. It shows the title, description, and image crawlers will read from that page, so you can catch a missing tag or a relative image URL before the link goes out.
Frequently Asked Questions
What is an Open Graph image?
The preview image shown when a page's link is shared on social platforms and chat apps. It is set with the og:image meta tag and appears as the large visual on the link card.
What HTML tags do I need for an Open Graph preview?
The core set is og:title, og:description, og:image, og:url, and og:type. Put them in the page's head. og:image must be an absolute HTTPS URL.
What is the difference between an OG image and the og:image tag?
The og:image tag is the line of HTML that points to the image file; the Open Graph image is the picture itself. The tag tells crawlers where to find the image to show in the preview.
Do I need a different OG image for every page?
Yes, in practice. Crawlers read the tags for the specific URL being shared, so each path can (and should) declare its own title, description, and image. A single site-wide logo card wastes the chance to show what that page is about.
Why is my Open Graph image not showing or not updating?
Platforms cache the card the first time a link is scraped, so a new image at the same URL may not appear until the cache clears or the image URL changes. Also confirm og:image is an absolute HTTPS URL — a relative or http URL fails silently.
How do I check what my OG image looks like?
Paste any URL into an OG inspector. It shows the image, title, and description crawlers will read from that page's tags, so you can catch a missing tag, a relative URL, or a stale card before anyone shares the link.