You've probably been there.
You've spent hours writing your article, did your edits, sent it to folks around the office, read their notes and made your changes. You've included beautiful photos you took yourself and added alt text for accessibility.
You've done all the right things. "Congrats, me!" you say to yourself and click 'Publish'.
It all looks good on your website, and now it's time to share! Folks need their eyes on this.
You paste the URL of your article into Facebook and... dang! The little preview of your post is all wrong, with problems like:
- It's loading the wrong image
- The title is incorrect
- The preview text is too long
"How is it even grabbing that information?!" you yell at your laptop, cursing Zuckerberg.
Alright, calm down. There's a reason why it's grabbing that information and in the video below, I'll show you what Facebook's Open Graph protocol is doing to load in and create that preview. I'll also show you how you can get ahead of the Sharing Game* and preview what your link will look like before it's time to press 'Share' using Facebook's practical link debugger.
*mercifully, not an actual game
Meta Tags and Facebook's Open Graph Protocol
What's controlling the preview of your link is the Open Graph protocol, a series of HTML meta tags developed by Facebook in 2010. Quoting from the link, Open Graph "allow any web page to have the same functionality as any other object on Facebook".
Share it on your Facebook Timeline and it should look the same in Facebook Messenger and anywhere else it might end up online.
Without the required HTML meta tags in the <head>, your page won't be turned into a graph object, and you won't have control over the images and text that appears in your preview (Facebook will take a look at your page and just make assumptions instead).
Basic OG Properties
To get your page turned into a graph object, we need to add some required <meta> tags with these Open Graph properties:
Og:title- title of the pageOg:type- the type of object (there are many, like 'article' or 'website')Og:image- the image you'd like to have appearOg:url- the URL to the page
In the sample code in the link above, they provide how these <meta> tags would appear in the <head> of your page.There is also a wide variety of optional meta tags, but let's just get a handle on the basics for this article.
Now, if I've edited my HTML page, how can I see what it looks like before I share it with the world? What if there's something I need to change? Here comes Facebook's tool for doing that.
Facebook Sharing Debugger
Facebook has created a tool to help you preview your page. Just put in the URL and the Facebook link debugger will display errors, warnings, and suggestions of what could be improved. Note that if you're using a content management system, you'll need to have your content published and publicly visible so that Facebook can scrape it.
If you've noticed something needs to be updated, you can do that in your code manually, upload it, then 'scrape' that page again. It should then notice the new information and display the preview.
Configuring Your CMS to Automate Open Graph Meta Tags
If we're using a content management system, we can't expect our site editors to manually make the changes to the tags themselves (by the way, it's probably not possible). Instead, you'll need to configure your system to set which fields should be assigned to the proper <meta> open graph tags.
Luckily, with Drupal, there's the contributed Metatag module which includes support for Facebook's Open Graph protocol so you can control exactly which fields align with which tags.