How to Create an OG Image with ogimage.website

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.