Blog

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

Meta tags are placed in the <head> section of your pages and aren’t visible to users, but are visible to the scraper bots that social sites use to harvest the meta data. Because AddThis doesn’t control meta tags, you will have to add them to your site yourself, either by editing the pages or using a plugin for your content management system. The following is a brief summary of how different services use meta tags.

Facebook Open Graph

Facebook is the largest sharing service, and uses the Open Graph standard to determine the rich content that’s shown on Facebook when someone shares your posts. Because of this, the best place to start to determine what Facebook is sharing is their URL debugger, which is available here.

Pinterest Rich Pins

In May 2013 Pinterest released their Rich Pins framework. This allows users to create meta tags that will automatically update users of Pinterest with relevant information, such as movie times or updated pricing information. Unlike Facebook Open Graph tags, you have to apply for your rich pins to get approval.

Twitter Cards

Twitter Cards allow images, movies, and other information to show up in a Twitter post besides text. They use similar meta tags to the others mentioned, and will fall back to Open Graph tags when necessary. Like Pinterest Rich Pins, you need to apply to have your implementation accepted by Twitter.

Google+

Google+ uses something called Web Snippets to determine what content to share. They look for three types of meta data:

  • Schema.org microtags which appear inline and are the recommended way
  • Open Graph tags
  • The <title> tag and description meta tag

LinkedIn

LinkedIn, like other services, relies on the Open Graph tags to determine the content to share, though they only use a small subset of the Open Graph standard; the og:url, og:image, and og:title tags.

Smart Layers

Our own Smart Layers use meta tags to determine the image and title to display in the Recommended Content Layer and What’s Next Layer. We look for the og:title, og:image, and og:description meta tags.

Hopefully this post has given you a better idea of how to make the sharing your visitors are already doing more engaging so you can make the most out of the rich experience services are now offering.

  • Raymond Lowe

    Is there a way to hint inline to smartlayers the correct image to use as the thumbnail for ‘recommnds’ ? I understand I can use og:image in the head, but for my situation it would be easier if I could specify in the img tag for example rather than the head.

  • Unfortunately, OG tags are the only way to have images show up in Smart Layers.

  • Per

    Hi AddThis;

    I have OG tags on all my website. However, the other day I edited some of the pages on my website (normal editing) .. but the new URLs and images are not showing in my smart layers – only the old ones.

    Do you know how come?

    Per

  • madahmani

    Very useful, thank you!

  • Tony Margiotta

    I read the Open Graph protocol. All I want to do is have the appropriate photograph that’s in each of my blog articles to be represented in the appropriate “recommended” object. Right now, all of my “recommended for you” objects have 4 different article titles, (which is great), but they all have the same picture, (which is dumb).

    How can I get the right photos on each object without having to go to every single page on my website and inserting all the meta tag code for each object on every page?

  • This could be resolved if your set up your site with open graph tags. We saw your comment in that blog post (and hopefully we’ll get a video up soon), but that could do the trick.

    We can give you some tips, but we’d like to check out your site first. Have you tried emailing our support team already? If not, send us an email with your URL and we’ll check it out: help@addthis.com

  • Tony Margiotta

    I just sent an email to your support team. Thank you

  • Tony Margiotta

    I sent my website to AddThis over a week ago. I never got a response. Anybody out there???

  • We’re truly sorry for the delay; we somehow missed your email, but one of our support specialists found it and responded. Please let us know if you didn’t receive it; we want to help you find a solution quickly.

  • i have google addthis share code already on my website,did i need any other code again ? this is my website (www.myhopeconnect.com

  • Please email us with more information about what you’re trying to do: help@addthis.com

  • Thank you! I’m glad this list includes Linkedin!

  • dharampuriyaanand

    How to share specific contents from HTML page to Googleplus?

  • Could you email us with a little more detail about what you’re trying to do? help@addthis.com

  • only works on facebook :(