Blog

Tag: open graph tags

Optimize Content Recommendations with Open Graph Tags

We now offer a number of content recommendation widgets in the dashboard, which can be configured within minutes. Once you’ve enabled the widgets within the dashboard, there are a couple things you should know so that you can optimize how the recommendations display on your site. We use Open Graph meta tags to have the correct URL, title, and image displayed within each cell.
addthis-open-graph-tags
Continue reading

An Intro to Meta Tags & How They Work with Smart Layers

Several prominent services use meta tags to enhance the experience for their users by showing rich content, such as images and descriptions, alongside the title and URL of your page. These tags let you control how your site is branded across social networks and help drive engagement. Once you add them your users will get a much richer experience and it will drive more people to your site.

meta_tags
Continue reading

Debugging Sharing to Facebook

Unlike most of our other services, Facebook doesn’t use the data we send about the text and link to share in order to determine the content that’s posted. Instead, Facebook’s servers request a copy of your page and look for Open Graph tags you set to determine what information to display. Open Graph tags are special meta tags developed by Facebook that give you a lot more flexibility in how your content appears on a person’s Facebook Timeline.

Figuring Out What Facebook Sees

If your shares to Facebook aren’t showing the correct information your best bet is to submit the URL that’s not being shared correctly to Facebook’s URL Debugger. This tool will let you know what data Facebook has about your URL and will highlight any errors.

Facebook’s URL Debugger
Facebook’s URL Debugger

Two common errors are:

  1. Facebook not being able to access your page because your site is down or behind a firewall. This will prevent your page from being shared on Facebook at all.
  2. Missing, incomplete, or invalid Open Graph tags which will be highlighted in yellow. Facebook will use other tags on the page, such as the <link rel=“canonical”> tag and the <title> tag, along with other <meta> tags and <img> tags to attempt to infer the content that should be shared.

Other useful items on this page are Facebook’s Graph API URL for your page, which gives you access to the content that will be shared in a JSON document and a link to see exactly what Facebook sees when they scrape your page. This is helpful for figuring out if Facebook’s scraper bot isn’t able to access your page.

Tip: You can get a JSON output of the number that will show up in the Facebook Like button’s counter (so you can see what Facebook says the count should be) for a specific URL by appending the URL to https://graph.facebook.com/ like this:

Graph Output
Graph Output

Adding Open Graph Tags to Your Page

The next step is putting Open Graph tags on your page. Facebook makes a very nice tool for this on their Facebook Like button page.

Open Graph Configurator
Open Graph Configurator

This will generate your Open Graph tags for you to paste into the head section of your HTML document.

Generated Open Graph Tags
Generated Open Graph Tags

For adding Open Graph tags to your WordPress blog we recommend the Facebook Revised Open Graph Meta Tag plugin. If you’ve got a great plugin for Magento, Joomla, Drupal, or another content management system let us know about it in the comments.

Using Open Graph Tags to Their Fullest

One great thing about Open Graph tags is that they let you control very precisely how your content shows up. For instance, if you have a video site then you can have it say “John Q. User watched a video” instead of “John Q. User likes a link.” These built-in types also allow you to set other information such as the names of the actors, directors, release date, and full description. More information about the built-in types that Open Graph supports is available here. With some work you can even create custom types and actions so users can “cook a recipe” or even “spot a leopard.”

Other Services That Use Meta Tags

Other services we support, most notably LinkedIn, also use your sites meta tag information to determine what content is shared, so that’s the first thing you should check when you’re not seeing what you expect when sharing to a specific service.

Hopefully this answers your questions about Open Graph tags. If you’ve got any other questions we’re here to answer them. Happy leopard spotting!