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 & 11To create an Open Graph (OG) image with HTML and CSS, design a fixed-size card, render it in a browser such as Chromium, save the result as a PNG or JPEG, publish that file at a public HTTPS URL, and place the URL in your page’s og:image metadata. A 1200×630-pixel canvas (about 1.91:1) is a practical default, but it is guidance rather than a dimension mandated by the Open Graph Protocol. Social platforms can resize, crop, cache, or impose their own limits, so inspect the preview where your links are shared.
The complete workflow
- Design a reusable card. Create an HTML document or component with a fixed 1200×630 viewport. Define the background, typography, spacing, logo and imagery in CSS. Keep important text away from edges and large enough to remain legible when the platform displays a reduced preview.
- Render the card. Use Puppeteer with Chromium (or another browser renderer) to open the local document, wait for fonts and images, and capture a screenshot. HTML and CSS are not themselves an OG image; a renderer must convert them into a conventional image file.
- Publish the output. Store the PNG or JPEG at a stable, publicly fetchable HTTPS URL. A crawler must be able to request the image without authentication, a short-lived token or an internal network route.
- Add metadata. Put the page’s Open Graph properties in the initial HTML response, including the absolute image URL.
- Validate. Open the image directly, check its dimensions and layout, inspect the page source for the tags, and use a preview inspector for each destination. A platform may continue showing an older cached image after you replace the file.
The protocol defines four required properties for every page: og:title, og:type, og:image and og:url (Open Graph Protocol). Add other properties, such as image dimensions and alternative text, when they accurately describe the page.
Build a 1200×630 HTML/CSS card
The following self-contained document is a useful starting point. It uses a fixed viewport, but the same markup can be a component in a larger application.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Product launch</title>
<style>
@font-face {
font-family: "Inter";
src: url("./fonts/inter-bold.woff2") format("woff2");
font-weight: 700;
font-display: block;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 1200px; height: 630px; }
body {
background: #101827;
color: #fff;
font-family: Inter, Arial, sans-serif;
}
.card {
width: 1200px;
height: 630px;
padding: 72px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: radial-gradient(circle at 90% 10%, #3156b8, #101827 55%);
}
.eyebrow { color: #9fc4ff; font-size: 24px; letter-spacing: .08em; text-transform: uppercase; }
h1 { max-width: 980px; margin: 20px 0 0; font-size: 68px; line-height: 1.04; }
.url { font-size: 26px; color: #c9d5eb; }
</style>
</head>
<body>
<main class="card">
<div>
<div class="eyebrow">Freedom 251</div>
<h1>How to create Open Graph images with HTML and CSS</h1>
</div>
<div class="url">freedom251.com</div>
</main>
</body>
</html>Keep the template, styles, fonts and image assets together so a build or server can resolve them consistently. If you load a remote font or image, wait for it to finish before capturing; otherwise the screenshot can contain fallback text or an empty area. Design for the smallest likely presentation: long headlines, thin type and edge-to-edge logos are common failure points.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Render the card with Puppeteer
Install Puppeteer in a Node.js project (npm install puppeteer), save the template as og-card.html, and run a script such as this:
const puppeteer = require('puppeteer');
const path = require('path');
(async () => {
const browser = await puppeteer.launch({
// In some CI containers you may need --no-sandbox instead.
args: ['--font-render-hinting=none']
});
try {
const page = await browser.newPage();
await page.setViewport({ width: 1200, height: 630, deviceScaleFactor: 1 });
await page.goto(`file://${path.resolve('og-card.html')}`, {
waitUntil: 'networkidle0'
});
await page.evaluate(async () => {
if (document.fonts) await document.fonts.ready;
});
await page.screenshot({ path: 'og-card.png', type: 'png' });
} finally {
await browser.close();
}
})();networkidle0 helps with external assets, but it is not a guarantee that a custom widget or delayed script has finished. For deterministic cards, bundle assets locally, avoid animations, and add an explicit readiness marker (for example, wait for [data-og-ready]) before capturing. Use a JPEG when photographic content benefits from a smaller file; use PNG when text, flat color or transparency must remain crisp.
Generate page-specific images at runtime
For a different card per article, pass title, author or category data into the template and escape it before inserting it into HTML. A browser screenshot is the most direct choice when your design depends on ordinary CSS. A code-driven alternative is to render JSX with Satori, convert its SVG output to PNG with Resvg, and return the image from a server route. Vercel’s OG ImageResponse is another route for projects already using that ecosystem. Check the current API, supported CSS and runtime restrictions before deployment; these approaches do not have an established universal performance or cost winner.
| Approach | Best fit | Trade-offs |
|---|---|---|
| Puppeteer/Chromium | Existing HTML/CSS or designs requiring broad browser CSS support | Manage browser execution, fonts, assets and capture timing |
| Satori + SVG-to-PNG | Data-driven images in a code-oriented runtime | Verify the renderer’s current CSS support and deployment requirements |
| Vercel OG ImageResponse | Projects already using the Vercel/React ecosystem | Confirm current API and runtime constraints in the official documentation |
Choose by CSS fidelity, static versus per-request generation, runtime environment, font handling, output format and operational complexity—not by an unverified speed claim.
Recommended Free Tools
Add the Open Graph tags
Place these elements in the page’s <head>. Replace the example values with the canonical URL and the image you actually published.
<html prefix="og: https://ogp.me/ns#">
<head>
<meta property="og:title" content="How to create Open Graph images with HTML and CSS" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/guides/og-images" />
<meta property="og:image" content="https://example.com/images/og-images.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A guide to creating Open Graph images with HTML and CSS" />
</head>og:image is the URL of the generated image, not the HTML or CSS source. Use an absolute HTTPS URL. The declared type should match the page (for example, article for an article and website for a general site page). Multiple og:image properties are permitted when you intentionally provide alternatives.
Check the file, response and preview
- Open the image URL in a private browser window and confirm it does not require a login, cookie or expiring signature.
- Verify the actual file dimensions are 1200×630 (or the dimensions your design intentionally uses), and inspect at a small display size.
- Fetch the page’s initial HTML response, rather than relying on client-side JavaScript, and confirm the four core properties are present.
- Use the destination platform’s preview/debug tool. If the old image remains, change the image URL or follow that platform’s cache-refresh procedure; replacing a file does not guarantee immediate invalidation.
- Check contrast, line wrapping, missing fonts, clipped text, transparent backgrounds and unexpected scrollbars before publishing.
Common failures and fixes
The preview has no image
Usually the URL is relative, private, blocked by a firewall, or absent from the initial response. Publish a publicly fetchable HTTPS file, use the absolute URL in og:image, and inspect the raw HTML.
The screenshot is blank or half-rendered
Fonts, images or scripts may still be loading. Bundle assets where practical, wait for document.fonts.ready and a specific selector, and remove animations. A page that works interactively can still be nondeterministic at capture time.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteText is clipped or cropped
Keep the root and card at exactly 1200×630, avoid content that expands the layout, and test long titles. Flex and grid children may need min-width: 0; check the screenshot at its final display scale.
Chromium fails in CI
The runner may lack browser dependencies or sandbox permissions. Install the dependencies required by your Chromium build, use the sandbox appropriate for your CI provider, and log the browser error rather than silently producing an empty file.
The preview is stale
Social crawlers cache metadata and images. Confirm the new file directly, then use the relevant platform inspector or publish a versioned image URL when you need a distinct cache key.
Remote assets fail only in production
Check DNS, TLS, hotlink rules, authentication and response headers from the production environment. A local browser session may have cookies that a crawler does not.
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 →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
Performance, reliability and cost decisions
Static generation at build time avoids running a browser for every request and makes failures visible during deployment. Runtime generation is useful when titles or images change frequently, but it needs timeouts, error handling and a fallback image. Cache generated files by a content hash or stable page identifier, and do not let an unavailable font service block every image.
There is no established benchmark here comparing browser screenshots, Satori/Resvg and Vercel’s route. Measure your own workload if latency, memory or hosting cost is material. In all cases, validate output dimensions and fail the build when the renderer returns a zero-byte or unexpectedly small file.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request renders a URL as PNG, JPEG, WebP or PDF. It accepts cookie and consent banners like a visitor, then removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks, 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.
For a publicly reachable HTML/CSS card, call the API directly (see the ScreenshotNeo documentation):
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace the target URL with your card route. The same service supports full-page captures with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets or custom viewports, retina scale, PDF paper and page options, custom CSS and JavaScript, click and wait actions, ad/tracker/request blocking, headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, usage data and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify migration. An MCP server provides take_screenshot, get_page_info and capture_pdf tools to Claude, Cursor and other MCP clients.
Python
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}`);The Free plan includes 1,000 shots per month without a card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account to start.
Frequently Asked Questions
Does Open Graph require a 1200×630 image?
No. The protocol does not mandate that dimension; 1200×630 is a practical platform-oriented default. Check the destinations where your links will appear.
Can I put HTML directly in og:image?
No. The tag must point to a conventional image file that a crawler can fetch. Render the HTML/CSS first.
Free tools Windows power users keep installed
One-click scans. No signup required.
Why does a corrected image still appear unchanged?
Social crawlers cache metadata and image responses. Confirm the new URL directly and use the destination’s preview or cache-refresh tool.
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.
