FIRST CH TOOLS LOCAL PROCESSING — your images never leave this device 日本語

FIRST CH TOOLS / Images / 68 OGP IMAGE GENERATOR

OGP Image Generator

Type a post title and a site name, pick a colour scheme, and get the 1200×630 OGP image that shows up when the link is shared. The title is wrapped and sized to fit automatically — Japanese titles follow proper line-breaking rules, so punctuation and closing brackets never start a line. Everything is drawn inside your own browser.

Text

Colour template

Background

Drag & drop a background photo or click to choose / paste with Cmd+V or Ctrl+V (PNG / JPEG / WebP / GIF)

Typesetting

Next: drop the saved image into the Social Media Image Resizer to get X, Instagram and other platform sizes, and build the tag set with og:image in the OGP Meta Tag Wizard (this link carries the title over in the URL).

How to Use

  1. Enter the textType the post title and the site name; add a category or date in the label field if you like. A line break typed in the title is kept.
  2. Pick colours and a backgroundChoose a colour template, then switch the background to a gradient or a photo if needed. With a photo, adjust the overlay until the text reads well (a warning appears if contrast is too low).
  3. Save"Save" downloads a PNG (or JPEG) ready for the featured image or OGP image field of your blog or CMS.

About This Tool

An OGP image is the picture shown on the card when a link is shared on X, Facebook, LinkedIn, Slack, LINE and so on. Without one, every post falls back to the site-wide image (or a text-only card) and nobody scrolling past can tell which article it is. This tool makes a per-post image with the title on it without opening an image editor. The size is fixed at 1200×630 (1.91:1), the size most platforms recommend.

Latin text wraps between words; words, numbers and URLs are never split (only a word longer than the whole line is broken by character). Japanese text can break between any two characters, so the tool applies kinsoku rules: punctuation, closing brackets, small kana (っ, ゃ…) and the long-vowel mark ー never start a line, and opening brackets never end one. When a break would violate a rule, the previous character moves to the next line with it, so nothing hangs past the margin; "……" and "――" are never split. The title size starts at the maximum and steps down 2px at a time to the largest size that fits the chosen number of lines and the height. With "Even out line lengths" on, the wrapping width is then narrowed as far as possible without adding a line, so you do not get a last line of one or two characters. If a break still lands in the wrong place, type a line break in the title. If the title does not fit even at the 36px minimum, it is cut with "…" and a warning appears.

Photo backgrounds are scaled to cover the frame (the vertical position is adjustable) and get a black overlay under light text or a white one under dark text. The contrast ratio is measured by actually drawing the background under the text and checking every pixel; the figure shown is the low end (the worst 2%), and anything under 3 : 1 — the minimum for large text — is flagged. IBM Plex Sans JP is a web font and looks the same everywhere; "device sans-serif / serif" uses whatever is installed (Hiragino on a Mac, Yu Gothic on Windows…), so the letterforms and line breaks can differ between devices. X's small "summary" card and some chat apps crop the centre of the image to a square; "Show the square crop area" marks the central 630×630 so you can keep the essentials inside it.

Drawing happens in the browser with Canvas; the text you type and the photos you choose are never sent to a server. Use the Social Media Image Resizer to turn the result into other platform sizes and the WebP Converter to make it lighter. The meta tags that point at it, og:image included, come from the OGP Meta Tag Wizard.

Settings can be passed as URL parameters (the photo is always chosen on the page; values in a URL reach the server as part of the page request, so type unpublished titles on the page instead). Example: /en/ogp-image/?title=My first OGP image&site=Sample Blog&label=GUIDE&tpl=night&align=center&lines=2 (title, site, label = text / tpl=paper,ink,vermilion,night,leaf,hydrangea,haze / bg=solid,gradient,image / c1, c2, text, accent = colours / angle = degrees / overlay=0-90 / pos=0-100 / font=plex,sans,serif / align=left,center / deco=band,side,frame,none / lines=1-4 / size=40-110 / balance=0 to turn off evening out / guide=1 / format=png,jpeg).

Other Tools