Once you’ve added the Smart Layers code to your page, there are a couple things you should know so you can optimize how the What’s Next and Recommended Content layers display on your site. Smart Layers uses Open Graph meta tags to determine how to display links to your pages, and to specify which content is shared from your page.
Open Graph Tags
For those of you who don’t know, Open Graph is a standard supported by most social networks and services that determines, say, the summarized information, image, and title that shows up when you share a link to Facebook. OG Tags are a type of meta tag that are prefixed with og:, then add a more specific property to be set.
The minimum recommended tags for proper display are
og:title (for the title),
og:image (for the thumbnail image), and
og:url (canonical/permanent url of the page).
You will want to place these tags in the
<head> of your web page. If any of these tags are not present, the Smart Layers user experience may be suboptimal, and will degrade to available information; for example, it won’t show the image, and will use the url as the title.
Here are a few examples of how to use these tags:
<meta property="og:title" content="AddThis Smart Layers: Personalizing the Web" /> <meta property="og:image" content="http://farm6.staticflickr.com/5486/9262576856_3e294841e2_o.png" /> <meta property="og:description" content="Introducing the next generation of web tools: AddThis Smart Layers." /> <meta property="og:url" content="http://www.addthis.com/blog/2013/07/11/addthis-smart-layers" />
For more information about the protocol and additional Open Graph tags that can be added to your site, check out The Open Graph protocol.
Keep in mind that these updates take a little while to show on the Recommended Content and What’s Next Layers. Give it 24-48 hours for this analysis, but if the site doesn’t get a lot of traffic, it may take a bit longer to gather enough data to determine what to recommend.