What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
An Open Graph (OG) image is the page-specific picture a platform can use in a shared-link preview. A dependable starting point is a 1200 × 630 pixel (about 1.91:1) PNG or JPEG, with the important title, logo, or subject kept inside a central safe area. Add an absolute HTTPS URL in og:image, declare the image dimensions, and inspect the real preview because each platform may crop, cache, or render it differently.
What is an OG image?
The Open Graph Protocol defines og:image as the image URL that represents a webpage object in the graph. When a page is shared, a platform’s crawler can fetch that URL and build a link card around it. The image represents the destination page; it is not a guarantee that every network will display the same crop or even choose the image immediately.
The protocol also documents optional properties for the image:
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsog:image:widthandog:image:heightdescribe the pixel dimensions.og:image:typeidentifies the media type.og:image:secure_urlprovides a secure alternative URL.og:image:altsupplies a meaningful text description.
See the Open Graph Protocol documentation for the property definitions. Use a description in og:image:alt that says what the picture contains, rather than turning it into an advertising slogan.
#1 Best Overall
What size should an Open Graph image be?
Use 1200 × 630 pixels as a practical default. OG Image Design’s July 2026 sizing guide recommends that canvas for broad compatibility and describes it as approximately 1.91:1. This is design guidance, not a promise that every service uses that ratio or displays the whole file.
Protect the safe area
The same guide suggests keeping essential content inside a central region of roughly 87% of the canvas. Treat that margin as a starting point: a service may crop the sides or top and bottom, and the guide specifically notes that an X large-card view may crop a 1.91:1 source. Keep headlines, faces, product details, and logos away from all four edges, then preview the card in the network where it will be shared.
Choose a compatible file
Use a raster image, normally PNG or JPEG. The specialist guidance recommends those formats for maximum compatibility and cautions that SVG can fail with crawlers. Serve the file from a public, absolute HTTPS URL; a local path, relative URL, authentication wall, or HTTP-only address cannot reliably be fetched by a crawler. Confirm that the response is an image and that the URL remains stable after publication.
| Decision | Practical choice | Why |
|---|---|---|
| Canvas | 1200 × 630 px | Broad-compatibility recommendation from OG Image Design (July 2026), not a universal platform rule. |
| Ratio | About 1.91:1 | Matches the recommended canvas while leaving room for platform-specific crops. |
| Format | PNG or JPEG | Raster formats are recommended for crawler compatibility; SVG may fail. |
| Location | Public HTTPS URL | Absolute secure URLs are required by the specialist tag guidance. |
| Important content | Central safe region (roughly 87%) | Reduces the chance that a crop removes the message; verify on the target platform. |
Open Graph image examples and when to use them
The following patterns are deliberately different. None is a measured engagement formula; each is a way to make the destination recognizable at a small preview size.
1. Article or guide card
Use a short, legible title, a small category marker, and quiet brand treatment. A restrained layout lets the subject remain recognizable when the card is reduced on a phone.
- Best for: tutorials, news, explainers, and evergreen guides.
- Layout: title on one side or in a high-contrast central block, with a simple subject illustration or texture.
- Check: long headlines; remove secondary wording rather than shrinking the type until it is unreadable.
2. Product or project card
Show the thing the page is about: a product photograph, interface fragment, diagram, or project mark paired with a concise identifying title. Do not replace a page-specific subject with an unrelated site logo; the image should help a person understand where the link leads.
- Best for: release notes, product pages, portfolios, and case studies.
- Layout: one dominant subject, one identifying line, and enough contrast between the subject and background.
- Check: screenshots for tiny controls or text that disappear at preview size.
3. Minimal brand card
A strong background color or simple graphic with one focal element can work for an abstract topic. Keep the text restrained and make the visual still signal the destination’s subject; a color field with no context is easy to confuse with another page.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →- Best for: announcements, opinion pages, or topics with a clear visual metaphor.
- Layout: one focal shape or object, a short title, and a consistent but modest brand mark.
- Check: contrast in both light and dark viewing environments.
4. Template-driven card
Publishers with many pages can use a fixed layout with changeable title, subject image, and section label. A template improves production consistency, but it must be tested with unusually long titles, short titles, portrait subjects, and mobile crops.
- Best for: blogs, documentation libraries, catalogs, and multi-author sites.
- Layout: reserve fixed zones for title, section, and image so variables cannot collide.
- Check: fallback behavior when a title or image is missing; never let a blank variable produce an empty card.
| Pattern | Primary signal | Typical risk | Review at preview size |
|---|---|---|---|
| Article/guide | Readable topic headline | Text becomes too small or is clipped | Headline hierarchy and edge margins |
| Product/project | Specific subject | Generic logo obscures what the page covers | Subject recognition and detail loss |
| Minimal brand | Color or focal graphic | Card looks attractive but ambiguous | Context and contrast |
| Template-driven | Repeatable page identity | Long or missing variables break layout | Long titles, mobile crops, and fallbacks |
How to add an OG image to a webpage
Put the tags in the document’s <head>. Replace the example URL with a publicly reachable image that belongs to that page.
<meta property="og:image" content="https://example.com/images/article-share.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Illustrated preview of the article topic">- Export the artwork at 1200 × 630 pixels in PNG or JPEG.
- Upload it to a public HTTPS location and open the exact URL in a private browser window to confirm it does not require a login.
- Add the four properties shown above to the page head. Keep the alternative text factual and specific to the visible content.
- Publish the page, then inspect the shared-link preview in the target service. Do not assume that a correct tag produces an immediate refresh; crawlers and platforms can cache a previously fetched image.
- If the preview is wrong, verify the final HTML being served (not only a template file), the image response, redirects, and whether the platform has retained an older fetch.
Keep the image page-specific
A site-wide logo rarely explains the destination as well as an image made for that page. Google Search Central’s image guidance separately advises against generic images such as a site logo for its image use case; that advice should not be generalized into a rule that every social platform handles images identically. The safe editorial choice is to make the artwork match the linked page.
How to review an OG image before sharing
Visual review checklist
- Read the title at the smallest preview size you expect.
- Check that no critical letter, face, logo, or product edge touches the canvas boundary.
- View the design on a light and a dark surrounding interface.
- Check both a desktop-style large card and a narrow mobile card when the target service offers them.
- Confirm that the image still makes sense without the surrounding webpage text.
Technical review checklist
- Inspect the final page source for one intended
og:imageURL. - Confirm the URL is absolute, HTTPS, publicly fetchable, and points to a raster image.
- Confirm the declared width and height match the actual file.
- Use descriptive
og:image:alttext; do not stuff it with keywords. - After changing an image, allow for crawler caching and recheck the preview later rather than judging the change from your own browser cache.
Why is my OG image not showing?
The tag is missing from the delivered HTML
Server-side templates, a CMS plugin, or a security policy can omit a tag that exists in source files. View the published page source or the response body and search for property="og:image". Add the tag to the template that actually renders the page, then publish again.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallThe URL is relative, insecure, or private
Change /images/card.png to a complete HTTPS URL. Remove login requirements, expiring query signatures, and robots or firewall rules that block the crawler used by the target service. Test the URL from an unauthenticated network.
The file format or response is unsuitable
Export a PNG or JPEG and ensure the server returns the corresponding image content type. A file that downloads as HTML, redirects to a login page, or is an SVG that a particular crawler cannot process may be ignored.
The image is clipped
Keep important elements inside the central safe region and test the actual card. Do not “fix” every crop by shrinking all text; simplify the composition and preserve a readable hierarchy.
An old image remains after an update
Preview fetches are commonly cached. Check that the new file is live at the final URL, then use the destination platform’s own preview or re-scrape control if it provides one. A correct page can still show an earlier card for a while.
The image appears on one service but not another
Different crawlers can apply different crop, size, file, and cache rules. Compare the delivered metadata and image response first, then follow the target service’s current limits; do not treat one network’s rendering as a universal standard.
Or skip the browser setup
If you need to inspect how a published page renders before sharing, ScreenshotNeo can return a clean screenshot through one request. It accepts consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be switched off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
Use the API documentation at screenshotneo.com/docs/ for the current parameters. This example captures a page that contains the OG metadata:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpThe same request in Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"}, timeout=90)
open("shot.webp", "wb").write(r.content)And in Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/article' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server for AI agents such as Claude, Cursor, and other MCP clients, with take_screenshot, get_page_info, and capture_pdf tools. Its plans include every feature: the Free plan provides 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. You can sign up for the free plan and use it to check the rendered page before distributing the link.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Performance, reliability, and cost considerations
Design for fast fetching
Keep the OG file at a sensible byte size, use a stable URL, and avoid a chain of redirects. A crawler needs to fetch the image independently of the page; a decorative design that is enormous or slow to deliver can make previews unreliable even when the markup is correct.
Separate source artwork from delivery
Store an editable source file for your design system, then export a predictable PNG or JPEG for the public URL. When a title changes, generate a new page-specific file and update the tag deliberately. This makes it possible to roll back a bad crop without changing unrelated pages.
Plan for cache behavior
A screenshot or preview captured immediately after publication may represent an earlier response. Keep the URL and content versioning strategy consistent, document when an image changed, and verify from an external fetch rather than relying on a browser that has already cached the page.
FAQ
Can one OG image represent an entire website?
It can, but a page-specific image usually communicates the destination more clearly. Use a shared fallback only when a page has no suitable artwork, and make that fallback intentionally descriptive.
Free tools Windows power users keep installed
One-click scans. No signup required.
Should the text in an OG image duplicate the page title?
A concise version is often useful, but it does not need to reproduce every word. Prioritize the subject and readability at preview size; the linked page supplies the full context.
Is 1200 × 630 a mandatory standard?
No. It is the broad-compatibility recommendation from OG Image Design’s July 2026 guide. Platforms can impose different ratios, crops, and limits, so verify the card where you intend to share it.
Best Value
Does adding og:image:alt guarantee visible alt text in a social card?
No. The property describes the image for consumers of the metadata; a platform may use it differently or not display it as visible caption text.
Frequently Asked Questions
Can I use a data URI or base64 string for og:image?
Use a public absolute HTTPS image URL instead. The specialist tag guidance is written for crawler-fetchable URLs, and a hosted raster file is the dependable implementation.
How many OG images should a page declare?
For a predictable card, declare the single image you intend to represent that page and keep its dimensions and description accurate. Multiple-image behavior is platform-specific.
Why does a preview tester show the right image while a real share does not?
The tester and the sharing service may fetch at different times, use different caches, or apply different rendering rules. Compare the final HTML and image response, then inspect the actual destination service.
The Bottom Line
Build each card around the destination page, export a 1200 × 630 PNG or JPEG, keep critical content inside the central safe area, and publish it at an absolute HTTPS URL with accurate dimensions and alt text. Always verify the rendered preview on the service where the link will appear.
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.
