An Open Graph image supplies the visual asset in a social preview card. When someone shares a page URL, a platform crawler reads metadata in the page’s HTML head—including og:title, og:description, og:url, and og:image—then uses those values to build a rich link preview. A reliable starting image is 1200 × 630 pixels, but each platform may crop or display it differently.
How an Open Graph image becomes a preview card
The Open Graph protocol lets a web page be represented as a rich object in a social graph. When a URL is shared, a platform crawler fetches the page metadata and uses it to construct a card: text fields provide context, and og:image points to the visual asset. The Open Graph protocol documentation defines the core properties og:title, og:type, og:url, and og:image.
The image is not embedded in the HTML itself. Your page publishes a URL to the image; the platform must be able to fetch that image and may cache the metadata or asset. The final card is therefore a combination of your page’s markup, the client’s parsing and layout rules, and its cache state.
What each core tag contributes
og:titlesupplies the card’s title.og:descriptionsupplies a short description.og:urlidentifies the page URL represented by the object.og:typeidentifies the kind of object, commonlywebsitefor a general page.og:imagesupplies the image URL used for the visual part of the preview.
Use this metadata pattern
Put the tags in the document’s <head>. Replace the example page and image URLs with your own publicly accessible URLs. This example also supplies structured image properties and an X card type:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<meta property="og:title" content="Page title">
<meta property="og:description" content="Short description">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/share-card.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive text for the share image">
<meta name="twitter:card" content="summary_large_image">The markup uses an absolute HTTPS image URL and declares dimensions and alt text. The Open Graph protocol also defines og:image:url (an alias for og:image), og:image:secure_url, and og:image:type. It recommends that a page specifying og:image also specify og:image:alt. See the protocol’s structured image properties.
Multiple image choices
You can repeat og:image to declare an array of images. The first image has preference when there is a conflict. Put each image’s structured properties immediately after its corresponding og:image; a subsequent og:image starts a new image entry. Put the image you most want used first.
Which tags Facebook, LinkedIn, X, Slack, and Discord use
Clients do not all parse the same fields or render the same layout. A current implementation guide describes Facebook as reading the main Open Graph fields, X as reading Twitter card fields with possible fallback to Open Graph fields, and Slack as combining Open Graph and Twitter card data. These are implementation patterns, not immutable platform contracts; parsing and card presentation can change. Consult current implementation guidance and validate your target client.
Rank #2
For X, twitter:card distinguishes a small summary card from a large-image card. Set summary_large_image when you want the large-image presentation. Do not assume that setting this tag controls Facebook, LinkedIn, Slack, or Discord. Open Graph tags provide a broadly useful baseline, but a client can have its own fallback behavior and crop.
Free tools Windows power users keep installed
One-click scans. No signup required.
The available guidance does not establish a separate, authoritative field-by-field parsing rule for every version of LinkedIn or Discord. Test the live preview on the platforms that matter to your audience rather than treating one tag recipe as a guarantee of identical output everywhere.
Choose image dimensions and design for cropping
A 2026 cross-platform design guide gives 1200 × 630 pixels—about a 1.91:1 ratio—as a practical single-canvas starting point for major platforms. In the same guide, LinkedIn is listed at 1200 × 627 pixels and X large cards near a 2:1 ratio. A 1200 × 630 canvas is a useful compromise, not a promise that every client will show the full image unchanged. See the 2026 OG image design guide.
| Use case | Reported canvas | How to apply it |
|---|---|---|
| Practical cross-platform starting point | 1200 × 630 px (about 1.91:1) | Use as the base image, then inspect real previews for crops. |
| LinkedIn figure in the 2026 guide | 1200 × 627 px | Keep important content away from edges; verify the card in LinkedIn. |
| X large-card figure in the 2026 guide | Approximately 1200 × 600 px (about 2:1) | Set twitter:card to summary_large_image and check the rendered crop. |
Use a safe central area for text, faces, and logos because clients may resize or crop the asset. Keep the image URL absolute and publicly fetchable over HTTPS; an image behind authentication or inaccessible to a crawler cannot reliably appear. Add useful og:image:alt text describing the image rather than repeating a keyword phrase. The protocol defines the alt property; actual fetching and cropping behavior should be checked in the target clients.
Why a social preview is missing, cropped, or stale
The image is missing
- The crawler cannot fetch the image. Check that the URL is absolute, uses HTTPS, and is accessible without a login or other visitor-only access requirement.
- The tags are absent from the fetched HTML. Make sure the metadata is in the server-rendered document head, not added only after JavaScript runs.
- The wrong image is first. If several
og:imageentries exist, the first has preference in conflicts. Put the intended primary image first.
The image is cropped or the card differs by platform
Each client may apply its own card layout and crop. Start with the 1200 × 630 canvas, keep essential content near the center, and inspect the result in the target platform. For X, confirm that twitter:card requests the large-image layout if that is the intended presentation.
The preview shows old information
Platforms commonly cache preview data. After changing tags or an image, use the relevant platform debugger or inspector to request a re-scrape, then allow for cache delay. If an old image remains cached, changing the image URL can help trigger a fresh fetch. Implementation guidance discusses preview inspection and refresh workflows.
Rank #4
How to inspect a page before sharing it
For a useful check, inspect the HTML the crawler can actually receive, then examine the platform’s preview. A browser-only visual check is not enough if your application injects metadata after rendering: the crawler may see a different document.
- Open the page’s server-rendered source and confirm the Open Graph tags are inside
<head>. - Verify that
og:urlis the intended page and thatog:imageis the full HTTPS asset URL. - Check that the first image is the intended one and that its width, height, type, and alt metadata follow that image entry.
- Confirm the image can be fetched without authentication and that its dimensions suit the desired card.
- Inspect the preview in each priority platform; after edits, request a re-scrape through its debugger or inspector.
When you need a reproducible capture of how a page renders in a browser, ScreenshotNeo is a website screenshot API and MCP server for developers. Its clean-shot options can accept cookie or consent banners and remove known consent platforms, newsletter popups, and chat widgets before capture; those steps can be turned off. A screenshot is useful for documenting a rendered page, but it does not replace checking the platform’s own card parser and cache.
Or skip the browser setup
For a rendered page capture, one GET request can return an image or PDF. This cURL example saves a WebP screenshot of the page:
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minutecurl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpSee the ScreenshotNeo API documentation for request options. A Python equivalent is:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page"}, timeout=90)
open("shot.webp", "wb").write(r.content)With ScreenshotNeo, cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; and an MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month with no card.
Common implementation mistakes and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| No image appears | The image URL is relative, inaccessible, or not present in the HTML returned to the crawler. | Use an absolute HTTPS URL, make it publicly fetchable, and place the tag in server-rendered head markup. |
| Wrong image appears | A different og:image is listed first or an old preview is cached. |
Put the intended image first, then request a platform re-scrape; consider a changed image URL if the old asset persists. |
| X shows a small card | The Twitter card type does not request the large-image layout. | Set twitter:card to summary_large_image and inspect the result. |
| Different platforms show different crops | Clients use different layouts and image ratios. | Keep key content central, start from 1200 × 630, and validate each priority client. |
| Preview still shows previous title or image | The client is using cached metadata or asset data. | Use its debugger or inspector to re-scrape and allow for cache delay. |
FAQ
Does adding an Open Graph image guarantee more clicks?
No reliable general percentage for click-through or engagement improvement is established here. The tags make a visual preview possible, but the resulting engagement depends on the audience, content, platform, and presentation.
Should I use a separate image for every platform?
Not necessarily. A 1200 × 630 image is a practical shared starting canvas, but if the important content is cropped in a priority client, test a platform-specific asset or layout.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
