How do I set Open Graph tags in Webflow?

Set the card on the page people will share

Open Graph tags are what Facebook, LinkedIn, X, and similar sites read when someone pastes a URL. Webflow gives you three: a title, a description, and an image. If you leave them empty, a share can show a random snippet, or no image at all.

There is no site-wide Open Graph title. Each page keeps its own settings. Open the Pages panel, open Page settings for that page, then open Open Graph settings. Enter the title and description, or check the boxes that copy the SEO title and the meta description. Those checkboxes only fill the social card. They do not change the title tag Google uses in search results.

Save, then publish. Unpublished Open Graph edits stay in the Designer.

Example: the homepage of a studio site should share as "Northwind Studio" with the description "Brand sites for small teams" and a wide photo of recent work. The pricing page should share as "Northwind pricing" with a different image. If both pages reuse the homepage sentence, a LinkedIn post of the pricing link looks like a second homepage.

Pick an image social sites can fetch

Use Select image to choose a JPG or PNG from Assets, click Add image, save, and publish. The asset picker shows JPG and PNG files. WebP can work on some networks, and support varies. To use a WebP file, click Add URL and paste a public image address that ends in the file extension.

You can copy an asset link from the Assets panel. Hover the image, open more options, and choose Copy link. If a URL is already saved, Select image and Add URL stay hidden until you delete that URL.

Facebook recommends a width of at least 1080 pixels. Use the same dimensions when you can. A tiny icon often gets dropped, and the preview shows text only.

On a Collection template, open the same Open Graph settings and click Add field to insert a Collection field in the title or description. For the image, choose an Image field from the dropdown, such as Main image. If the Collection has no Image field, you cannot set a dynamic Open Graph image. Every Open Graph image in that Collection must use the same dimensions. A blog post named "Spring launch notes" can then carry its own title and its own main image without a separate static page.

Refresh a preview that remembered the old card

Social sites cache the first version they fetched. After you change the image, the old card can linger. Publish the Webflow change before you ask a network to look again. A debugger that hits the live URL will keep the previous image until the new file is actually published.

• Facebook: paste the live URL into Meta's debugger, click Debug, and click Scrape Again if the data is stale. You need to be logged into Facebook.
• LinkedIn: paste the URL into Post Inspector and click Inspect. You need to be logged into LinkedIn. Open a property such as Title or Image to see how LinkedIn chose the value.
• X: paste the URL into the Card Validator and click Preview card. X no longer shows the card inside that tool. Compose a post and paste the link to see the preview. You need to be logged into X.

Pinterest and Instagram do not offer their own Open Graph checkers. Meta's debugger is the stand-in Webflow points to, and you still need a Facebook login.

If the title and description update and the image does not, confirm the file is JPG or PNG, confirm the width is at least 1080 pixels, remove the link from the post, and add it again. When every Open Graph image on the site uses one size, such as 1200 by 630, you can add meta tags in site head code that state that width and height. When sizes differ by page, put those tags in that page's head custom code instead. Collection images still need one shared size.

Run one URL through the debugger after publish, such as the pricing page, and read the title, description, and image it returns. If those three match the Page settings you saved, the card is ready to share.