What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To generate an Open Graph image, create or render a share graphic, publish it at a stable, publicly reachable URL, and declare that URL in the page’s <head> with og:image. Add descriptive og:image:alt text and, when useful, the image’s secure URL, media type, width, and height. The image is ordinary PNG, JPEG, or another supported web asset; Open Graph is metadata, not a special image-file format.
The Open Graph Protocol describes how a web page becomes a rich object in a social graph. Its image metadata tells a compatible consumer which visual represents the page. A reliable implementation therefore has three parts: an appropriate asset, a stable URL that can be fetched without a login, and correctly ordered metadata.
What an Open Graph image is
An Open Graph image is the image URL a page publishes in its Open Graph metadata. Social networks, chat clients, and other compatible consumers can use that URL when they build a link preview. The protocol documentation states: “The Open Graph protocol enables any web page to become a rich object in a social graph.”
There is no separate “OG image” file type. Your source can be a normal image produced by a design tool, an image-generation pipeline, a template renderer, or a screenshot service. What makes it an Open Graph image is the og:image declaration that associates the asset with the page.
Recommended Free Tools
Plan the image before you generate it
Choose the message and crop
Decide what a person should understand from a small preview: the page title, product name, article subject, or a clear visual identity. Keep important text away from the edges because different consumers may crop or resize the asset. If the image contains text, render it into the image itself; HTML text elsewhere on the page is not part of the preview graphic.
Choose an ordinary web format
PNG, JPEG, and WebP are common choices, but the consuming platform determines what will actually be accepted and displayed. The Open Graph protocol does not prescribe one universal current image dimension or file-size maximum. Check the current requirements for every platform you target instead of treating one dimension as an official cross-platform rule.
Publish a stable, public URL
Upload the finished file to a URL that remains valid for as long as the page is shared. Use HTTPS when possible, keep the path predictable, and make sure an unauthenticated request can retrieve the bytes. A local file path, a URL that requires a browser session, or an expiring private link cannot serve as a dependable metadata value.
Declare the core Open Graph properties
The protocol’s core properties are og:title, og:type, og:image, and og:url. Place them in the document head. The value of og:image is the absolute URL of the image representing the page.
| Property | What to provide | Practical guidance |
|---|---|---|
og:title |
The page’s title | Use the title you want shown in a rich preview. |
og:type |
The object type, such as website |
Choose the type that describes the page. |
og:url |
The canonical page URL | Use the URL that should represent the object. |
og:image |
An absolute image URL | Point to the generated or selected share asset. |
og:image:alt |
Descriptive alternative text | Describe what is visible in the image; do not write a marketing caption. |
og:image:secure_url |
An HTTPS image URL | Provide it when you have a secure equivalent of the image URL. |
og:image:type |
The image media type | For example, the MIME type matching the file you serve. |
og:image:width and og:image:height |
Pixel dimensions | State the actual dimensions of the asset, not the dimensions you intended to render. |
The protocol recommends og:image:alt whenever an image is specified. Alt text should identify meaningful visual content, such as “Blue dashboard showing weekly sign-up growth,” rather than repeat the page title or tell someone to click.
Use this complete head example
The following is a minimal, valid implementation. Replace the example URLs and text with values for your page and asset.
<html prefix='og: https://ogp.me/ns#'>
<head>
<title>Example page</title>
<meta property='og:title' content='Example page' />
<meta property='og:type' content='website' />
<meta property='og:url' content='https://example.com/page' />
<meta property='og:image' content='https://example.com/share-image.jpg' />
<meta property='og:image:alt' content='A description of the image' />
</head>
</html>If you know the exact media type, dimensions, and secure URL, add the structured properties immediately after the root image declaration:
<meta property='og:image' content='https://example.com/share-image.jpg' />
<meta property='og:image:secure_url' content='https://example.com/share-image.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 blue dashboard showing weekly sign-up growth' />The numbers in that example are illustrative, not a protocol-wide recommendation. Use the real pixel dimensions of your file and verify the current limits of each target platform.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC 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 & 11Generate images dynamically for many pages
Use a deterministic template
For a blog, catalog, or documentation site, create one template with slots for the page title, author or product label, and a background. Render one image per canonical URL during a build, on first request, or in a background job. Keep the output path derived from a stable identifier, such as a slug, so the same page does not create a new URL on every visit.
Keep metadata and assets in sync
Generate the image URL and the HTML metadata from the same page record. If a title changes, either regenerate the image and keep its URL stable or update both the asset URL and the og:image tag together. A tag that points to a deleted file produces a broken preview even when the rest of the page is correct.
Render fonts and text consistently
Server-side renderers need access to the fonts, images, and styles used by the template. Pin those dependencies and test long titles, missing thumbnails, non-Latin text, and unusually wide characters. Define a fallback for every optional field so a failed data lookup does not produce an empty or malformed graphic.
Serve the result like a normal image
Return the correct Content-Type, allow the request without an application login, and avoid expiring URLs. If you replace an image at the same path, account for consumers that may retain an earlier fetch; use the target service’s documented preview-refresh mechanism when available.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Declare one image or several
A page may repeat og:image to provide multiple candidates. This is useful when you intentionally offer alternate imagery, but it increases the chance of an ordering mistake.
- Put the preferred image first.
- Place that image’s structured properties directly after its root
og:imagetag. - Begin the next image with another
og:imagetag, followed by that image’s own structured properties.
When values conflict, the first image tag from top to bottom receives preference. Do not place width, height, or alt values for one image after you have started declaring another image, because consumers can associate those values with the wrong asset.
<meta property='og:image' content='https://example.com/primary.jpg' />
<meta property='og:image:alt' content='Primary product image on a white background' />
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='630' />
<meta property='og:image' content='https://example.com/alternate.jpg' />
<meta property='og:image:alt' content='Alternate product image in dark mode' />
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='630' />If you do not need alternate imagery, declaring one complete image is operationally simpler.
Generate an image from a rendered page
When your design already exists as HTML and CSS, a browser screenshot can turn that composition into a share asset. Build a dedicated route with the exact background, typography, and dimensions you need. Hide navigation and interactive controls, wait for fonts and remote images to load, capture the route, then store the resulting PNG, JPEG, or WebP at a stable public URL. The final Open Graph metadata still points to the stored image; a screenshot tool does not replace the metadata tags.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns a PNG, JPEG, WebP, or PDF, so you can render an existing page or a dedicated share-image route and save the returned bytes as your asset. Its clean-shot steps accept cookie and consent banners before capture and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing result in X-Page-Verdict and X-Billed headers.
Use the documented parameters and examples at https://screenshotneo.com/docs/. The basic cURL call is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/share-card -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/share-card"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/share-card' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));For an Open Graph pipeline, use a dedicated route and the options that match your page: full-page capture with lazy images loaded, a CSS-selector element capture, dark mode, 12 device presets or a custom viewport, retina scale, custom CSS and JavaScript, a click before capture, hidden selectors, waits for a selector, delay, or network idle, and blocking for ads, trackers, requests, or resource types. You can also supply headers, cookies, a user agent, Authorization, timezone, geolocation, a transparent background, image resizing, and a cache TTL.
For production workflows, ScreenshotNeo also supports signed links for public <img> tags, asynchronous jobs with signed webhooks, up to 100 URLs per bulk call, a usage API, an OpenAPI specification, and parameter names used by other screenshot APIs. Every feature is on every plan. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots, with Growth at $15 for 15,000, Pro at $39 for 60,000, Scale at $99 for 250,000, and Business at $249 for 1,000,000. Yearly billing gives two months free. Failed loads, blank pages, bot checks, timeouts, and cache hits do not consume billed shots.
Create a free ScreenshotNeo account to get 1,000 screenshots a month without adding a card.
Best Value
Validate the finished implementation
- View the raw page source or server-rendered HTML and confirm the tags are inside
<head>. - Check that
og:urlis the intended canonical page and thatog:imageis an absolute URL. - Open the image URL in a private browser window. Confirm it returns the intended file without a login or expiring token.
- Compare
og:image:type, width, and height with the actual file. - Read
og:image:altaloud. It should describe visible content, not repeat a slogan. - If you declare multiple images, verify that the preferred one is first and that each structured property follows its own root tag.
- Use each target platform’s current preview debugger or documentation to check platform-specific requirements. The Open Graph protocol itself does not establish a universal size or file-size limit.
Troubleshoot common failures
The preview has no image
Inspect the raw HTML for a missing or misspelled og:image. Then request the image URL directly. A relative URL, a private response, a redirect chain that fails, or an error response can prevent retrieval. Correct the URL and serve the asset publicly over HTTPS.
The wrong image appears
Look for duplicate og:image tags, including tags injected by a theme or plugin. The first image has preference, so remove unintended declarations or move the preferred image to the top. Check that structured properties are grouped with the correct root tag.
The image is stretched or cropped unexpectedly
Compare the actual file dimensions with the dimensions declared in metadata and with the target platform’s current guidance. Regenerate the asset at the intended ratio, update the declared width and height, and test the composition with text near every edge.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsAlt text is missing or unhelpful
Add og:image:alt and describe the visual content. Do not use it as a second headline, a call to action, or a list of keywords.
The page works in a browser but the capture is blank
For a screenshot-generated asset, wait for the required selector, a deliberate delay, or network idle. Confirm that remote fonts and images are reachable without interactive authentication, and hide cookie banners, chat controls, and overlays before capture. With ScreenshotNeo, the response headers identify whether the page was a clean shot, a failed load, a bot check, a blank page, or a cache hit.
Performance, reliability, and maintenance
Pre-rendering images during a build avoids first-request work and makes failures visible before deployment. On-demand generation reduces storage for rarely visited pages but needs a queue, timeout handling, and a fallback image. Whichever model you choose, keep the metadata URL stable, monitor missing assets, and retain the source data needed to regenerate a graphic after a template change.
Use a cache policy that matches how often your page titles and images change. If you use a screenshot API cache, choose a TTL deliberately: a long TTL lowers repeated rendering, while a short TTL reflects design changes sooner. Bulk capture is useful for catalog or migration jobs; asynchronous jobs and signed webhooks prevent a long batch from blocking a page request.
Free tools Windows power users keep installed
One-click scans. No signup required.
Open Graph image generation checklist
- Create an ordinary image asset with a composition that survives the target platforms’ crops.
- Host it at a stable, public absolute URL.
- Add
og:title,og:type,og:url, andog:imagein the document head. - Add descriptive
og:image:alt; include secure URL, media type, width, and height when known. - For multiple images, put the preferred one first and keep each image’s structured properties together.
- Verify the actual file, metadata, and platform-specific requirements before release.
- Regenerate or replace assets in a controlled way when titles, templates, or branding change.
Frequently Asked Questions
Should image generation run at build time or on demand?
Build-time rendering is easier to monitor and gives every published page an asset immediately. On-demand rendering can save storage for infrequently visited pages, but it needs queueing, timeout handling, and a fallback image. Choose based on how often your pages are created or changed.
What evidence should I keep when diagnosing a broken preview?
Save the raw HTML head, the image URL’s HTTP response and content type, the generated file’s dimensions, and the target platform’s preview result. Comparing those four artifacts usually isolates a metadata, hosting, or rendering problem.
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.
