THE RKGBLOG

Optimizing Social Link Snippets for Facebook, Twitter & Google+

So, you’ve put time and effort into publishing quality content across your social media profiles, or maybe you just published the content to your site and want users to share it. Either way, Facebook, Google+ and Twitter can help make your content more shareable with rich snippets of content that can be shared across platforms. These snippets are platform-specific and include detailed information about the content being shared, displayed in a user-friendly way.

For purposes of this blog post, we are going to focus strictly on sharing links to content on your site. However, Facebook, Twitter and Google+ all offer similar types of snippets for additional content or media such as images or videos.

Facebook Best Practices

Facebook designs a social snippet for a link that includes 4 pieces:

  • Link image
  • Link title
  • Link domain
  • Link description

The link snippet is in addition to your profile image thumbnail, your page title, and any content you wish to publish in addition to the link. When sharing a link, your post content can include an introduction to the content or commentary about that content. 

Facebook determines what information to pull by looking for schema built into the code of the page being linked to. Facebook uses Open Graph Schema to allow content creators to inform the content pulled to populate these snippets.

Ideally, there are 5 Open Graph tags for pages shared as links:

  • “og:title” will be the title that Facebook populates in the snippet, which doubles as anchor text for the URL that is being shared.
  • “og:type” will be “website” for content shared as a link.
  • “og:image” lets you specify the URL of the image you wish Facebook to use in the link’s rich snippet. Facebook recommends a “thumbnail size” image of at least 120×90 pixels. If an image is too large, Facebook will shrink it to fit.
  • “og:description” will be the description that will be displayed in the snippet.
  • “og:url” is the canonical URL for the content being shared.

It is important to keep in mind that Facebook does not have hard character limits for titles and descriptions. However, the snippet will include a hard limit of 5 lines of text including the link title, the link domain, and the link description. As the domain almost always takes only one line, in addition to the example above, you can choose to have Facebook display 1 line of title, 1 line of domain, and 3 lines of description (which will buy you about 150 characters of description), or 3 lines of title, 1 line of domain, and 1 line of description (where Facebook will limit your title to 100 characters). You control the title and description ratio by the number of characters used in the Open Graph title tag. The shorter the title, the more room for a description.

Facebook Alternatives

What happens if you don’t implement Open Graph Schema? Facebook will search your metadata and try to put together it’s best guess of what should be there, which may not match what you think should appear in your snippet. Facebook will choose an image for you, which may be an image you don’t want to be associated with your content.

Twitter Best Practices

Twitter has recently released rich snippets called “Twitter cards”. Twitter’s “summary card” is the rich snippet generated for links shared on the platform. While cards are still being rolled out, Twitter is currently asking content creators to apply for the program after implementing the schema. Whether or not you apply now, we still recommend getting in the habit of using this schema, as cards will continue to roll out in the near future. Cards can be accessed by a link generated at the bottom of a Tweet:

 

Twitter’s summary card includes 3 pieces:

  • Link image
  • Link title
  • Link description

A summary card also includes information that is not link-specific including your profile image thumbnail, your Twitter name and handle, and any content you wish to publish in addition to the link. It also displays dynamic Tweet information below the link content including your Twitter name, your Twitter handle, number of retweets, number of favorites, and thumbnails for users who have retweeted or favorited the Tweet.

Twitter pulls this information from the page using a similar schema markup we’re calling Twitter Schema. Ideally, there are 5 Twitter Schema tags for Twitter to pull information for the summary card:

  • “twitter:card” tells Twitter what type of card to generate, in this case “summary”. It will default to summary if not included in the metadata.
  • “twitter:url” is the canonical URL for the content being shared.
  • “twitter:title” is the title of your content as it should appear on the card, which doubles as anchor text for the URL being shared. Twitter will only display the first 70 characters.
  • “twitter:description” is the description of the content, with a maximum of 200 characters.
  • “twitter:image” lets you specify the URL of the image you wish Twitter to use in the card. Twitter recommends an image greater than 60×60 and smaller than 120×120 pixels. If it is greater than 120×120, it will be shrunk to fit, if it is smaller than 60×60, it will not be shown.

Twitter Alternatives

What happens if you don’t implement Twitter Schema? If Twitter wants to create a card with your content and it does not find Twitter Schema, it will fall back on Open Graph Schema. It is important to keep in mind that Twitter and Facebook support different size images and different character limits for title and description.

Google+ Best Practices

Google+ designs a social snippet for a link that includes 3 pieces:

  • Link image
  • Link title
  • Link description

The link snippet is in addition to your profile image thumbnail, your profile title, and any content you wish to publish in addition to the link. Again, the post content is a great place for a summary of the content.

 

Google+ finds this information in schema tags, just like Facebook and Twitter, but Google+ relies on markup from Schema.org. Google+ will use the name, image, and description properties of any Schema.org type. Just make sure that you have tags that are optimized for Google+.

A Google+ link snippet will display a title of about 140 characters, and it appears that there is no character limit for link description. However, we recommend keeping it around 185 characters to ensure the information is user friendly. Images used in Google+ snippets should be 150×150 pixels.

Google Alternatives

If Google+ does not find markup from Schema.org, it will pull data from Open Graph tags you may have set up for Facebook. Again, keep in mind that Google+ allows for a longer title, longer description, and recommends a larger image. If your image is optimized for Facebook or Twitter, it may not be displayed correctly or at all on Google+.

News agencies such as ABC News or the Weather Channel offer examples of how utilizing schema for social can pay off not just on social platforms, but also offering images and text for Google’s SERP when users search for current events.

We recommend implementing all three types of schema (Open Graph, Twitter, and Schema.org) to ensure that you are taking advantage of the different opportunities across social platforms and to ensure that your snippets show the way you want them to across social platforms. It may be easier to rely on Open Graph for all three platforms, but just be sure you understand how each platform will use those tags individually to ensure that your content is being represented the way it should be.

  • Melissa Addison Garza
    Melissa Addison is a Social Advertising Analyst at RKG.
  • Comments
    6 Responses to “Optimizing Social Link Snippets for Facebook, Twitter & Google+”
    1. Dirk says:

      I try this to use these snippets. Thanks Dirk

    2. Dirk says:

      I do not understand where the rich snippets from facebook show? Is it show in Google serps or is it show in bing serps?

    3. Dirk,

      The schema I’m describing helps the individual social platforms create rich snippets to be shown on the social platforms. So, Open Graph schema tags help Facebook create a rich snippet to be shown on Facebook.

      However, Google SERPs do pull Schema.org schema, so you can set up schema for the Google SERP and have that information pulled to be shown on Google+. For example, if you set up a product schema, Google will pull that information and display it as a product snippet in the Google SERP and Google+ will pull the name, image, and description from the Schema.org product schema into a rich snippet shown on Google+.

    4. Henk Matthee says:

      Melissa
      You gave again supply us with top quality tips that will definitely help me to streamline my social media marketing efforts. Keep up the good work

    Trackbacks
    Check out what others are saying...
    1. [...] Optimizing Social Link Snippets for Facebook, Twitter & Google+, RKG Blog [...]

    2. [...] optimization and social media optimization continue to blur. RKG Blog has a fantastic tutorial on how to optimize your metadata for Facebook, Twitter and Google+ schema to ensure shared content from your site appears as you [...]