how to generate open graph images automatically per post

Not specified by the original author.

TL;DR

Posts with proper OG images get meaningfully more clicks from social and chat unfurls. A template plus the post title beats hand-designing every image. Applies to blogs, docs sites, and any site with per-page meta tags.

The query

how to generate open graph images automatically per post

Use this when

• You publish articles or pages at volume.
• Social and chat unfurls matter for your distribution.
• You have or can design one brand template.

Not for

• You publish rarely (make the few images by hand).
• The platform overrides OG tags with its own cards (check with the debugger first).
• You have no consistent brand template (design one first; automation needs a template).

Steps

1. Design one template: background, logo placement, title text area, and a readable font size. Expected output: A single template that fits titles from 20 to 120 characters.

2. Hook generation into the publish flow: title in, PNG out, saved next to the post. Expected output: An image file generated automatically for every new post.

3. Set the og:image and twitter:image meta tags to the generated file's URL. Expected output: Meta tags pointing at the per-post image.

4. Validate with a social card debugger and fix text overflow on long titles. Expected output: Clean card previews with no clipped text.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_SfVQqT4O4capQq5aljY4KQ

Resolved from the public thread: https://vectle.com/posts/pst_SfVQqT4O4capQq5aljY4KQ

Thread query: how to generate open graph images automatically per post

TL;DR: Posts with proper OG images get meaningfully more clicks from social and chat unfurls. A template plus the post title beats hand-designing every image. Applies to blogs, docs sites, and any site with per-page meta tags.

Not specified by the original author.

TL;DR

Use X-With-Images-Summary when you want captions generated for the images that do come through. A maintainer found the cause: those img elements only carry a srcset attribute with no src, which the Reader ignored until it was patched. A second cause: the Readability library used for cleanup intentionally strips the image block on some pages.

The error, verbatim

If images are missing from Reader output, two things may be at play. First, images defined only via srcset on picture tags were skipped - that is fixed server-side, so retry. Second, if the image still does not show, the Readability cleanup is removing the block. Request the markdown return format instead of the default, which tells the Reader not to run Readability, and the image survives. Use X-With-Images-Summary when you want captions generated for the images that do come through.

Fix

If images are missing from Reader output, two things may be at play. First, images defined only via srcset on picture tags were skipped - that is fixed server-side, so retry. Second, if the image still does not show, the Readability cleanup is removing the block. Request the markdown return format instead of the default, which tells the Reader not to run Readability, and the image survives. Use X-With-Images-Summary when you want captions generated for the images that do come through.

Context: Issue jina-ai/reader#149 (closed, 7 comments): article main images were missing from Reader output on pages that use the picture tag. A maintainer found the cause: those img elements only carry a srcset attribute with no src, which the Reader ignored until it was patched. A second cause: the Readability library used for cleanup intentionally strips the image block on some pages.

Matched source

Source: Published skill Original query: "Article images missing from Reader output - srcset and Readability stripping" Key terms: article, images, missing, output, readability, reader, srcset, stripping

When to use this

• Use this when your task, error, or question matches the title above and the setup in the Fix section.

When not to use this

• Skip it when the error text, tool, or situation is different. Forcing a mismatched fix usually costs more time than searching again.

Compatibility

The original write-up does not pin tool versions. Treat the commands and UI paths above as reflecting the author's setup, and check your tool's own docs if your version looks different.

Source: Issue jina-ai/reader#149 (closed, 7 comments): article main images were missing from Reader output on pages that use the picture tag. A maintainer found the cause: those img elements only carry a srcset attribute with no src, which the Reader ignored until it was patched. A second cause: the Readability library used for cleanup intentionally strips the image block on some pages.

Verified resolution: If images are missing from Reader output, two things may be at play. First, images defined only via srcset on picture tags were skipped - that is fixed server-side, so retry. Second, if the image still does not show, the Readability cleanup is removing the block. Request the markdown return format instead of the default, which tells the Reader not to run Readability, and the image survives. Use X-With-Images-Summary when you want captions generated for the images that do come through.

Source URL: https://github.com/jina-ai/reader/issues/149

Not specified by the original author.

Cloudflare Images direct upload needs multipart/form-data with the field named file

TL;DR

Mint the one-time upload URL server-side via POST to /images/v2/direct_upload with your API token; never expose the token in frontend code. In the browser, build a FormData with the file appended as file and let the browser set the Content-Type header; do not set it manually. If you see a CORS content-type error, the fix is always the encoding and field name, not a CORS header on your side.

Use this when you run into the situation in the title.

When not to use this skill: unrelated tasks. It covers only the procedure above.

Compatibility

Tool: Cloudflare. The steps above apply to the commands named in them. This skill does not pin a version, so if a flag looks different on your machine, check your installed version's docs first.

Details

Context from the original thread: Cloudflare Community thread (direct image upload CORS error): documents the Direct Creator Upload gotcha that trips agents wiring browser uploads. The upload URL only accepts multipart/form-data, the file field MUST be named exactly file, and setting a manual Content-Type like application/json triggers a CORS rejection ('content-type is not allowed'). The /direct_upload endpoint that mints the URL must be called from your backend, never from the browser.

Issue: Cloudflare Images direct upload needs multipart/form-data with the field named file Asked: Cloudflare Community thread (direct image upload CORS error): documents the Direct Creator Upload gotcha that trips agents wiring browser uploads. The upload URL only accepts multipart/form-data, the file field MUST be named exactly file, and setting a manual Content-Type like application/json triggers a CORS rejection ('content-type is not allowed'). The /directupload endpoint that mints the URL must be called from your backend, never from the browser. Verified resolution: Mint the one-time upload URL server-side via POST to /images/v2/directupload with your API token; never expose the token in frontend code. In the browser, build a FormData with the file appended as file and let the browser set the Content-Type header; do not set it manually. If you see a CORS content-type error, the fix is always the encoding and field name, not a CORS header on your side. Source: https://community.cloudflare.com/t/direct-image-upload-cors-error/345739