How to add an OG image to your website without a developer

Every website builder has a way to set your OG image. The problem is that none of them call it the same thing, and most bury it in a settings page you'd never think to look at.

This guide covers the most common platforms. Find yours, follow the steps, and you're done.

Before you start, you need an actual image file to use. It should be 1200×630 pixels, hosted somewhere publicly accessible (your own CDN, an image host, or a Opengraphly-generated URL). If you don't have one yet, read this after creating one.

Webflow

Webflow has OG image settings at two levels: site-wide and per-page.

Site-wide (applies to all pages without a specific setting):

1. Open your Webflow project
2. Go to Project Settings → SEO tab
3. Scroll to Open Graph Settings
4. Upload your image or paste the URL into the OG Image field

Per-page:

1. Open the page in the Designer
2. Click the Pages panel (the page icon in the left sidebar)
3. Click the settings gear next to the page name
4. Scroll to Open Graph / Twitter settings
5. Upload or paste your image URL

If you're using Webflow CMS, you can connect the OG image field to a CMS field — useful if you want each blog post or product page to have a unique image.

Framer

Framer applies OG settings per-page from the page panel.

1. In your Framer project, click the page you want to edit in the left sidebar
2. Click the settings icon (gear) next to the page name
3. Open the SEO section
4. You'll see a Social Image field — click it to upload your image or paste a URL

For your site's homepage, check Site Settings → General → Social Image for a site-wide fallback.

Note: Framer requires you to re-publish after changing OG settings for them to take effect.

Squarespace

Squarespace separates general site settings from individual page settings.

Site-wide default:

1. Go to Settings → SEO → SEO Site Title (scroll past this)
2. Look for Social Sharing — upload your default sharing image here

Per-page:

1. In the Pages panel, hover over the page and click the gear icon
2. Go to the SEO tab
3. Scroll to Social Image
4. Upload your image (Squarespace hosts the image for you)

Squarespace resizes images automatically, but start with 1200×630 to avoid surprises.

WordPress

WordPress doesn't have built-in OG support — you need a plugin. The two most common are Yoast SEO and Rank Math. Both are free.

With Yoast SEO:

1. Install and activate Yoast SEO from the WordPress plugin directory
2. Go to SEO → Social in the WordPress admin
3. Under the Facebook tab, enable Open Graph metadata and set a default image
4. To set a per-page image: edit the page or post, scroll to the Yoast SEO panel at the bottom, click Social, and upload an image

With Rank Math:

1. Install Rank Math, run the setup wizard
2. Go to Rank Math → Titles & Meta → Global Meta
3. Set your default social thumbnail
4. Per-page: in the post editor, find the Rank Math panel → Social tab → upload an image

Both plugins handle the og:image and twitter:image tags correctly.

Notion (published sites)

Notion's native publishing lets you set a page cover image — but that's not the same as an OG image. Notion's published sites set the page cover as the OG image, with limited control.

What you can control:

1. Open the page
2. Click Add cover at the top and choose an image
3. Notion uses this as both the visual cover and the OG image when the page is published

The cover image needs to be at least 1500px wide for Notion to use it cleanly. The crop is automatic and not always ideal.

If you need more control: Notion's native publishing is limited here. Most teams who need precise OG images for Notion-based sites use a tool like Super.so or Potion.so (which add a proper OG settings layer on top of Notion) or move to a different publishing method entirely.

What if your platform isn't listed?

If your site builder isn't above, look for any of these phrases in your settings:

• "Social image"
• "Open Graph image"
• "Sharing image"
• "OG image"
• "SEO image"

They're all the same thing.

If you can't find a field but you can edit the <head> HTML of your pages, add this directly:

<meta property="og:image" content="https://yoursite.com/your-og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/your-og-image.png" />

Replace the URL with wherever your image is hosted.

After you've added it

Don't just assume it worked. Test it.

Paste your URL into LinkedIn's Post Inspector and click Inspect. You'll see exactly what LinkedIn would show when someone shares your link. If the image appears correctly there, you're good for most platforms.

For Twitter specifically, use the Twitter Card Validator.

If the image looks wrong or doesn't appear, and you're confident the tag is correct, the platform may have cached an old version. Use the inspector tools above to force a refresh.