How to Create an OGP Image (1200×630)
Learn how to make an OGP image (1200×630) that shows when your URL is shared on social media, including the recommended size, meta tags, design tips, and how to verify it.
What an OGP image is
An OGP image is the thumbnail shown as a card when your article or service URL is shared on X (Twitter), Facebook, LINE, Slack, and others. It is specified as og:image following the Open Graph Protocol.
A card with an image gets more clicks and communicates the content better than a plain text link. For blogs, Qiita, Zenn, and indie project pages, having an OGP image can noticeably change traffic and engagement.
Recommended size and ratio
The standard OGP image size is 1200×630 pixels (roughly 1.91:1). Most platforms display around this ratio, so it is the safe size to start from. The large X (Twitter) card supports this ratio too.
Images that are too small may not be displayed by a service, or may look rough. Keeping to 1200×630 lets you display roughly as intended across the major platforms.
Creating an OGP image in your browser
You can make an OGP image without a design tool. Filewisp's OGP Image Maker generates a 1200×630 image just from a title, subtitle, background color, and logo. It includes color theme presets, adjustable text colors, and logo placement, and everything is rendered in your browser.
Just enter a title and subtitle, pick a theme or colors, and add a logo if you want one. Check the preview, then download it as a PNG.
Setting the meta tags
Reference the image as og:image inside the page <head>. Setting og:title, og:description, og:url, and og:type alongside it helps the card display correctly. For X, set twitter:card to summary_large_image to get the large card.
Use an absolute URL (a full path starting with https://) for og:image. A relative path can prevent some services from fetching the image, so a public URL is recommended.
Tips for a readable OGP image
OGP images are often shown small in a timeline, so a short title and strong contrast between text and background make it easier to read. An overly long title wraps and feels cramped, so trim it to the key point.
Text placed right at the edge can get cut off on some services. Leave a little margin, and keep a logo or site name as a subtle accent so the card looks clean rather than crowded.
How to verify the result
You can check your OGP with each platform's debugger or card validation tool. Previewing before you actually share helps you catch cropping issues or an old cached image.
If an updated OGP does not show, the platform may be caching the previous image. Ask the validator to re-fetch, or check with a parameter added to the URL to see the new image more easily.