About this tool
Build one legible social card locally, then connect the downloaded asset to honest metadata only after it has a public deployment URL.
OG Image Generator creates one fixed 1200x630 text-based social card in the browser. It bounds and fits content, verifies the exported PNG signature and dimensions, and keeps local image creation separate from the public URL required by deployed Open Graph metadata.
- Fits grapheme-bounded eyebrow, title, and subtitle copy into a fixed 1200x630 canvas, including hard wrapping for CJK and long unbroken text.
- Verifies the PNG signature and IHDR dimensions before downloading a validated safe file name.
- Generates escaped og:image, type, width, height, and descriptive alt tags only from a validated deployed HTTP(S) URL.
How to use OG Image
Choose a curated theme, load or edit the eyebrow, title, and subtitle, then review the measured line layout before downloading. Publish that exact PNG, enter its final HTTP(S) URL and a description of what the image shows, and copy the generated image tags into the page head.
When this tool is useful
- Fits grapheme-bounded eyebrow, title, and subtitle copy into a fixed 1200x630 canvas, including hard wrapping for CJK and long unbroken text.
- Verifies the PNG signature and IHDR dimensions before downloading a validated safe file name.
- Generates escaped og:image, type, width, height, and descriptive alt tags only from a validated deployed HTTP(S) URL.
Examples you can test
Load an example, compare the result with the expected output, then replace it with your own input.
Create a blog social image
Example input
Title: How to Clean CSV Data, subtitle: Practical workflow guide
Expected output
Verified 1200x630 PNG with measured line layout
The renderer hard-wraps long tokens and shows when content is shortened with an ellipsis.
Generate a launch card
Example input
Title: Utiloom Updates, deployed URL: https://example.com/updates.png
Expected output
PNG plus escaped og:image structured properties
Metadata becomes available only after a final image URL and descriptive alt text are supplied.
Validation checklist
- Confirm the preview does not report truncated title or subtitle copy.
- Publish the exact verified PNG and use its final public HTTP(S) URL in metadata.
- Describe what the image shows in og:image:alt and test the deployed page with the target platform.