Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →An Open Graph (OG) image is a raster graphic associated with a webpage through the og:image metadata property. When someone shares the page, services can use that image in the link preview. Making one correctly is a two-part job: create an appropriate image file, then publish it at a public URL and point your page metadata to that URL.
The Open Graph Protocol documentation describes the goal this way: “The Open Graph protocol enables any web page to become a rich object in a social graph.”
1. Create the image file
Use a practical canvas size
For one general-purpose asset, start with 1200 × 630 pixels. OG Image Design (July 2026) and another 2026 guide give that same default. Treat it as a practical cross-platform baseline, not a guarantee that every service will display the complete canvas without cropping.
Use the page being shared as the subject of the graphic. A useful design normally contains a short page title, a recognizable logo or site name, and a visual that supports the topic. Do not put essential information only in tiny type: link cards are often displayed much smaller than the source file.
Choose PNG or JPEG
- PNG: Prefer it for text-heavy designs, screenshots, diagrams, logos, and flat-color artwork. Edges and letters remain crisp.
- JPEG: Prefer it for photographic or textured artwork where a smaller file is useful.
The practical guides recommend raster PNG or JPEG for broad crawler compatibility and warn that SVG may not work reliably with crawlers. Export the final file in the format that matches its content rather than assuming one format is universally best.
Keep a safe area
Leave generous space between the title, logo, and the canvas edges. The image-size guide suggests a central safe area because cards can crop differently in different contexts. That margin is publisher guidance, not a universal platform standard, so inspect the actual surfaces important to your site. Avoid placing a word, face, or logo where a crop could remove it.
Use one image or several variants?
A single 1200 × 630 image minimizes design and publishing work and is a sensible default when many services may display the URL. Platform-specific variants provide more control over crops and composition, but they add files, metadata decisions, and maintenance. The available guidance does not establish current exact specifications for every platform, so do not treat an unofficial per-platform table as a permanent contract.
2. Publish the image at a usable URL
Requirements for the image URL
- Host the file where an unauthenticated crawler can fetch it.
- Use an absolute HTTPS URL, such as
https://example.com/images/article-preview.png, rather than a relative path. - Make sure the URL in the HTML is the URL of the final image, not a local development path or an expiring private link.
- Serve the selected PNG or JPEG with the correct image content type and without requiring a browser session.
For sites that use a CDN, check the public CDN address directly. A file that works only after signing in, accepting a cookie, or running client-side JavaScript is not a dependable OG asset.
Free tools Windows power users keep installed
One-click scans. No signup required.
3. Add Open Graph metadata to the page
Put the properties in the page’s <head>. The essential declaration is og:image; width and height help consumers understand the asset before downloading it.
<meta property="og:image" content="https://example.com/images/article-preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Replace the example URL with the actual public image URL. The example above is illustrative and does not identify a working asset.
A complete head example
Most implementations also describe the page itself. These additional properties make the shared object less ambiguous while leaving og:image as the image reference:
<head>
<title>How to Make an Open Graph Image</title>
<meta property="og:title" content="How to Make an Open Graph Image">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/open-graph-image">
<meta property="og:image" content="https://example.com/images/open-graph-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Create an OG image and connect it to your page metadata.">
</head>Keep the metadata and the asset synchronized. If you replace the file, retain a stable URL when possible or update the tag everywhere that references the old file.
4. A repeatable production workflow
- List the page’s message. Reduce the page title to a readable phrase that still makes sense without the article body.
- Design at 1200 × 630 pixels. Place the title and branding inside a central safe area and check legibility at thumbnail size.
- Export as PNG or JPEG. Choose PNG for text, screenshots, and flat graphics; choose JPEG for photographic art.
- Upload the file. Confirm that its final address is publicly reachable over HTTPS.
- Add the tags. Set
og:image, and includeog:image:widthandog:image:heightwhen possible. - Inspect the rendered page. View the HTML source or extracted metadata to verify that the expected absolute URL is present.
- Check the sharing surfaces that matter. Confirm that the image appears and that the title, logo, and other essential content survive the displayed crop.
5. Troubleshoot missing or incorrect previews
The preview has no image
- Inspect the final HTML and search for
property="og:image". - Verify that the value is an absolute HTTPS URL, not a relative path.
- Open the image URL without being logged in. If it redirects to a login page, requires a token, or fails, the crawler may not be able to use it.
- Confirm the file is actually PNG or JPEG and that the server returns an image response.
The wrong image appears
Look for multiple og:image declarations, template defaults, or a stale URL in the deployed version. Remove unintended declarations or place the intended image in the metadata emitted for that page. Check the page source rather than only a CMS editor preview.
The image is cropped badly
Rework the composition so essential content sits farther from every edge. A 1200 × 630 canvas is a baseline, not a promise of identical rendering. Test the actual service and account for its current card treatment rather than shrinking all text to fit every hypothetical crop.
The page changed but the old preview remains
First verify that the live page now emits the new URL and that the URL itself serves the new file. Preview systems may retain an earlier fetch; the supplied guidance does not establish a universal refresh command or cache duration, so use the target service’s current inspection or refresh mechanism where available.
The image looks soft or text is unreadable
Check the exported dimensions, avoid enlarging a smaller source, and use PNG for text or screenshots. Review the asset at the size at which the link card is normally displayed, not only at 100 percent in an editor.
Recommended Free Tools
6. Verify before publishing
- The design is 1200 × 630 pixels unless a deliberate platform-specific variant is being used.
- Essential title and branding are inside the chosen safe area.
- The file is PNG or JPEG and matches the artwork.
- The image URL is absolute, public, and HTTPS.
og:imagepoints to the intended file.- Width and height are present and accurate when possible.
- The live page, not just a local preview, contains the tags.
- The image has been checked on the sharing surfaces important to your audience.
Or skip the browser setup
If generating and hosting the asset is the part you want to automate, ScreenshotNeo can capture a webpage directly through its API. It is a website screenshot API and MCP server for developers. Before capture it can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Use the API base URL documented at ScreenshotNeo’s documentation. This request returns a WebP image; change the target URL to the page you want to represent:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also supports full-page capture with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets plus custom viewports, retina scale, custom CSS and JavaScript, click-before-capture, selector hiding, selector/delay/network-idle waits, request and resource blocking, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, resizing, user-selected cache TTLs, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, an OpenAPI specification, and parameter names used by other screenshot APIs. Every feature is on every plan. Pricing is Free for 1,000 shots per month with no card, then Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; yearly billing gives two months free.
For a page-specific OG image, you may still want to add your own title and branding around the capture, then publish the resulting raster file at the HTTPS URL used in og:image. See the ScreenshotNeo site for the service and sign up free for 1,000 screenshots a month with no card.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →7. FAQ
Is an OG image the same as a favicon?
No. A favicon identifies a site or page in browser interfaces; an OG image supplies the visual associated with a shared webpage link.
Can I use a relative image path?
Use an absolute HTTPS URL instead. It removes ambiguity for crawlers fetching the page outside your site’s browsing context.
Should every page have a unique image?
Unique images make shared links easier to distinguish, but a consistent site-wide fallback is better than publishing no valid image. Choose the approach your editorial workflow can maintain.
Frequently Asked Questions
Is an OG image the same as a favicon?
No. A favicon identifies a site or page in browser interfaces; an OG image supplies the visual associated with a shared webpage link.
Can I use a relative image path?
Use an absolute HTTPS URL instead. It removes ambiguity for crawlers fetching the page outside your site’s browsing context.
Should every page have a unique image?
Unique images make shared links easier to distinguish, but a consistent site-wide fallback is better than publishing no valid image. Choose the approach your editorial workflow can maintain.
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.
