Framer Social Preview Not Working — Fix OG Tags in Framer

Framer handles Open Graph tags through its page and site settings, but the defaults are often wrong for social sharing. If your Framer site shows no preview image when shared, or shows the wrong title or description, the fix is usually a combination of setting the right fields in Framer's settings and testing the result before your next share.

Here is where to set OG tags in Framer and how to verify they are working correctly.

Where to Set OG Tags in Framer

Framer has two places to configure social preview tags: site-level settings that apply to all pages, and page-level overrides for individual pages.

Site-level OG tags

1. Open your Framer project
2. Click the site name in the top navigation
3. Go to Site Settings > SEO
4. Scroll to the Social section
5. Set the Social Image, Social Title, and Social Description

These become the default OG tags for every page on your site. Any page without page-specific overrides uses these values.

Page-level OG tags

1. Select the page in the left panel
2. Click the settings icon (gear) for that page
3. Open the SEO tab
4. Set the Social Image, Social Title, and Social Description for this specific page

Page-level settings override the site-level defaults for that page only. For important landing pages, product pages, or blog posts, always set page-specific OG tags.

Why Framer OG Tags Break

These are the most common reasons Framer social previews do not work as expected.

Social Image not set

Framer does not automatically generate an og:image from your page design. If you have not uploaded a social image in the site or page settings, Framer may output an og:image tag that points to nothing, or omit it entirely. Upload a 1200x630 JPG or PNG in both the site-level and page-level settings.

Published vs unpublished state

Changes to Framer's SEO settings only take effect after you publish. If you updated the social image but did not publish, the live site still has the old settings. Always publish after making SEO changes, then test the live URL.

Platform cache not refreshed

After publishing, the platform that cached your Framer site's old preview will not automatically update. You need to use Facebook's Sharing Debugger, LinkedIn's Post Inspector, or Twitter's Card Validator to force a re-scrape.

Custom domain vs Framer subdomain

If your site uses a custom domain, verify that the OG tags are being served from the custom domain URL. If there is a mismatch between og:url and the actual URL people share, some platforms may not display the preview correctly.

Sell Custom Apparel — We Handle Printing & Free Shipping

Testing Framer OG Tags Before Publishing

You can check Framer OG tags before publishing by using a preview URL that Framer generates for unpublished changes.

Method 1: Framer preview link

Framer generates a shareable preview link from the top navigation bar. This preview link renders your unpublished changes and is accessible to anyone with the link. Paste this URL into the OG checker to see the tags that will be live after you publish.

Method 2: View source on the published site

1. Publish your changes
2. Open the live site URL in a browser
3. Press Ctrl+U to view source
4. Copy the HTML and paste into the OG checker

The view-source approach gives you the definitive truth about what tags are being served. Look specifically for og:title, og:description, og:image, og:url, and the twitter:card tags in the head section.

What correct Framer OG tags look like

After setting social image, title, and description in Framer's settings and publishing, the page source should contain absolute-URL og: tags with the values you configured. If you see empty content attributes or missing tags, the settings did not save correctly — re-enter them and publish again.

Fixing the Social Preview After Finding Issues

The OG checker tells you exactly what is wrong. Here is the fix for each common issue in Framer.

Missing og:image

Go to Site Settings > SEO > Social and upload a 1200x630 image. Do the same for any page where you want a specific image. Publish, then run the check again to confirm the tag appears.

Wrong og:title (showing site name instead of page title)

Framer uses the site-level social title on all pages by default. Set a page-specific social title in the page SEO settings for any page where the social preview should show a different title from the site name.

og:image pointing to a Framer CDN URL that returns an error

Sometimes Framer generates an og:image URL that references an image that was deleted from the project. Check the og:image URL by pasting it into a browser tab. If it returns a 404, re-upload the social image in Framer settings and publish.

Preview still wrong after fixing

Force a platform re-scrape. For the platform where the preview is wrong, use the appropriate debug tool (Facebook Sharing Debugger, LinkedIn Post Inspector, or Twitter Cards Validator) to clear the cache and force a fresh fetch of your updated Framer page.

Frequently Asked Questions

Does Framer automatically generate OG images from my page design?

No. Framer does not generate social preview images from your page layout. You need to upload a separate social image file (1200x630 pixels recommended) in Site Settings or page settings. Without uploading an image, Framer may output an og:image tag with no value, which causes all platforms to show no preview image.

My Framer social preview looks correct in the OG checker but wrong on LinkedIn. What is happening?

LinkedIn has its own cache of your page data. If you recently updated your Framer site and published, LinkedIn is still showing the old cached preview. Go to linkedin.com/post-inspector, enter your site URL, and click Inspect to force LinkedIn to fetch the updated version.

Can I set different OG images for different Framer CMS collection pages?

Yes. In Framer CMS, you can connect the Social Image field to a CMS property. Go to the collection page settings, open the SEO tab, and use the field binding option to pull the og:image from a CMS field. This lets each collection item have a unique social preview image.