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 →Use a page-specific og:image URL and metadata to give Google Chat links a branded preview image. HTML/CSS to Image (HCTI) describes a hosted workflow that reads your page head, captures a selected element, and serves a generated image to preview crawlers. HCTI recommends a 1200 × 630 landscape image with important text and logos inside a central safe area. That size is HCTI’s guidance, not a Google specification.
What a Google Chat Open Graph image generator does
An Open Graph image generator creates the image shown beside a shared URL. Instead of exporting a separate PNG for every article or product page, your HTML points og:image to a rendering endpoint. The endpoint creates an image from the page’s content and returns it when a crawler requests the URL.
HCTI’s named Google Chat feature uses two pieces of metadata:
og:imagecontains a URL containing your HCTI domain ID and the page path.hcti:selectoridentifies the element to capture, such as#social-card.
HCTI says it fetches the page, reads the metadata and screenshot/template inputs, generates the image, and caches it. Unchanged inputs reuse the existing render; changed inputs produce a new image.
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 errors#1 Best Overall
What this does not mean
Google’s developer documentation also describes app-driven link previews. In that model, a Google Chat app registers URL patterns, receives an event when a matching link is shared, and attaches an interactive card. An app can configure up to five URL patterns, and the documented app behavior previews only the first eligible HTTPS link in a message.
That app-and-card mechanism is different from HCTI’s metadata-based image workflow. The URL-pattern limit belongs to Chat apps, not to HCTI’s hosted image endpoint. HCTI’s page does not claim Google endorses its service.
Design the preview image before writing code
Canvas and safe area
For Google Chat images, HCTI recommends 1200 × 630 pixels in landscape orientation. Keep the headline, subject and logo toward the center rather than at the extreme edges; preview surfaces can crop or scale an image. Treat 1200 × 630 as an implementation recommendation from HCTI, not a guaranteed rendering contract.
Use a deterministic card
Give every URL a stable visual hierarchy: a short title, optional category or author, one subject image, and your logo or site name. Avoid content that changes on every request, such as a live clock or random identifier. Deterministic markup makes caching useful and prevents a preview from changing unexpectedly.
Make text readable at small sizes
- Use a strong contrast between text and background.
- Limit the headline to the few words that identify the page.
- Reserve generous padding around the safe area.
- Provide a solid background behind text if the subject image is busy.
Build the page and metadata
The following example creates a card that a hosted renderer can capture. Replace the sample content with values generated by your application.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product launch</title>
<meta property="og:title" content="Product launch">
<meta property="og:description" content="See what's new in our product.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/product-launch">
<meta property="og:image" content="https://hcti.io/v1/og/{YOUR_DOMAIN_ID}/product-launch">
<meta property="hcti:selector" content="#social-card">
<style>
* { box-sizing: border-box; }
body { margin: 0; background: #eef1f6; font-family: Arial, sans-serif; }
#social-card {
width: 1200px; height: 630px; padding: 72px;
display: flex; flex-direction: column; justify-content: space-between;
color: #fff; background: linear-gradient(135deg,#14213d,#3564a8);
}
h1 { max-width: 900px; margin: 0; font-size: 68px; line-height: 1.05; }
.kicker { font-size: 28px; letter-spacing: .08em; text-transform: uppercase; }
.brand { font-size: 30px; font-weight: 700; }
</style>
</head>
<body>
<main id="social-card">
<div class="kicker">Product update</div>
<h1>A clearer way to manage your projects</h1>
<div class="brand">Example.com</div>
</main>
</body>
</html>The braces in the HCTI URL are placeholders. Substitute your actual HCTI domain ID and a path that identifies this page. Keep the page path stable when you want the same image to be reused.
Set up a page-specific generator workflow
- Render the card in your page. Put all required text and imagery inside the element named by
hcti:selector. - Emit metadata in the initial head. Server-render
og:imageandhcti:selectorbefore a crawler requests the page. Client-side insertion after load can be too late. - Use one endpoint per page path. Construct the HCTI image URL from your domain ID and canonical page path.
- Open the image URL directly. Confirm it returns the expected image before testing in Chat.
- Share the canonical HTTPS URL. Ensure the URL in the message is the same URL whose metadata you inspected, including path and important query behavior.
Dynamic pages and cache keys
Generate the title, category and image URL on the server from the page’s canonical data. If you change the card but keep an identical set of inputs, HCTI says its cache can reuse the previous render. A changed input produces a new image. Avoid assuming that changing the HTML alone will immediately replace an image already cached by Google Chat.
When an interactive Chat app is the better choice
Choose Google’s app-driven preview mechanism when the preview must contain buttons, actions, or data fetched by a Chat app at share time. Register URL patterns in the app, handle the matching-link event, and return the card your app supports. The documented constraints—up to five URL patterns and only the first eligible HTTPS link being previewed—apply to that app architecture.
Choose metadata plus a generated image when a static visual is sufficient and you do not need an installed Chat app. The approaches can serve different purposes; neither is a drop-in replacement for the other.
Test and troubleshoot missing or stale images
The preview is blank or uses an old image
- View the raw HTML and verify
og:imageandhcti:selectorare in<head>before the crawler loads the page. - Open the HCTI image URL in a browser or with an image client. If it does not return the intended image, fix the page, selector, or rendering inputs first.
- Confirm that the shared link is the same canonical URL whose metadata you tested.
- Expect Google Chat to retain its own cached preview after the source image changes. HCTI gives no guaranteed cache-purge time, so allow for that cache rather than repeatedly changing markup.
The renderer cannot fetch the page
Check that the page and its assets are reachable without an interactive login, that CSS and images use valid HTTPS URLs, and that your firewall permits the renderer. HCTI specifically advises allowing requests whose user agent contains Google-Chat/ when a firewall blocks preview bots.
The card is cropped
Keep key content in the central safe area, reduce headline length, and test at a narrow preview size. Do not put a logo or the final word of a headline against an edge simply because the source canvas is 1200 × 630.
Metadata appears correct but no image is shown
Check for malformed HTML, duplicate Open Graph tags, redirects to a different canonical URL, robots or firewall rules, and an image response with the wrong content type. Test the final URL from outside your development network.
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 & 11Performance, reliability and maintenance
- Cache intentionally: stable page paths and stable card inputs let the hosted renderer reuse unchanged results.
- Keep the card lightweight: fewer external fonts and images reduce rendering dependencies and failure points.
- Version visual changes: when a redesign must appear immediately, change a meaningful input or image path rather than relying on an undocumented cache purge.
- Monitor the source page: a broken image URL, blocked stylesheet or selector rename can affect every preview generated from that template.
- Separate preview and app logic: an Open Graph image is not an interactive Chat card and cannot provide app actions.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP or PDF, and it can capture a selected element, wait for a selector or network idle, apply custom CSS and JavaScript, set device and retina options, and hide unwanted selectors. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled.
Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. The service also provides an MCP server with take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
Use the API call below for a quick image of a page (adapt the URL to your page):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for authentication and options. Equivalent clients are:
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)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 with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account to try it.
Best Value
FAQ
Is 1200 × 630 an official Google Chat requirement?
No. It is the dimension HCTI recommends for its Google Chat image workflow. The available material does not establish it as a Google specification.
Can an Open Graph image add buttons to a Chat message?
No. Buttons and other interactive actions belong to a Google Chat app card, not to a static image returned through og:image.
How quickly does Google Chat refresh a changed image?
No guaranteed refresh interval is provided. Chat may retain its own cached preview even after the image endpoint returns a new render.
Frequently Asked Questions
Can I use one generated image for every page?
You can, but page-specific URLs and metadata produce previews that accurately represent each shared page and make cache behavior easier to reason about.
Does the HCTI selector have to be an ID?
The documented pattern uses a CSS selector such as #social-card; use a selector that uniquely identifies the card you want the renderer to capture.
Do Google Chat app URL limits restrict metadata images?
No. The up-to-five-pattern and first-eligible-link rules apply to Google’s documented app-driven preview mechanism, not to a hosted og:image workflow.
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.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →
