ogimage.website

Use ogimage.website to build a Twitter card image at 1200×630 px and export it as a PNG. That size matches the standard large-image card ratio, so the preview stays sharp on both desktop and mobile. The tool lets you pick a template, set fonts, and optionally add an app screenshot before exporting.

What a Twitter card image needs

A Twitter card is the preview block that appears when a link is shared. The image inside it is pulled from the page's meta tags, and the large-image format expects a 1200×630 px file — roughly a 1.91:1 ratio. If you upload something much taller or wider, Twitter crops it, usually from the center, which can cut off text or a logo.

Two practical rules:

• Keep key content centered. Cropping happens at the edges, so titles and logos should sit in the middle band.
• Export PNG for text and UI. PNG keeps sharp edges on type and screenshots; a JPEG can blur small text.

Step-by-step: build the image in ogimage.website

1. Open the generator. Go to ogimage.website and start a new image in the studio.
2. Choose a template. Pick a layout that leaves room for a headline. Templates are the fastest way to get a balanced composition.
3. Enter your title and description. Type the headline you want people to read in the preview. Short titles (a few words) survive cropping better than long sentences.
4. Add a background or screenshot. Upload a screenshot if you want to show the product, or use a solid/gradient background for a cleaner look. The studio supports optional app screenshots.
5. Set fonts and colors. Match your brand by adjusting the typeface and palette. Keep contrast high so the text stays readable at small preview sizes.
6. Export as 1200×630 PNG. Download the file. The export is a 1200×630 PNG, which is the size you want for the card.

Check the result before you publish

After exporting, preview how the image will look when cropped. A quick way is to view it inside a 1.91:1 frame — anything outside that frame is what gets trimmed.

• Text near the edges? Move it toward the center.
• Logo cut off? Scale it down or reposition.
• Too much empty space? Tighten the layout so the headline fills the frame.

Common reasons a card image doesn't show

If the image is correct but the preview looks stale, that's usually caching rather than a file problem — the card updates once the cache clears.

When to use this approach

This workflow fits anyone who needs a shareable preview image without design software: bloggers, product pages, and social posts. If you already have a branded template, reuse it and just swap the title and screenshot each time. If you need a one-off image with no branding, a plain template plus a short headline is enough.

Open ogimage.website, build your image in OG Studio by choosing a template and adding your title, fonts, and an optional app screenshot, then export it as a 1200×630 PNG and point your page's og:image meta tag at the file. This works for anyone who needs a social preview image and can edit a page's HTML head — no design tool required. The steps below cover the build, the export, and how to verify the result before you share the link.

What you need before you start

• A browser and access to ogimage.website.
• The text that should appear on the card (usually your page title, a short subtitle, or a brand name).
• Any font you want to use, if it differs from the defaults offered in the studio.
• Optional: a screenshot of your app or product, if you want it on the card.
• Access to the HTML <head> of the page you're sharing, so you can add the og:image tag.

Step 1: Open OG Studio and pick a template

Go to ogimage.website and start in OG Studio. The studio is built around templates, so the first decision is which layout fits your content — a title-only card, a title-plus-subtitle card, or a layout with room for a screenshot.

Choose the template that matches how much content you have. If you only have a headline, a text-forward template keeps the card clean. If you're promoting an app, pick a template with an image area so the screenshot has a defined place.

Step 2: Add your title, fonts, and screenshot

Fill in the template with your content:

• Title — the main line readers will see in the preview. Keep it short enough to stay legible at thumbnail size.
• Fonts — the studio supports custom fonts, so you can match your brand instead of accepting a default.
• App screenshot (optional) — upload a screenshot if your template has an image slot. This is optional; text-only cards work fine for articles and landing pages.

The page evidence for ogimage.website describes the studio as offering "Templates, fonts, and optional app screenshots," so treat the screenshot as an add-on rather than a requirement.

Step 3: Export as a 1200×630 PNG

Set the export to 1200×630 PNG and download the file. That dimension is the standard Open Graph size, which is why the studio exports to it by default — it's the aspect ratio social platforms expect for link previews.

Save the PNG somewhere your site can serve it, such as your images or static assets folder. Note the full URL, because you'll need it in the next step.

Step 4: Attach the image to your og:image meta tag

Add the tag to the <head> of the page you're sharing:

<meta property="og:image" content="https://yourdomain.com/images/og-card.png" />

A few things that make the tag work reliably:

• Use an absolute URL (starting with https://), not a relative path.
• Serve the image over HTTPS.
• If you also want a Twitter/X-specific card, add the matching Twitter card tags alongside the Open Graph ones.

Step 5: Preview the link before you share

Don't assume the card looks right — check it. Paste your page URL into a social platform's link preview or post composer and look at the rendered card. If the image doesn't appear, the usual causes are a cached preview, a wrong or relative URL in content, or the image not being publicly reachable.

If you see a stale preview, most platforms re-scrape after you re-enter the URL or use their debugger tool. Confirm the title and image both render at the size you expect, then share.

Common snags

When this approach fits

Use ogimage.website when you want a correct 1200×630 Open Graph image quickly and don't need a full design workflow — the template-plus-font-plus-optional-screenshot path covers most article, landing page, and app-promo cards. If you need pixel-level control over every element, a general design tool will give you more freedom, but you'll still export to the same 1200×630 PNG and wire it up with the same og:image tag.

A social media preview is the auto-generated card that appears when a link is shared on platforms like Facebook, X (Twitter), LinkedIn, Slack, or iMessage. It typically includes a title, description, and image pulled from the page's HTML metadata. You control it primarily through Open Graph (OG) tags and Twitter card meta tags in your page's <head>. If you want a custom image rather than whatever the platform scrapes, you generate one at the recommended 1200×630 size and point your og:image tag at it.

What a social media preview actually is

When someone pastes a URL into a post, message, or comment, the platform fetches that page and looks for specific meta tags. It then renders a card using that data. The card is not a screenshot of your page — it's assembled from the metadata you provide.

Where previews appear:

Each platform has its own rendering rules, but they all read from the same underlying standards: Open Graph and Twitter Cards.

How Open Graph and Twitter card tags drive the preview

Open Graph is the protocol Facebook introduced and most platforms now honor. Twitter Cards are X's own system, though X also falls back to OG tags when card tags are absent.

The core tags you need:

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A short summary of the page." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your page title" />
<meta name="twitter:description" content="A short summary of the page." />
<meta name="twitter:image" content="https://example.com/og-image.png" />

Key mechanics:

• og:image must be an absolute URL. Relative paths often fail to resolve on scrapers.
• twitter:card set to summary_large_image gives you the wide image format on X. Without it, you may get a small square thumbnail.
• Platforms fall back in order. If Twitter card tags are missing, X reads OG tags. If OG tags are missing, the platform guesses from page content — usually poorly.

Image size and aspect ratio

The widely recommended size is 1200×630 pixels, which is close to a 1.91:1 aspect ratio. This is the ratio Facebook popularized and most platforms crop toward.

Why it matters:

• Too small — some platforms refuse to show the image or upscale it, causing blur.
• Wrong ratio — platforms crop from the center or edges, potentially cutting off text or logos.
• Too large — slower scraping and occasional timeouts; most platforms cap file size (commonly around 5–8 MB, though limits vary).

If your image has important content near the edges, expect it to be trimmed on at least one platform. Keep critical text and logos within a safe central area.

Tools like ogimage.website let you build an image at 1200×630 with templates, custom fonts, and optional app screenshots, then export it as a PNG ready to reference in your og:image tag.

How to test and debug a preview

After you publish your tags, platforms cache the preview. That means changes won't appear immediately, and stale images are one of the most common complaints.

Steps to verify:

1. Use each platform's validator or debugger. Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's Card Validator each fetch your URL and show what they see.
2. Force a re-scrape. These tools usually include a "scrape again" or "refresh" button that clears the cached version.
3. Check the raw tags. View your page source or use a metadata inspector to confirm the tags are present and the image URL loads directly in a browser.
4. Test in a real share. Paste the link into a private message or draft post to see the live result.

Common reasons previews fail to update

• Missing or malformed tags — a typo in property="og:image" or a relative URL breaks the fetch.
• Cached image — the platform is still showing the old version. Use the debugger's refresh function.
• Image blocked — robots.txt, a login wall, or a CDN rule prevents the scraper from loading the image.
• Slow response — if the image takes too long to load, the platform may skip it.
• Wrong dimensions — an image that's too small or an unusual ratio may be ignored or cropped badly.
• Duplicate tags — multiple og:image tags can cause unpredictable selection.

If a preview still won't update after refreshing, try appending a query string to the image URL (for example, og-image.png?v=2) to bypass caches, then re-scrape.

Putting it together

To control your social media preview: add Open Graph and Twitter card tags to your page's <head>, point og:image at an absolute URL for a 1200×630 image, set twitter:card to summary_large_image, then validate each platform and refresh the cache. Generate the image with a tool like ogimage.website if you want a consistent, on-brand card without designing one from scratch.

Use an online OG image generator when you need a 1200×630 PNG for link previews on Facebook, LinkedIn, X/Twitter, Slack, and similar platforms. ogimage.website provides templates, font controls, and optional app screenshots, then exports the finished image as a 1200×630 PNG. The steps below cover building the image, exporting it, wiring it into your page's og:image meta tag, and verifying the preview.

What an OG image is and when you need one

An OG (Open Graph) image is the picture platforms show when someone shares a link. Without one, the platform guesses — often pulling a random image or cropping your logo badly.

You need a dedicated OG image when:

• Your page has no large, well-composed image near the top.
• Your existing image is not close to the 1200×630 aspect ratio (1.91:1).
• You want consistent branding across every shared link.

1200×630 is the widely used target size. It satisfies the minimum dimensions most platforms require and matches the 1.91:1 ratio they crop toward.

Step-by-step: build the image

1. Pick a template

Open the generator and choose a template that matches your content type — article, product, or announcement. Templates set the base layout so you are not positioning elements from scratch.

2. Enter your text

Type the title and any supporting description into the template's text fields. Keep the title short enough to read at thumbnail size; previews are often displayed small in a feed.

3. Add a visual

Upload a screenshot or image, or use the built-in screenshot capture if the tool offers it. ogimage.website supports optional app screenshots, which is useful for product or app pages. Position the image so it does not collide with your text.

4. Adjust fonts and colors

Set the font and color scheme to match your brand. The generator exposes font controls, so pick a typeface that stays legible when the image is scaled down.

5. Export as 1200×630 PNG

Export the finished design. The output is a 1200×630 PNG. PNG keeps text and UI screenshots sharp, which matters when your image contains small labels or interface details.

Step-by-step: publish and verify

6. Upload the PNG and get its URL

Host the exported file somewhere publicly reachable — your site's media folder, a CDN, or an image host. You need a full absolute URL (starting with https://), not a local file path.

7. Add the og:image meta tag

Place these tags in the <head> of the page being shared:

<meta property="og:image" content="https://example.com/images/og-page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of the page." />

The og:image:width and og:image:height tags help platforms render the preview without waiting to fetch and measure the file.

For X/Twitter, add a card type so the large image layout is used:

<meta name="twitter:card" content="summary_large_image" />

8. Check the preview

Run the page URL through a platform preview/debug tool (for example, Facebook's Sharing Debugger or LinkedIn's Post Inspector) and through a general OG preview checker. Confirm:

• The correct image appears.
• The title and description match.
• Nothing important is cropped at the edges.

If a platform shows a stale image, use its debug tool to force a re-scrape.

Common snags

Choosing between building your own and using a generator

Use a generator like ogimage.website when you want a finished image quickly without design software, and when templates plus font controls cover your needs. Build the image manually in a design tool when you need a layout the templates do not support or precise control over every element. Either way, the output requirement is the same: a 1200×630 PNG served from a public URL and referenced in your og:image meta tag.