The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To generate the image Apple Messages shows for a shared URL, publish a 1200 × 628 pixel landscape image and reference it from the page’s <head> with og:image. A practical automated setup uses HTML/CSS to Image (HCTI): keep one stable image URL pattern, add the page path, and tell HCTI which element to render with hcti:selector. Messages places the image above the page title and domain, so the artwork must communicate the link on its own.
What an Apple Messages Open Graph image is
When someone pastes a URL into Apple Messages, Messages can build a rich link card from the page’s Open Graph metadata. The image is the value of og:image; the title and domain appear below it. The image is not an attachment generated inside Messages. Your website must expose metadata and an image URL that a crawler can fetch.
The documented workflow covered here uses HCTI’s hosted HTML/CSS-to-image rendering. You design an element such as #social-card in your page, identify that element with hcti:selector, and publish an HCTI URL in og:image. HCTI reads the page head, resolves the screenshot or template inputs, creates a render when those inputs change, and reuses the existing render when they do not.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Recommended size and safe-area design
Use a 1200 × 628 landscape canvas
The practical target documented for this workflow is 1200 × 628 pixels. It is a 1.91:1 landscape frame that leaves room for Messages to scale the card while retaining the subject.
#1 Best Overall
- This phone is unlocked and compatible with any carrier of choice on GSM and CDMA networks (e.g. AT&T, T-Mobile, Sprint, Verizon, US Cellular, Cricket, Metro, Tracfone, Mint Mobile, etc.).
- Please check with your carrier to verify compatibility.
- The device does not come with headphones or a SIM card. It does include a generic (Mfi certified) charging cable.
- Tested for battery health and guaranteed to have a minimum battery capacity of 80%.
Keep essential content central
- Place the subject, headline and logo in the central safe area.
- Keep decorative edges and backgrounds outside the area that must remain readable.
- Use clear, recognizable imagery for articles, reservations, events and product links.
- Design the image to stand alone; do not depend on a long description below it.
Apple Messages gives the visual most of the card and places the title and domain beneath it. A beautiful image that omits the subject or uses tiny edge text can therefore produce a confusing preview.
Build a reusable HCTI implementation
1. Create the renderable card
Add a fixed-ratio element to the page template. The example below uses a selector named social-card; your production template can populate the headline, logo and subject from page data.
<div id="social-card" class="og-card">
<img src="/images/product-launch.jpg" alt="">
<div class="og-card__content">
<div class="og-card__brand">Example site</div>
<h1>Product launch</h1>
</div>
</div>
<style>
.og-card { width: 1200px; height: 628px; position: relative; overflow: hidden;
background: #111; color: #fff; font-family: Arial, sans-serif; }
.og-card > img { width: 100%; height: 100%; object-fit: cover; }
.og-card__content { position: absolute; inset: 0; padding: 72px;
display: flex; flex-direction: column; justify-content: flex-end;
background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.og-card__brand { font-size: 28px; }
.og-card h1 { font-size: 64px; line-height: 1.05; margin: 12px 0 0; }
</style>Use an image that is available to the renderer and avoid relying on interactions that only occur after a human click. Keep the selected element’s dimensions explicit so every page in the template produces the same aspect ratio.
2. Add the Open Graph tags in the document head
<meta property="og:title" content="Product launch">
<meta property="og:description" content="See what is new.">
<meta property="og:image" content="https://hcti.io/v1/og/{YOUR_DOMAIN_ID}/product-launch">
<meta property="hcti:selector" content="#social-card">Replace {YOUR_DOMAIN_ID} with the domain identifier supplied by HCTI and replace product-launch with the page path or other stable identifier used by your template. Keep the hcti:selector value synchronized with the element’s actual ID. Put these tags in the server-rendered <head>, not only in client-side code that runs after the initial response.
Rank #2
- 6.9" LTPO Super Retina XDR OLED, 120Hz, HDR10, Dolby Vision, 1320x2868px at 460ppi, 1000 nits (typ), 2000 nits (HBM), 4685mAh Battery
- 1TB, 8GB RAM, Apple A18 Pro (3nm), Hexa-core (2x4.05 GHz + 4x2.42 GHz), Apple GPU 6-core, iOS 18, upgradable to iOS 18.3
- Rear camera: 48MP, f/1.8 (wide) + 12MP, f/2.8 (periscope telephoto) 5x optical zoom + 48MP, f/2.2 (ultrawide), TOF 3D LiDAR scanner (depth), Front Camera: 12MP, f/1.9 (wide)
- 2G: 850/900/1800/1900, 3G: HSDPA 850/900/1700(AWS)/1900/2100, 4G LTE: 1/2/3/4/5/7/8/12/13/14/17/18/19/20/25/26/28/29/30/32/34/38/39/40/41/42/48/53/66/71, 1/2/3/5/7/8/12/14/20/25/26/28/29/30/38/40/41/48/53/66/70/71/75/76/77/78/79/258/260/261 SA/NSA/Sub6/mmWave - Dual eSIM
- Unlocked for freedom to choose your carrier. Compatible with both GSM & CDMA networks. The phone is unlocked to work with all GSM Carriers & CDMA Carriers Including AT&T, T-Mobile, Verizon, Sprint., Etc.
3. Use one pattern for every page
A reusable URL pattern avoids creating a manually exported file for every article. Each page supplies its own path and metadata while HCTI renders the selected element. When the resolved inputs change, HCTI generates a new image; when they are unchanged, it reuses the existing render.
4. Validate before sharing
- Open the HCTI
og:imageURL directly and confirm that it returns the expected render. - Use HCTI’s preview checker with the public page URL. Confirm the image and the text that Apple Messages can use.
- Inspect the delivered HTML source and verify that the tags are inside
<head>before a crawler loads the page. - Send the URL in a test Messages conversation and compare the card with the direct HCTI render.
Why a preview stays stale or is missing
Metadata was not present early enough
If tags are inserted only after JavaScript runs, a crawler may receive a head without og:image. Render the tags in the initial document response, then verify with “view source” rather than relying only on the browser’s live DOM.
The image URL or selector is wrong
A typo in the HCTI domain ID, path, or hcti:selector can yield a missing or unexpected image. Open the image URL directly and check that the selected element exists in the fetched page.
Messages retained an older card
Apple Messages can retain its own cached preview after an image changes. HCTI advises checking the source tags and image URL first, then allowing for the client’s cache to expire or testing with a URL variation when you need to distinguish a new render from an old card. HCTI supports controlled refresh intervals and content-based reuse; these are vendor capabilities, not an Apple cache guarantee.
Rank #3
- 6.1inch Super Retina XDR display. Aluminum with color-infused glass back. Ring/Silent switch
- Dynamic Island. A magical way to interact with iPhone. A16 Bionic chip with 5-core GPU
- Advanced dual-camera system. 48MP Main | Ultra Wide. Super-high-resolution photos (24MP and 48MP). Next-generation portraits with Focus and Depth Control. 4X optical zoom range
- Emergency SOS via satellite. Crash Detection. Roadside Assistance via satellite
- Up to 26 hours video playback. USB C, Supports USB 2. Face ID
A firewall filtered the crawler
If a firewall blocks bot traffic, HCTI advises allowing a user agent containing Facebot Twitterbot/1.0. Apply the narrowest rule possible and continue to protect administrative paths.
The page changed, but the render did not
Confirm that the changed headline, image, style or selector is part of the inputs HCTI resolves. If the resolved inputs are identical, HCTI is expected to reuse the previous render. If they differ, inspect the direct image URL and preview checker again.
Metadata and rendering checklist
- Canvas: 1200 × 628 landscape.
- Head:
og:image, title and description are present in the initial HTML. - Selector:
hcti:selectorexactly matches the element to capture. - Accessibility: the card itself is decorative in the page, so its image can use an empty
altvalue while the page’s normal content supplies accessible text. - Visibility: the selected element has explicit dimensions and its assets can be fetched by the renderer.
- Testing: direct HCTI URL, HCTI preview checker and an actual Messages share all agree.
- Cache awareness: distinguish a new HCTI render from an older Messages card before changing code.
Automate image generation without exporting one file per page
The stable HCTI URL pattern is suited to CMS or application templates. Store the page’s path, title, subject image and brand values as data; render those values into the selected card; and emit the same metadata structure on every page. This keeps image generation tied to content changes instead of a manual design-export workflow.
Free tools Windows power users keep installed
One-click scans. No signup required.
For larger sites, compare services on metadata/API setup, selector or template flexibility, cache invalidation and refresh controls, preview validation, supported sharing surfaces and access controls. Current pricing or referral terms for HCTI and OpenGraph+ are not established here. Product Hunt describes OpenGraph+ as automatically generating up-to-date Open Graph images for every page, including links shared in Apple Messages, Slack and Microsoft Teams; that description is attributed to maker Brad Gessler.
Rank #4
- This pre-owned product is not Apple certified, but has been professionally inspected, tested and cleaned by Amazon-qualified suppliers.
- There will be no visible cosmetic imperfections when held at an arm’s length.
- This product is eligible for a replacement or refund within 90 days of receipt if you are not satisfied.
- Product may come in generic Box.
Or skip the browser setup
ScreenshotNeo is the first service to try when you want a screenshot API rather than a browser-rendering setup: it produces clean shots, bills only clean shots, and its lowest paid plan is $5. One GET request returns a PNG, JPEG, WebP or PDF, and the API can capture a full page or a CSS-selected element such as your social card.
Before capture, ScreenshotNeo can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. 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. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
The following request captures a page containing your rendered card. Replace only the target URL and your key. See the ScreenshotNeo documentation for the available options.
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 →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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}`);You can add full-page capture with lazy images loaded, a CSS selector, dark mode, device or viewport settings, retina scale, custom CSS or JavaScript, click actions, waits, blocked requests, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, a chosen cache TTL, signed links, asynchronous jobs with signed webhooks, bulk capture of 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.
The Free plan includes 1,000 shots per month with no card. Paid plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000 and Business $249 for 1,000,000; yearly billing gives two months free, and every feature is included on every plan. Create a free ScreenshotNeo account to start.
Best Value
- 6.7inch Super Retina XDR display. ProMotion technology. Always-On display. Titanium with textured matte glass back. Action button
- Dynamic Island. A magical way to interact with iPhone. A17 Pro chip with 6-core GPU
- Pro camera system. 48MP Main | Ultra Wide| Telephoto. Super-high-resolution photos (24MP and 48MP). Next-generation portraits with Focus and Depth Control. Up to 10x optical zoom range
- Emergency SOS via satellite. Crash Detection. Roadside Assistance via satellite
- Up to 29 hours video playback. USB-C, Supports USB 3 for up to 20x faster transfers. Face ID
Performance, reliability and cost decisions
Reuse unchanged renders
HCTI’s content-based reuse avoids regenerating an image when the resolved inputs have not changed. This is useful for pages that are shared repeatedly without content edits.
Choose controlled refresh carefully
Refresh controls help when external assets or time-sensitive content must be revisited, but unnecessary refreshes can create work without changing the card. Keep a predictable policy for content updates and test it through the direct image URL.
Separate render failures from client caching
A failed direct HCTI URL indicates a metadata, selector, asset or access problem. A correct direct URL paired with an old Messages card points to client-side caching rather than a rendering failure. Treat those as separate incidents when troubleshooting.
Troubleshooting by symptom
| Symptom | Likely cause | Fix |
|---|---|---|
| No image in the card | og:image missing from initial head or inaccessible URL |
Inspect server HTML, open the image URL directly and correct access or metadata. |
| Wrong element appears | Selector does not match the intended card | Set hcti:selector to the exact ID or selector and verify the element in the fetched page. |
| Old image after an edit | HCTI reused unchanged inputs or Messages cached the card | Check changed inputs and direct render first; then allow for Messages caching. |
| Blank or partial render | Assets unavailable to the renderer or card dimensions not explicit | Use fetchable assets, fixed 1200 × 628 dimensions and a direct URL test. |
| Works in a browser but not for the crawler | Firewall or bot filtering | Allow the user agent containing Facebot Twitterbot/1.0 as HCTI advises. |
Frequently asked questions
Does Messages require a separate image for every URL?
No. A reusable HCTI URL pattern can render the selected template for each page path and its metadata inputs.
Should I put the title inside the image?
Yes, when the image must communicate the link by itself. Messages places the page title and domain below the visual, so a concise in-image headline can preserve context.
Is 1200 × 628 an Apple guarantee?
No. It is the practical target documented for this HCTI workflow, not an Apple-published guarantee.
Why does changing CSS sometimes appear to do nothing?
First confirm that the changed CSS is part of the inputs HCTI resolves and inspect the direct image URL. If the render is correct there, Messages may still be displaying its cached card.
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.
