What the tool does
When a page is shared on social networks or in chat apps, the preview picture usually comes from the file referenced by the og:image tag. This tool gives you a quick way to produce that file: pick one of three templates, write a title, subtitle and brand line, and choose a solid colour, a gradient or your own photo as the background.
The preview updates as you type. Font size shrinks to fit longer titles, safe-area guides show where content should stay, and a warning appears when text and background contrast is weak. It is aimed at bloggers, small businesses and developers who do not want to open a design app for every article.
How to use
- Type the title. Press Enter if you want to break the line yourself.
- Optionally add a subtitle and a brand line such as your domain.
- Choose a template, a size (1200×630 or square 1080×1080) and the title font.
- Set the background type and colours. With a photo, an adjustable colour overlay keeps text readable.
- Upload a PNG, JPEG or WebP logo if needed; transparency is preserved.
- Read the warnings, choose a format and download the image.
To reference the image on your page, build the tags with the meta tag generator, and check how the page title looks in results with the SERP preview.
The 1200×630 canvas
The canvas backing store always matches the selected size: 1200×630 or 1080×1080 pixels. The on-screen preview is scaled with CSS, but the downloaded file keeps the exact dimensions. The 1200×630 ratio is roughly 1.91:1, which matches the landscape link-card size many platforms recommend.
A dashed yellow line marks a 60 pixel safe area inside the edges, and the tool warns when text crosses it. On landscape images a blue square shows what may survive in previews that crop to a square. Guides are drawn only on screen and never appear in the exported file.
Turkish fonts and line wrapping
No new font is downloaded; the tool uses the Manrope and Archivo Black files already served by this site. Before drawing, it waits for document.fonts.load() and document.fonts.ready. If the fonts cannot load, it does not quietly produce a different image with a fallback face: downloads stay disabled and a retry button explains the problem.
Lines are broken by real pixel width measured with measureText(), not by character counts. If the title does not fit, the font size steps down; if it still overflows at the minimum size, an overflow warning appears and PNG/JPEG download is disabled. Exporting a cropped version requires ticking a separate confirmation box. A single word longer than the line is split at grapheme boundaries, so letters such as Turkish İ and ğ, combining marks and emoji sequences stay intact.
PNG export
PNG is lossless and keeps edges crisp on flat, text-heavy designs. Photo backgrounds usually produce smaller files as JPEG, which the tool saves at quality 0.92. The file name is a slug built from the title with Turkish rules, for example og-isikli-sehir-rehberi.png.
Uploaded photos and logos are redrawn as pixels on the canvas, so the export is a new file and embedded data such as EXIF is not carried over. A transparent logo is alpha-composited over the opaque background that is painted first.
Example and interpretation
The example button loads the Turkish title Işıklı Şehirler: İstanbul’da Gece Fotoğrafçılığı Rehberi, a two-line subtitle and the brand line yemre.com.tr. In the left-aligned template the title wraps onto two lines across the 1200 pixel width, with the smaller Manrope subtitle below it.
| Situation | What the tool does |
|---|---|
| Title over 140 characters | Shows an error and disables download |
| White text on pale yellow | Shows the contrast ratio with a warning |
| One very long word | Splits at grapheme boundaries and says so |
| 20 megapixel photo | Rejects it from the file header before decoding |
The contrast warning uses the WCAG ratio and flags anything below 4.5:1. It is advice rather than a rule, but higher contrast helps when the card is shown as a small thumbnail.
Limits and privacy
- The title can be up to 140 characters, the subtitle 240 and the brand line 60.
- Photos and logos must be PNG, JPEG or WebP, up to 5 MiB and 16 megapixels. SVG uploads and fetching images from a URL are not supported in this version.
- Files are read in your browser and never sent to a server. A share link carries only text and colour settings, never images.
- The tool does not upload the image to your site or install the
og:imagetag, and it cannot promise that every platform will show the image uncropped.
Frequently asked questions
What size should an OG image be?
1200×630 pixels is the common size for landscape link cards. A square 1080×1080 option is available for places that crop to a square. Exact rules vary by platform.
Why do Turkish letters sometimes look wrong in generated images?
Some tools draw before the font has loaded and fall back to another face. This tool waits for the fonts and disables download if they fail.
Is my photo uploaded anywhere?
No. The file is read in the browser and drawn on the canvas. Closing the page discards it.
Should I pick PNG or JPEG?
PNG is sharper for flat colours and text. JPEG is usually smaller when the background is a photo.
How do I add the image to my page?
Upload the file to your site and put its URL in the og:image tag. The meta tag generator can write the tags for you.