Control the look of social shares with Open Graph

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.

In this lesson

1. Accessing the Open Graph settings of a page
2. Setting Open Graph settings
3. Setting dynamic Open Graph settings
4. Testing Open Graph settings
5. Updating Open Graph setting changes
6. Troubleshooting missing images

Accessing the Open Graph settings of a 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.

• Pages panel > Page settings > Open Graph Settings

Setting Open Graph settings

In Webflow, you can set three OG tags:

• Open Graph Title - The text that displays as the page's title when shared.
• Open Graph Description - The text that displays under the title, and gives people a description of the shared page's content.
• Open Graph Image - The image that displays above the title and description.

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.

Good to know

• Open Graph content works best when it's specific to the page being shared. For example, your home page's Open Graph content should be different than your pricing page's. That's why there's no option to set OG settings globally.
• And since, Open Graph settings apply only to the page on which you've set the settings. So, be sure to set the Open Graph settings for each of your pages.

When a page is shared on social media, the URL is converted to a rich card pulling data from your Open Graph settings.

Need to know
If you haven't set up your OG settings, random content (sometimes no content) will be pulled from your site when you share it on social media.

Open Graph image

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.

Important
Only use images you have rights to use and share.

Best practice

• You can upload the image(s) you want to use as OG image to the Asset panel. 
• To grab the URL of the images in the Asset panel, click the settings icon that appears when you hover over the image in the Asset panel, then grab the URL by right-clicking on the link icon next to the asset name in the Asset Details menu and copy the link.

• Learn how to optimize images to generate better previews when sharing your pages.

Setting dynamic Open Graph settings

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.

Testing Open Graph settings

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:

1. Paste the link to the page from your site in a post box on Facebook
2. ‍Double check the content that displays

If there are any issues, read how to update your Open Graph settings below.

Updating Open Graph setting changes

To fix any Open Graph issues or to update your OG data:

1. Go back to your Page settings in Webflow and check that all the information is correct
2. Fix anything that's incorrect. Save the page settings and publish your site.
3. Paste the link in the Facebook debugger, debug and then scrape the data again.

Troubleshooting missing images

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:

1. Make sure to use the same image dimensions for all your images on your site (Read the best practices for ideal image sizes)
2. Add the following code snippet in the head section of your website:

• <meta property="og:image:width" content="1200">
• <meta property="og:image:height" content="630">

Replace the content values for the width and height with the pixel values of your images on your site.

Good to know

• If you want to use different image sizes for different pages, you can add the same code in the head section of your page's custom code. 
• All images of a Collection must have the same dimensions.