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 minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11An OG image is the URL a page declares in its Open Graph metadata so a link preview can represent that page with a picture. Add it with an absolute og:image URL, pair it with descriptive og:image:alt text, and include the other core properties—og:title, og:type, and og:url. Here is a complete example, followed by implementation steps, design guidance, validation, and fixes for common failures.
Complete OG image example
Place these elements in the <head> of the page being shared:
<meta property="og:title" content="A clear page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/images/page-preview.jpg">
<meta property="og:image:alt" content="A concise description of the preview image">The Open Graph protocol defines the first four properties as basic metadata. The image URL identifies the asset that represents the page; it does not upload, generate, or host that asset. Use an absolute, publicly reachable URL rather than a relative path such as /images/page-preview.jpg.
What each property does
og:title
This is the title associated with the shared object. Make it specific to the page and short enough to remain useful when a preview is compact. It need not be identical to the visible HTML <title>, but keeping the two aligned avoids confusing visitors.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
og:type
website is suitable for a normal article, landing page, or documentation page. Other Open Graph object types exist, so choose a different value only when your page genuinely represents that object.
og:url
Set this to the page’s preferred canonical URL. Include the scheme (https://) and use the same canonical form you want platforms to associate with the preview.
og:image
This is the image URL fetched for the preview. It should be reachable without a login, robots challenge, expiring session, or client-side action. Keep the file at a stable URL so a previously shared page does not unexpectedly lose its asset.
og:image:alt
The protocol recommends supplying this structured property whenever og:image is present. Describe the meaningful visual content, not the filename: “Blue mountain silhouette behind the words Winter trail guide” is more useful than “hero-final-2.jpg”.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Optional image properties
The protocol also defines image-related structured metadata for MIME type, width, height, secure URL, and alternative text. A fuller declaration can look like this:
<meta property="og:image" content="https://example.com/images/guide.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A hiker crossing a snowy ridge in the winter trail guide">Do not treat 1200×630 as a universal requirement. The protocol shows illustrative dimensions, but current image-size limits, preferred ratios, file-size limits, crawler behavior, and cache rules vary by service and were not established as one cross-platform standard.
How to add an OG image to a page
- Create the asset. Export a readable image in a format your hosting stack serves correctly, such as JPEG, PNG, or WebP. Use one clear focal point, strong contrast, and text that remains legible when the image is reduced; these are design recommendations, not protocol requirements.
- Publish it at a stable HTTPS URL. Confirm that an incognito browser can open the exact image URL with a normal HTTP response. Do not protect it with a cookie wall or require JavaScript to return the bytes.
- Add metadata to the document head. Insert the four core tags and
og:image:alt. In a server-rendered site, emit them in the initial HTML response. In a single-page application, make sure the crawler receives the tags without waiting for a browser-only route transition. - Use the page’s final URL. Set
og:urlto the canonical address after redirects, not to a temporary preview, tracking URL, or localhost address. - Deploy and inspect the response. View the page source or fetch it with an HTTP client. Search the returned HTML for each property; inspecting only the DOM after scripts run can hide a server-rendering problem.
- Share a fresh URL while testing. Preview services may cache metadata. A changed image can therefore take time to appear even when your origin is already correct.
Designing a useful OG image
Choose one focal point
A preview is often displayed much smaller than the source file. One subject, product, or short headline survives reduction better than a collage of tiny panels.
Rank #2
Prioritize contrast and legibility
Use foreground and background colors that remain distinct on both light and dark interfaces. Keep important text away from edges where a platform might crop the image. Avoid relying on fine print, thin lines, or details that disappear at thumbnail size.
Match the page honestly
The image should identify the linked page rather than promise a different article or product. Treat the alt text as a concise description for the image, not as a list of search keywords.
Do not confuse visual quality with protocol compliance
There is no evidence here that a particular ratio, file format, or design style guarantees more clicks. The third-party Vercel OG Image Example breakdown recommends a clear focal point, high contrast, and avoiding tiny details; those are practical design suggestions, not measured performance claims.
Where OG previews are used
Open Graph metadata describes a page for systems that build link previews. Apple documents Open Graph images and meaningful captions for previews in Messages in TN3156. That documentation supports the Messages use case; it does not establish that every social network, chat application, mail client, or search product renders the same fields in the same way. Expect platform-specific cropping, title selection, caching, and fallback behavior.
Validation checklist
- The initial HTML contains exactly one intentional value for each core property.
og:imageandog:urlare absolute HTTPS URLs.- The image URL returns the image bytes without authentication or an interactive challenge.
- The server sends a correct image MIME type, such as
image/jpegorimage/png. og:image:altdescribes the visible subject and is present wheneverog:imageis present.- The title, image, and canonical URL refer to the same page.
- The image still communicates its subject when reduced and cropped.
- You tested the deployed URL, not a local development address.
Troubleshooting an OG image that does not appear
The preview shows no image
Check the raw HTML first. A tag inserted only after client-side JavaScript runs may be invisible to a crawler. Then open the exact image URL without cookies and inspect the response status, redirects, and content type. A private, broken, rate-limited, or non-image response prevents retrieval.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesThe old image keeps appearing
Metadata and image responses can be cached by the preview service, an intermediary CDN, or your own edge cache. Verify the origin has the new bytes, then allow for cache expiry. Renaming the asset and updating og:image creates a new URL, but it does not guarantee immediate refresh everywhere.
The wrong page title or URL appears
Look for duplicate Open Graph tags from a theme, plugin, layout, or server-side component. Remove conflicting values and ensure og:url matches the canonical URL after redirects. Also check that you are sharing the deployed URL rather than a staging host.
The image is cropped badly
Cropping is controlled by the consuming platform, not by the Open Graph tag. Keep the focal subject away from the edges, test the artwork at a small size, and avoid placing essential words in corners. There is no single crop that every platform uses.
A single-page app works in a browser but not in a preview
Many preview fetchers do not behave like a fully interactive browser. Render the metadata in the initial server response or use a prerendering layer. Confirm this by downloading the HTML and checking whether the tags exist before JavaScript execution.
The image URL redirects or requires a token
Use a stable public URL with a long enough lifetime for sharing. Remove login requirements and avoid short-lived signed URLs unless you control the consumer’s fetch timing and cache behavior.
Capture and inspect the deployed preview
A screenshot can reveal whether the page itself displays the intended title, hero image, cookie banner, or other overlay before you share it. For a repeatable browser capture, you can use a screenshot API instead of maintaining Playwright or Chromium infrastructure.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its clean-shot workflow accepts cookie and consent banners before capture, then removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing result.
One GET request returns a PNG, JPEG, WebP, or PDF. The API supports full-page captures with lazy images loaded, CSS-selector element capture, device presets or custom viewports, dark mode, retina scale, PDF paper and page settings, custom CSS and JavaScript, pre-capture clicks, selector hiding, waits for selectors, delays or network idle, request and resource blocking, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks, up to 100 URLs per bulk call, usage reporting, and an OpenAPI specification. It also accepts parameter names used by other screenshot APIs.
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o og-preview.webpSee the ScreenshotNeo documentation for authentication and options. You can also use the supplied clients:
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("og-preview.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo includes an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account.
OG image implementation notes for common stacks
Static HTML
Paste the tags directly into the document head and deploy the image alongside your static assets. Check the generated production HTML rather than a template source file if your build process transforms paths.
Rank #4
Server-rendered frameworks
Set the metadata from the route’s page data and emit it during the first response. Make the image URL absolute in production; environment variables are useful for switching between preview and production hosts without producing a relative URL.
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 →Content management systems
Use one SEO or social-metadata system as the owner of these fields. If a theme and an SEO plugin both emit og:image, remove one declaration or configure a clear precedence rule.
Frequently asked questions
Does an OG image need to be hosted on the same domain?
No same-domain rule is established by the basic protocol. The image must be publicly retrievable at the declared URL, and a cross-origin host must allow the consuming service to fetch it.
Is og:image:alt a replacement for normal image alt text?
No. It describes the preview image in Open Graph metadata. Keep a separate alt attribute on any visible HTML image for that page.
Can one page declare several OG images?
The protocol supports image structured properties, but which image a particular consumer chooses and how it falls back are platform behaviors. If predictability matters, declare one primary image and test the deployed URL.
Free tools Windows power users keep installed
One-click scans. No signup required.
Will changing the file automatically refresh every shared link?
No. Consumers and caches can retain an earlier response. Changing the image URL is the most deterministic way to publish a new asset, but refresh timing remains service-specific.
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.
