1
Independent publishing
Give essays, blogs, and newsletters a recognizable website card.
Website card images for Bluesky
Generate Bluesky link preview images for every page
Use one HCTI og:image pattern across your site. Each page supplies its own metadata, and HCTI keeps the matching Bluesky image current without a separate image-generation request.
- 1200 × 627 images for posts
- Updates when preview inputs change
- No extra code per page
HCTI @example.com · 2h
A small addition to your page head can keep every link card fresh.
htmlcsstoimage.com
One Open Graph image URL for every page
HCTI reads the page’s meta tags and returns the matching cached image.
12 replies · 38 reposts · 219 likes
A card for the open web
Give every website card enough context to stand on its own
Bluesky website cards put the linked page directly beneath a short post. Use the image to establish the topic quickly without repeating the post text.
2
Project updates
Make changelogs and release posts easier to spot in a timeline.
3
Open-source links
Show the project, feature, or release instead of a generic repository image.
Metadata recipe
Set up the Bluesky image
Point og:image at the HCTI URL for the current path, then use hcti:selector on that page to choose the element HCTI captures.
<meta property="og:image" content="https://hcti.io/v1/og/{YOUR_DOMAIN_ID}/product-launch">
<meta property="hcti:selector" content="#social-card">
What if the Bluesky preview does not update?
Check the page first
- Confirm the metadata is in the page’s
<head>before a crawler loads it. - Open the HCTI image URL directly and make sure it returns the expected image.
- Remember that Bluesky may keep its own cached preview after the image changes.
Allow the Bluesky crawler
If your firewall filters bots, allow requests whose user agent contains Bluesky Cardyb.
Mozilla/5.0 (compatible; Bluesky Cardyb/1.1; +mailto:support@bsky.app)
Read Bluesky’s preview documentation
Preview your page on Bluesky
See the image and text Bluesky can use when someone shares your page.
How it works
From page path to finished link preview
The public URL stays simple while HCTI reads the page, creates the image, and reuses it until the inputs change.
-
Add one og:image pattern
Use your HCTI domain ID and append the current page path. No API key or per-page image URL needs to be published.
-
HCTI reads the page head
On refresh, HCTI fetches the requested page and reads its hcti: screenshot options or html:tv: template values.
-
Serve the matching image
HCTI creates the image when the resolved screenshot or template inputs change, then caches and serves it to link-preview crawlers.
Fresh when it matters
Update previews without rendering on every share
HCTI checks page metadata separately from generating the image. Unchanged screenshot or template inputs reuse the existing render; changed inputs create the next image.
Controlled refreshes
Choose how often HCTI may check each page for updated meta tags. Origin cache headers and ETags can avoid unnecessary work.
Content-based reuse
HCTI hashes the resolved screenshot or template inputs so unchanged pages return the image that already exists.
Preview-aware sizing
Use one image everywhere, fit one render into recognized preview sizes, or render with a platform-specific viewport.
Link preview platforms
See how your image can appear when a link is shared
The same Open Graph image URL can serve many crawlers. Explore focused guidance and recommended preview dimensions for common platforms.
Facebook
1200 × 630 preview for posts
WhatsApp
1200 × 630 preview for messages
Slack
1200 × 630 preview for messages
LinkedIn
1200 × 627 preview for posts
Pinterest
1000 × 1500 preview for pins
Bluesky
1200 × 627 preview for posts
Twitter
1200 × 600 preview for tweets
Messenger
1200 × 628 preview for messages
Instagram
1080 × 1080 preview for posts
TikTok
1200 × 630 preview for videos
Apple Messages
1200 × 628 preview for messages
Snapchat
1200 × 630 preview for snaps
Telegram
1200 × 630 preview for messages
Reddit
1200 × 630 preview for posts
Threads
1200 × 630 preview for posts
Google Chat
1200 × 630 preview for messages
Discord
1200 × 630 preview for messages
Ready for better link previews?
Give every page an image worth sharing
Add one stable OG image URL pattern, keep the supported meta tags on each page, and let HCTI handle rendering and reuse.
Related features
More ways to use HTML/CSS to Image
Learn about related options for image and PDF generation, storage, security, and team access.