Edit your site's Open Graph content to manage the look of social shares.
Open Graph (OG) is a technology that social networks like Facebook, Twitter, Pinterest, etc., use to pull data from your site when you add a URL of your site in any of your posts on these services. By setting the Open Graph settings of your pages, you can specify which information from your pages you want to show when someone shares your page.
You can set up the Open Graph settings of any or all of your pages by going to the Page settings of each of your pages.
In Webflow, you can set three OG tags:
You can also match your Open Graph title and description to your SEO title and meta description by clicking the checkboxes below each Open Graph field.
When a page is shared on social media, the URL is converted to a rich card pulling data from your Open Graph settings.
You can add the URL of any image in the Open Graph Image. The URL must be a direct link i.e. it ends in the filename with the extension.
For Collection pages, you'll define a pattern that all pages in a Collection will use for their Open Graph information. That way, all Collection Items will automatically generate their Open Graph title, description, and image based on the pattern you defined.
You can edit this information in the Collection Template Page's settings, just like you do for your static pages.
What makes Collection Template pages so powerful is the ability to pull in unique information for each Collection item. So, instead of manually writing the Open Graph title for each blog post, you can instead have Webflow pull that content from your post's name or title field.
Sometimes, when sharing your content on social media, you'll notice that there's a typo in your Open Graph information, or that the image is cropped in a weird way, or you've updated your settings, but the old data is still being pulled.
To test that the correct information is displayed when your content is shared:
If there are any issues, read how to update your Open Graph settings below.
To fix any Open Graph issues or to update your OG data:
Sometimes, you may notice that when you share a link on Facebook, only the title and description appear in the generate rich card. The image you've set in your OG settings is missing. This usually happens when the page is shared for the first time. Even before you submit the post. If you cancel the post and try again, on the second attempt of sharing the same URL, the image will appear in the rich card. This happens for reasons that Facebook explains in their Best practices for sharing page.
You can prevent this from happening by specifying the image dimensions so the crawler can render the image immediately without having to download and process it each time. To do that:
Replace the content values for the width and height with the pixel values of your images on your site.