Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsMake a wide image that represents the page people will share, publish it at a public HTTPS URL, then add that URL to the page’s og:image metadata. A practical general-purpose starting size is 1200 × 630 pixels. Export graphic-heavy designs as PNG or photographic images as JPEG, keep important content away from the edges, and check how the published page is interpreted on the sharing surfaces that matter to you.
What an Open Graph image does
An Open Graph (OG) image is an image file associated with a webpage through its metadata. When a page link is shared, that image can supply the visual in the link preview. The Open Graph Protocol documentation describes its purpose this way: “The Open Graph protocol enables any web page to become a rich object in a social graph.” In practical terms, the image is part of the information a page provides to services that process shared links; it is not embedded in the link itself.
Making one involves two linked jobs: create and publish a suitable graphic, then tell the webpage where the file is. A polished image will not help if the metadata points to a missing or inaccessible file. Conversely, valid metadata cannot make a nonexistent image appear. Preview appearance can also differ across platforms, so one image should be treated as a broadly useful starting point, not a guarantee of identical display everywhere.
Choose dimensions, format, and a crop-safe layout
Start with 1200 × 630 pixels
For one asset intended to work across a range of sharing surfaces, use 1200 × 630 pixels as a practical baseline. OG Image Design recommended this size in July 2026, and another 2026 guide gives the same general default. It is a recommendation for a broadly useful image, not an official promise that every service will show the entire graphic at that size. Some contexts may crop or resize it.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Plan the composition for a wide rectangle. Give the page title the strongest visual emphasis, and use supporting text, a logo, or a relevant illustration only when each helps identify the page. A person seeing the preview should be able to understand what the link is about without needing to read a block of tiny text.
Choose PNG or JPEG for the artwork
| Format | Good fit | Practical trade-off |
|---|---|---|
| PNG | Text, screenshots, diagrams, and flat-color graphics | Often preserves crisp edges in graphic designs; file size can be larger than a compressed photograph. |
| JPEG | Photographic artwork | Designed for photographic images; compression can affect fine text or sharp graphic edges. |
The practical guides favor raster formats such as PNG and JPEG for broad crawler compatibility and warn that SVG may not work reliably with crawlers. If dependable preview handling is the goal, use a raster export rather than assuming every platform will process SVG. Choose the format that matches the content rather than exporting the same design in multiple formats without a reason.
Keep critical content inside a safe area
Do not put the title, logo, or other essential information right against the perimeter. Sharing cards may crop images differently, and the cited image-size guide recommends leaving a central safe area. Its suggested margin is that publisher’s design guidance, not a universal platform rule, so do not treat a particular pixel inset as guaranteed protection. Instead, leave visible breathing room on every side and make the graphic understandable even if a narrow strip at an edge is lost.
If crop control matters more than minimizing maintenance, you can prepare variants for specific destinations. A single shared file is simpler to manage; separate variants give you more control over composition in different contexts but require you to maintain more assets and metadata. The available general guidance does not establish current exact specifications for every platform, so check the destinations you actually use rather than relying on a supposedly universal platform-by-platform size chart.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Rank #3
Create and publish the image
- Choose the page and its message. Make the image represent the specific page being shared, not just the website in general. Use the page title or a concise visual idea as the starting point.
- Design a wide canvas. Set it to 1200 × 630 pixels for a general-purpose asset. Place the most important words and visual elements well within the edges.
- Export a raster file. Use PNG for text, screenshots, or flat graphics, or JPEG for photographic art. Give the file a clear name, such as
article-preview.png. - Publish it at a public HTTPS URL. Upload the image to a location that a visitor can reach without signing in. Use the full, absolute URL to the file, not a local path such as
/Users/name/Desktop/article-preview.pngand not a path that only works inside your development environment. - Open the image URL yourself. Check that it resolves to the intended image rather than a missing-file page, access screen, or HTML page. A browser check is useful, though it does not by itself prove how every crawler will retrieve the file.
For example, once you have uploaded your actual asset, its URL might look like https://example.com/images/article-preview.png. That URL is illustrative, not a working image. Replace it with the exact publicly reachable URL of your own file.
Add Open Graph metadata to the page
Place the image metadata in the HTML document’s <head>. The value of og:image should be the absolute URL you published in the previous step. The width and height properties describe the image dimensions and are useful additions when possible.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
<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 illustrative URL with the real asset URL. If the file you publish has different dimensions, put its actual width and height in the metadata instead of copying 1200 and 630 blindly. The metadata belongs to the page being shared, so check that you have added it to the intended page rather than only to a site-wide template that may not cover it.
On a hand-authored site, edit the page template or HTML that generates the head, then deploy the change. On a content-managed site, look for the page’s social-sharing or Open Graph image field, or for theme settings that populate the page head. The exact control depends on the site’s software; whichever route you use, inspect the rendered page source after publishing to confirm the final HTML contains the correct properties and URL.
Verify the published result
- Inspect the final page, not just your editor. Load the public page and inspect its HTML head. Confirm that
og:imageappears once with the intended absolute HTTPS URL and that any width and height values match the file. - Check the asset independently. Open the image URL in a browser and verify the image loads. If your site restricts access, redirects unexpectedly, or serves a different file at that address, fix that before judging the preview.
- Use the preview or metadata checker for the destination that matters. Check the page on the sharing surfaces relevant to your audience. A page-level metadata check and a visual card preview answer different questions: one helps establish what metadata is present; the other shows how a particular surface renders it.
- Review the crop and legibility. Look for a clipped title, obscured logo, or text that becomes too small at card size. If important content is cut off, revise the layout or prepare a destination-specific image, then publish and check the updated page.
A normal browser screenshot of the webpage can help you inspect the page itself, but it is not proof that a social platform has extracted or rendered the OG image correctly. Treat the destination’s own preview behavior as the result to inspect. Platform behavior can vary, and the available general recommendations do not establish a universal preview result or a single cache-refresh procedure.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you want a screenshot of a published page while checking its layout, you can request one with ScreenshotNeo. A screenshot is useful for visually inspecting a webpage; it does not replace checking the page’s Open Graph metadata or the destination’s actual share preview.
ScreenshotNeo API documentation
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://screenshotneo.com -o shot.webpReplace the example target with the public page you want to capture and use your API key. ScreenshotNeo returns a clean screenshot or PDF from one GET request. It accepts cookie or consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and each response identifies the page verdict and billing status in its X-Page-Verdict and X-Billed headers. An MCP server provides screenshot tools for AI agents and MCP clients, including Claude and Cursor. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Every feature is available on every plan. Learn more at ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.
Troubleshoot a missing or wrong preview
The image does not appear
- Check the rendered head. Confirm that the public page actually contains an
og:imageproperty and that a publishing tool or theme has not replaced or omitted it. - Check the URL directly. Make sure it is the complete URL of the image, uses HTTPS, and loads without an access prompt or an error page. Correct the metadata if it points to an old filename or a different page.
- Check the file type and response. Use PNG or JPEG for the broad compatibility recommended by the guides. Verify that the URL delivers the image you intended rather than a document or a failed redirect.
- Check which page you tested. Metadata is attached to the page URL. A correct image on one article does not ensure a second article has its own correct metadata.
The preview shows an old image or a surprising crop
First verify the current page source and image URL so you know whether the published metadata is actually correct. If they are, the remaining difference may be in how the destination retrieves or displays previews. Do not assume a browser reload will force a destination to refresh its preview; cache-refresh behavior is not established here. Inspect the surface where the link is shared and keep essential design elements away from the edges to reduce the impact of differing crops.
The image looks blurry or its text is hard to read
Check the exported dimensions and view the image at the scale at which it is likely to appear as a card. If you used a photographic format for sharp text or flat graphics, try PNG. Simplify small supporting text, strengthen contrast, or make the key title larger. Do not solve legibility by moving text toward the edge, where it is more exposed to cropping.
The preview works on one service but not another
Do not infer that every platform uses the same crop or accepts files identically from one successful preview. Recheck the metadata and public image URL, then inspect the result on the service that is failing. The broad image-size and format recommendations are not a substitute for that service’s current behavior. If a single composition remains awkward in a particular context, a separate variant can improve crop control at the cost of maintaining another asset.
Quick Recap
Practical maintenance choices
- Keep the image URL stable when possible. If you replace or rename the file, update the page metadata to the new public URL and check the published page again.
- Make page-specific images when they add useful context. Reusing one generic graphic is easier to maintain, but a specific article title or image can make the preview more representative of that link.
- Use a small set of repeatable design rules. Consistent typography and logo placement make a site’s previews recognizable; a safe margin and readable title make individual graphics more resilient to resizing.
- Recheck after material changes. Changes to the image, URL, page template, or publishing workflow can break the relationship between the page and its image. Verify the public HTML and preview again after such changes.
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.
