Have you ever been on Facebook scrolling through the wall and see someone’s post linking to an article? You probably saw the message your friend shared when he or she posted the link, followed by a large image that seems to represent the page. Below the image are the article’s title and the first line of a description (shown truncated with ellipsis if it is too long.)
Here’s a post in my feed shared by Senator Elizabeth Warren about the housing crisis.
Notice the large image, above the website’s domain, above the headline of the article, above a portion of the intro text.
Today we’re going to cover how to set all of that for your page. In fact, there isn’t much you as the marketer do— this is a job for the web developer. When your CMS or blog correctly publishes what is known as “open graph” tags, all of this information is set for you: the image, the headline, and the description.
Meet the Facebook Open Graph Debugger, also known as the Sharing Debugger.
These things can be examined, debugged, and re-scraped if you want to clear Facebook’s cache. That’s correct: this unique tool both lets you examine how Facebook looks at your page and will display the preview when shared.
In particular, you’ll note that by default Facebook only re-scrapes and looks for changes to this URL once every 24 hours. However, if you use this tool, you will actually be making Facebook re-scrape the page in realtime (near realtime), which will affect the previews for all users across Facebook.
That’s an interesting quirk to be aware of.
For developers, the open graph protocol is documented here. In short, the HTML markup of the page should contain meta tags which determine how Facebook (and other social networks like Twitter) pull the preview content and display it.
Take for example this example from Facebook’s developer documentation. Notice there are 5 open graph tags: og:url, og:type, og:title, og:description, and og:image.
These five element insturct social media platofrm how to display the preview in the social media feed.
You will notice that both the title and description appear in the preview box, but sometimes the description is truncated for size, as is the case with the example above.
What great about the OG debugger is that you can use it to correctly confirm that your webpage is generating the right tags. Also, if Facebook scrapes it once (for example, if you share it in your Facebook timeline), remember that Facebook won’t re-scrape it again for 24 hours unless you use the OG debugger tool. When you do Facebook re-scrapes the content — changing the cache for all users of Facebook — immediately.
Beucase the preview is stored within the post, you’ll want to make sure your OG tags are correct before you start to publish or promote your article or page to social media.
Your article helped me a lot, is there any more related content? Thanks!