Recommended Free Tools
A Bluesky website card image is the thumbnail in a link preview; it is not the whole card. To make a link preview for a page on your site, create and host an image, then add suitable Open Graph metadata to that page. When a Bluesky client creates a post, it can read the page’s title, description and image, fetch the image, and embed the resulting card information in the post.
What a Bluesky website card image generator does
“How does Bluesky grab website card information, such as image and description?” The short answer: the webpage supplies metadata, and the client creating the post uses it to build a preview. There is no single image-generator button that automatically configures every page on your website.
Bluesky describes a website card as an external embed containing a URL, title, description and thumbnail blob. A design tool can help you create the thumbnail artwork, but it does not necessarily add metadata to your site. You need both parts: an image and page metadata that points to it. Bluesky’s website card documentation explains the embed and client workflow.
How Bluesky gets the image and description
- Your page publishes metadata. Its HTML head contains Open Graph properties such as
og:title,og:descriptionandog:image, withog:urlidentifying the page. - A client reads the page. When someone shares the URL, the Bluesky client constructing the post can fetch the page and parse its metadata. Bluesky’s documentation says, “On Bluesky, each client fetches and embeds this card metadata, including blob upload if needed.”
- The client fetches the image and uploads it. The official example retrieves the image bytes at the
og:imageaddress and uploads them throughcom.atproto.repo.uploadBlob. - The post record contains the card. The external embed holds the URL, title, description and image blob. Embedding the card in the record helps it render consistently and avoids repeated automated requests to the linked site, although it requires extra work from the client.
The consequence for site owners is practical: put correct metadata on the page before people share it. The image is not merely a decorative setting in a Bluesky profile; it is supplied by the linked page and selected when a client creates the post.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Open Graph tags to add to your page
The Open Graph protocol identifies og:title, og:type, og:image and og:url as its basic properties. og:description is optional in the protocol but useful for a link preview. The protocol also defines structured image properties, including width, height and alternative text. See the Open Graph protocol.
Use absolute, publicly fetchable URLs for the page and image. Replace the example values below with details specific to the page being shared:
<head>
<title>A practical guide to balcony gardening</title>
<meta property="og:title" content="A practical guide to balcony gardening">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/balcony-gardening">
<meta property="og:description" content="Choose containers, plants and a watering routine for a small balcony.">
<meta property="og:image" content="https://example.com/images/balcony-gardening-card.jpg">
<meta property="og:image:width" content="1600">
<meta property="og:image:height" content="900">
<meta property="og:image:alt" content="Herbs and flowers growing in pots on a balcony">
</head>The example dimensions describe that particular image; they are not a Bluesky requirement. Set width and height to the actual file dimensions if you include them. Write alternative text that conveys the image’s relevant content to someone who cannot see it. Open Graph says a page specifying og:image should also specify og:image:alt.
What each tag is for
og:title: the title to use for the shared page.og:type: the kind of object, such asarticlefor an article.og:url: the page’s canonical URL.og:description: a concise summary of the page.og:image: an absolute URL to the intended thumbnail.og:image:widthandog:image:height: the image’s pixel dimensions, if supplied.og:image:alt: a text description of the image.
Choose or make the thumbnail artwork
Create an image that represents the page rather than a generic brand banner. Make the key idea easy to recognize at small preview size; avoid putting essential text near edges where a client’s display might crop or reduce it. These are design recommendations, not platform guarantees: the cited Bluesky materials do not establish one crop mode or identical rendering across clients.
You can make the artwork in any image editor that exports a suitable image file. Adobe Express offers social graphic templates, resizing and JPEG, PNG or PDF downloads; Canva offers editable social graphic templates through a browser and mobile editor. Neither cited product page establishes that the tool automatically writes Open Graph tags to your website or is a verified Bluesky-specific card generator. Use an editor to create the image, then separately configure the page metadata.
For either workflow, check that the exported image matches the URL in og:image, that it is reachable without signing in, and that its design remains clear as a small thumbnail. The Open Graph protocol allows dimensions to be described, but the consulted official Bluesky sources do not give a canonical website-card width, height or aspect ratio. A familiar social-image size such as 1200 × 630 pixels should not be mistaken for a Bluesky-mandated size.
Image limits are not image recommendations
Bluesky’s current app.bsky.embed.images schema allows up to four images in an image embed, sets a maximum image blob size of 2,000,000 bytes, and requires alternative text for each image. Those schema details concern image embeds; they do not specify the ideal dimensions of website-card artwork. See the current image embed lexicon.
On April 7, 2026, AT Protocol developer Bryan Newbold described a planned increase in general image limits from 1 MB to 2 MB and dimensions from 2000 × 2000 to 4000 × 4000 pixels. The current lexicon confirms the 2,000,000-byte maximum; the announcement’s general dimension context is not a recommendation for website-card images. No cited official source promises a particular card crop or universally optimal composition.
Publish and check the metadata
- Prepare the artwork. Export the image and upload it to a stable public URL on your site or image host.
- Edit the page head. Add the Open Graph properties to the HTML for the specific page, not just an unrelated landing page. If your site uses a CMS, use its social sharing or page metadata fields where available.
- Use page-specific copy. Set the title and description to describe the linked page, and point
og:urlto its canonical address. - Share the page URL in Bluesky. A client constructing the card can fetch the metadata and image, upload the thumbnail blob and attach the external embed to the post.
- Inspect the rendered preview. Check the card in the client you care about. Verify that the image, title and description are the intended ones and that the composition reads at thumbnail scale.
A card record contains the thumbnail blob selected when the post was created. The cited materials do not document precisely how existing posts behave after a website’s metadata changes, so do not assume that editing the page will replace an image already embedded in an earlier post.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need to capture how a page currently renders for review, a screenshot is different from creating or publishing its Open Graph metadata. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media; it can help inspect a page, but it does not replace adding the tags above. See ScreenshotNeo.
For example, capture a page image with one GET request (see the ScreenshotNeo API documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/balcony-gardening -o shot.webpScreenshotNeo removes cookie banners, newsletter popups and chat widgets before capture; bot checks, blank pages and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month with no card.
Free tools Windows power users keep installed
One-click scans. No signup required.
Common problems and fixes
- The card has no image. Check that
og:imageis present in the page’s HTML head and points to an absolute URL. Make sure the image can be fetched publicly rather than requiring a login, private cookie or browser session. - The preview uses the wrong title or summary. Confirm that the page-specific
og:titleandog:descriptionmatch the intended content and are not inherited from a site-wide default. - The image URL works in your browser but may not be fetchable by a client. Check that the URL is not expired or access-controlled. The documented workflow requires the client to fetch the image bytes before uploading them.
- The thumbnail looks crowded or unexpectedly framed. Keep critical text and subjects away from image edges, simplify the composition, and inspect the card in the target client. No single crop behavior is established by the cited sources.
- The old post still shows its previous image. The post record includes the blob chosen at creation. The available documentation does not establish an automatic refresh mechanism for existing posts; create a new post if you need a fresh card rather than relying on a page edit to rewrite the old record.
Frequently asked questions
Is a Bluesky website card the same as an image post?
No. A website card is an external embed attached to a URL. An image post is a separate image embed with its own image requirements.
Does Bluesky require JPEG, PNG or a particular aspect ratio for card artwork?
The cited official sources do not specify a canonical website-card format or aspect ratio. Use an image URL your intended client can fetch and check the result in that client.
Can I use an image editor as a complete Bluesky card generator?
An editor can create the artwork, but you still need to set the webpage’s metadata. The cited Adobe Express and Canva pages describe design tools, not automatic website metadata publishing.
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.
