Regulate the appearance of social shares with Open Graph

Open Graph (OG) is a system that social platforms like Facebook, LinkedIn, Twitter, etc., utilize to extract data from your website when you share its URL on those platforms. You have the ability to define the information displayed in your site’s link previews through Open Graph settings. 

Key point to remember: In case you have not configured your Open Graph settings, random content (or no content) will be displayed when your site is shared on social media. 

This guide will teach you: 

1. Setting up Open Graph tags
2. Arranging dynamic Open Graph tags
3. Testing and rectifying Open Graph settings
4. Solving issues with missing Open Graph images

How to establish Open Graph tags

In Webflow, you can define 3 Open Graph tags: 

• Open Graph title — text exhibited as the page’s title when the page’s URL is shared
• Open Graph description — a textual representation that appears below the title and provides an outline of the page’s content
• Open Graph image — an image showcased above the title and description

Useful tip: Open Graph content is most effective when it is tailored to the specific page being shared. For instance, the Open Graph content for your homepage should differ from that of your pricing page. Open Graph tags cannot be applied globally and are exclusive to the designated page — hence, setting Open Graph tags for each page is a recommended practice.

You can access and adjust the Open Graph settings for a page by navigating to Pages panel > Page settings > Open Graph settings.

Pro hint: On websites with Localization activated, you can localize your page-level Open Graph settings. Find out more about localizing Open Graph settings. 

Open Graph title and description 

You can manually input an Open Graph title and description, or retrieve them from your SEO title and meta description by ticking the checkboxes below each Open Graph field. 

Open Graph image

To specify an Open Graph image, provide a direct link to an image (i.e., a URL ending with the image’s filename and extension). 

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

1. Hover over the image in the Asset panel
2. Click on the settings “cog” icon that appears
3. Right-click on 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

Discover more: Optimize images to enhance site previews

How to configure dynamic Open Graph tags

On Collection pages, you can establish a template that all pages in a Collection will adhere to for their Open Graph details. This way, instead of manually setting the Open Graph title for each Collection item, all items in the Collection will auto-generate their Open Graph title, description, and image based on the set template. For instance, with a Collection of blog posts, you can employ dynamic data to extract content from your post’s name or title Collection field in your Open Graph settings.

Similar to static pages, you can edit this information by navigating to Pages panel > Page settings > Open Graph settings. 

Open Graph title and description 

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

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

Open Graph image

To assign an Open Graph image on a Collection page, select the Open Graph image dropdown and pick an Image field from your Collection (e.g., main image, thumbnail image, etc.). If your Collection lacks an Image field, you won’t be able to designate an Open Graph image.

Notice: All Open Graph images in a Collection must possess identical dimensions. 

How to examine and rectify Open Graph settings

It might be beneficial to preview your links before sharing them to comprehend how they will be displayed on social media platforms or update your Open Graph content if outdated data appears in your link preview.

Several popular social media platforms offer their own tools for previewing, debugging, and refreshing your Open Graph data: 

• Facebook
• LinkedIn
• Twitter

Notice: Pinterest and Instagram lack tools dedicated to validating Open Graph data. Facebook’s debugger tool can be utilized to check the potential display of your site on these platforms. Access to the Facebook debugger requires you to be logged into Facebook.

Facebook 

Facebook offers its own debugger tool, allowing you to scrape (i.e., index) your link and retrieve the most recent Open Graph data. 

To utilize the Facebook debugger, insert your link and tap on Debug. If the displayed data is outdated following changes to your Open Graph settings, select Scrape Again to refresh the data. 

Notice: Accessing the Facebook debugger requires you to be logged into Facebook.

LinkedIn

LinkedIn’s Post Inspector enables you to request a re-scrape of your link, view when LinkedIn last updated the link preview, and resolve issues related to your Open Graph data. 

To make use of the LinkedIn Post Inspector, insert your link and click on Inspect. You can click on a property (e.g., Title, Type, Image, etc.) to gain insights into how LinkedIn chose the value. 

Notice: Accessing the LinkedIn Post Inspector requires you to be logged into LinkedIn. 

Twitter

Twitter’s Card Validator provides a Log containing debug information about the Open Graph data of your link. To utilize the Twitter Card Validator, insert your link and click on Preview card. 

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

Notice: Accessing the Card Validator and Tweet Composer on Twitter requires you to be logged into your Twitter account.

How to resolve missing Open Graph images

When sharing a link to your site on Facebook, you might observe that the link preview only contains a title and description, while the image set in your Open Graph settings is absent. 

This usually occurs when a page is shared and the preview is generated for the first time, but this issue can be resolved by removing and re-adding the link in your post. However, adopting a few best practices can prevent this problem from arising: 

1. Maintain uniform dimensions for all Open Graph images on your site. Facebook suggests utilizing images with a minimum width of 1080 pixels. Check out Facebook’s recommendations for sharing images. 
2. Precache your images by running the link through the Facebook debugger tool. This should be done after updating your Open Graph image as well. 
3. Utilize Open Graph tags to specify the dimensions of your images to the web crawler. This facilitates immediate rendering of the image by the web crawler without the need for asynchronous downloading and processing. Insert the following code snippet in Site settings > Custom code tab > Head code section, altering the width and height values to match the pixel values of the images on your site (assuming a consistent dimension for all Open Graph images): 

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

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

Useful tip to remember: In case you are using Open Graph images with varied dimensions across your site, insert the above code snippet in Pages panel > Page settings > Inside <head> tag rather than within your Site settings. Every Open Graph image within a Collection must maintain identical dimensions.