Facebook, the Open Graph and Website Page Previews

You have a WordPress website, and you want to share your original content from the website to Facebook. In most cases, this is fairly straightforward. You just copy the URL of the page or post, and paste it into the ‘share’ box in Facebook. Ideally, the right image, title and short description appear as a preview, and you click “share.”

How does all of this work? Facebook has a set of markup codes (“Open Graph tags”) to determine title, description and preview image for your shared content. If these Open Graph tags are not used to specify which content is to be shared, the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image for your content.

Open Graph Markup

Here’s an example of content formatted with Open Graph tags for optimal display on Facebook:

Here is what the tags look like necessary to create that preview:

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

Test Your Markup

To see how your markup appears to the Facebook Crawler enter a URL into Sharing Debugger. It will show which meta tags the crawler scrapes as well as any errors or warnings.

The debugger also triggers a scrape of your page, so if you do have errors in your HTML you can use the debugger to update your content.

Best Practices

Here are several best practices to use when adding images to your website in order to get the ideal Facebook preview.

Best Practices

Learn about the best practices for implementing Facebook Sharing for your websites and mobile apps to build app experiences that people understand and trust.

• Implement the Facebook Crawler to generate a preview of your publicly available Facebook content.
• Use Open Graph meta tags to ensure the Facebook Crawler scrapes useful information, such as title, description, and preview image, about your website when it is shared on Facebook.
• Use the Sharing Debugger tool to test how your websites are viewed by our scraper. The debug tool also refreshes any scraped content we have for your websites, so it can be useful if you need to update them more often than the standard 24 hour update period.
• Use images that are at least 1080 pixels in width for best display on high resolution devices. At the minimum, you should use images that are 600 pixels in width to display image link ads. We recommend using 1:1 images in your ad creatives for better performance with image link ads.
• Pre-cache your images by running the URL through the URL Sharing Debugger tool to pre-fetch metadata for the website. You should also do this if you update the image for a piece of content.
• Use og:image:width and og:image:height Open Graph tags to specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.

Much of this work can be done using a decent SEO plugin (we use SEOPress Pro – because it’s awesome and it’s French), or with various other plugins that specifically address Open Graph settings. If you need help with any of these topics, reach out and ask – we love debugging Facebook previews!