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.
No comments:
Post a Comment