Social Metadata: Present Your Best Self on Social
Chances are that social media represents a good chunk of incoming traffic to your site: You share blog posts, embedded videos, concert info, etc. Now how does the link look like when you share it on Facebook? Or Twitter? Are you leveraging social metadata?
When I share my homepage on Facebook, for instance, I get:
The preview shows:
- a page title
- an image
- a summary
- the domain of the website—not the address of the page
- sometimes, the author
Why is that important?
For about 30% of your visitors (in average), this is probably the first impression of you, your art, your music, your business, etc. You could see it as a social business card and the great thing is that you actually have control over what is being displayed, from the copy, to the heading or image.
Let’s see how you can claim ownership of this to present your best self on social.
How does social metadata work?
When you share a link on a social network, the <head> section of the page is crawled to look for social meta tags that help build the page preview. I’m sure you’ve heard of the description meta tag or the keywords meta tag that look like this:
Well, social meta tags don’t look much different.
There are multiple protocols in place, but I’ll talk about Open Graph (used by Facebook) and Twitter Cards (used by… Twitter :). Other social networks (like LinkedIn) simply rely on this metadata, meaning that if you optimize for Facebook, it will also look good on LinkedIn. Similarly, Google+ Snippets [defunct] rely on Schema.org metadata, but Facebook’s Open Graph data should work just fine.
Open Graph
If you’re coding your pages, here is what the code looks like:
Social metadata syntax is quite simple: a property followed by its content. Note the absolute URLs.
For more details, visit Facebook’s Sharing Best Practices.
Twitter Cards
Twitter presents its metadata in cards. There are 4 cards types:
- Summary Card: Title, description, thumbnail, and Twitter account attribution.
- Summary Card with Large Image: Similar to a Summary Card, but with a prominently featured image.
- App Card: A Card to detail a mobile app with direct download.
- Player Card: A Card to provide video/audio/media.
Depending on the card type you pick, the syntax will vary.
If you’re using a Player Card, you’ll also have to whitelist your site in order for this metadata to display when a page/post is shared.
For more details, visit Twitter’s Developer’s Documentation, including a great guide for CMS integration.
This is gibberish! Help!
You don’t code your own site? No problem!
If you’re using a Content Management System (a CMS—WordPress, Squarespace, Drupal, etc.), you might have to either change some advanced social metadata settings (see how you can connect your Squarespace with Facebook or Twitter) or download a plugin. WordPress users can look into Yoast SEO or Jetpack.
Time to test/debug your social metadata
When your code is in place, it’s time to make sure that everything looks OK.
Facebook and Twitter have tools to help you do that:
The Facebook Open Graph Object Debugger is also helpful when you notice a typo in your metadata or you decided to change the image you use. The tool will let you refresh what Facebook has cached.
It’s a bit more complicated to refresh the metadata for Twitter Cards, but there is some documentation on this.
Another way to quickly check the metadata on pages is to install the Moz SEO toolbar. I use it about 15 times a day…
Comments? Questions?
Are you keeping an eye on this information when you’re building content? Are you having issues? I’d love to hear from you. Chime in below!
