Control the look of social shares with Open Graph

Open Graph (OG) is a technology that social networks like Facebook, LinkedIn, Twitter, etc., use to pull data from your site when you share the URL of your site on those services. You can specify the information shared in your site’s link previews with Open Graph settings. 

Need to know: If you haven’t set up your Open Graph settings, random content (or no content) will appear when your site is shared on social media. 

In this lesson, you’ll learn: 

1. How to set Open Graph tags
2. How to set dynamic Open Graph tags
3. How to test and debug Open Graph settings
4. How to troubleshoot missing Open Graph images

How to set Open Graph tags

In Webflow, you can set 3 Open Graph tags: 

• Open Graph title — the text that displays as the page’s title when that page’s link is shared
• Open Graph description — the text that displays under the title and provides a description of the page’s content
• Open Graph image — the image that displays above the title and description

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 from your pricing page’s Open Graph content. You can’t set Open Graph tags globally, and Open Graph tags apply only to the page on which you’ve set the settings — so it’s best practice to set Open Graph tags for each of your pages.

You can view and set the Open Graph settings for a page by going to Pages panel > Page settings > Open Graph settings.

Pro tip: On sites with Localization enabled, you can localize your page-level Open Graph settings. Learn more about localizing Open Graph settings. 

Open Graph title and description 

You can enter an Open Graph title and description manually, or pull your Open Graph title and description from your SEO title and meta description by clicking the checkboxes below each Open Graph field. 

Open Graph image

For your Open Graph image, enter a direct link to an image (i.e., a URL that ends in the filename with the image extension). 

To use an image from the Asset panel in the Open Graph image field: 

1. Hover over the image in the Asset panel
2. Click the settings “cog” icon that appears
3. Right-click the “link” icon next to the asset name in the Asset details menu
4. Copy the link 
5. Paste the link in the Open Graph image field

Learn more: Optimize images to generate better site previews

How to set dynamic Open Graph tags

On Collection pages, you can define a pattern that all pages in a Collection will use for their Open Graph information. That way, rather than manually writing the Open Graph title for each Collection item, all Collection items automatically generate their Open Graph title, description, and image based on the pattern you set. For example, if you have a Collection of blog posts, you can use dynamic data to pull content from your post’s name or title Collection field in your Open Graph settings.

Just like static pages, you can edit this information by going to Pages panel > Page settings > Open Graph settings. 

Open Graph title and description 

To populate your Open Graph title and description fields with dynamic data from a Collection field, click Add field. 

You can also enter an Open Graph title and description manually, or pull your Open Graph title and description from your SEO title and meta description by clicking the checkboxes below each Open Graph field.  

Open Graph image

To set an Open Graph image on a Collection page, click the Open Graph image dropdown and choose an Image field from your Collection (e.g., main image, thumbnail image, etc.). If your Collection doesn’t contain an Image field, you won’t be able to set an Open Graph image.

Note: All Open Graph images in a Collection must share the same dimensions. 

How to test and debug Open Graph settings

You may want to preview your links before sharing them to understand how they’ll appear on social media sites, or refresh your Open Graph content when old data appears in your link preview.

Many popular social media sites provide their own tools for previewing, debugging, and refreshing your Open Graph data: 

• Facebook
• LinkedIn
• Twitter

Note: Pinterest and Instagram don’t have specific tools for validating Open Graph data. You can use Facebook’s debugger tool to check how these apps may display your site. You must be logged into Facebook to use the Facebook debugger.

Facebook 

Facebook provides their own debugger, which you can use to scrape (i.e., index) your link and pull in the most recent Open Graph data. 

To use the Facebook debugger, paste in your link and click Debug. If you’ve made changes to your Open Graph settings and the data that appears is outdated, click Scrape Again to refresh the data. 

Note: You must be logged into Facebook to use the Facebook debugger.

LinkedIn

LinkedIn’s Post Inspector lets you request a re-scrape of your link and check when LinkedIn last updated the link preview. You can also use the Post Inspector to debug issues with your Open Graph data. 

To use the LinkedIn Post Inspector, paste in your link and click Inspect. You can click on a property (e.g., Title, Type, Image, etc.) to learn more about how the value was chosen by LinkedIn. 

Note: You must be logged into LinkedIn to use the LinkedIn Post Inspector. 

Twitter

Twitter’s Card Validator provides a Log which contains debugging information about your link’s Open Graph data. To use the Twitter Card Validator, paste in your link and click Preview card. 

Twitter no longer displays a preview of your link in the Card Validator. To preview how your link will appear when shared on Twitter, compose a tweet and paste in your link. 

Note: You must be logged into Twitter to use the Card Validator and Tweet Composer.

How to troubleshoot missing Open Graph images

When sharing a link to your site on Facebook, you may notice that your link preview contains only a title and description, and the image you’ve set in your Open Graph settings is missing. 

Typically, this happens when a page is shared and the preview is generated for the first time, so you may be able to resolve the issue by removing and then re-adding the link in your post. However, there are a few best practices that can prevent this issue from occurring: 

1. Use the same dimensions for all Open Graph images on your site. Facebook recommends using images that have a width of at least 1080 pixels. Learn more about Facebook’s best practices for sharing images. 
2. Pre-cache your images by running the link through the Facebook debugger tool. You should also do this after you update your Open Graph image. 
3. Use Open Graph tags to specify your image dimensions to the web crawler. This lets the web crawler render the image immediately without having to asynchronously download and process it. To do this, add the following code snippet in Site settings > Custom code tab > Head code section, replacing the content values for the width and height with the respective pixel values of the images on your site (if you’ve used the same dimensions for all Open Graph images): 

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

‍Learn more about using custom code in your site’s head and body tags. 

Good to know: If you use Open Graph images with different dimensions throughout your site, you can use the above code snippet in Pages panel > Page settings > Inside <head> tag rather than in your Site settings. All Open Graph images in a Collection must share the same dimensions.