Social Metadata and Best Practices for Sharing Online
by Jason Unger, Founder
Insights / Social Media /
Any piece of content you create for your website has the opportunity to be shared.
That’s not a new phenomenon – people have been printing out articles and emailing links to their friends and family for years. But obviously, the rise of social media has changed the game for sharing content, with a different set of technical and content needs to encourage sharing.
Ten years ago, you might have added a print stylesheet to your site to create a simpler, easier-to-read version of a page when it was printed. Today, if you want to ensure your content looks good when shared, you need a lot more.
In order to encourage sharing – and the implementation of its sharing best practices – Facebook introduced the Open Graph protocol in 2010. In short, Open Graph tags allow website owners to specify the title, image, description and URL that should be displayed when a page from their site is shared on a social network.
Without these tags, the social networks will do their best to pull relevant information from a page when it’s being shared … but in all likelihood, it’s not going to be optimal. They do the best they can, but wouldn’t it be better if you simply told them what to use?
Open Graph tags are the social metadata used to make sure your content is shared how you’d like it to be shared.
Basic Social Metadata Tags
There are four Open Graph tags that are required on every page. They’re simply added to the <head> of your page.
The tags are:
og:title
(the title of the page)
og:type
(the type of content being shared
og:image
(the image to be shared with the page)
og:url
(the URL of the page)
There’s plenty of other tags you can use, including description, updated time, and more, including specific ones for specific formats, like audio and video. The whole list is here.
Here’s an example of what the social metadata look like on our recent post about switching to HTTPS.
<meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Here's Why We Switched to HTTPS - Digital Ink" /> <meta property="og:description" content="It just makes sense to switch to HTTPS. The upsides clearly outweigh the cost and effort needed to make the switch. " /> <meta property="og:url" content="https://www.digital.ink/blog/https/" /> <meta property="og:site_name" content="Digital Ink" /> <meta property="article:publisher" content="https://www.facebook.com/dgtlnk" /> <meta property="article:section" content="Blog" /> <meta property="article:published_time" content="2016-01-13T10:58:22+00:00" /> <meta property="article:modified_time" content="2016-01-13T11:37:13+00:00" /> <meta property="og:updated_time" content="2016-01-13T11:37:13+00:00" /> <meta property="fb:app_id" content="900781750037293" /> <meta property="og:image" content="https://www.digital.ink/wp-content/uploads/https.jpg" />
You can see that there’s a lot there — but that’s good. That means we’re controlling the experience and our content is displaying how we’d like when it’s being shared.
Site-Specific Social Metadata
In addition to the almost universally adopted Open Graph tags – which are used by Facebook, LinkedIn, Twitter, Pinterest and others – many social networks have their own specific social metadata tags.
For example, Twitter has its Twitter Cards, the rich photos, videos and more that can be attached to tweets.
Twitter Cards have their own specific meta tags, including card type, @username of the website, @username of the content creator, and more. Here’s the full list of Twitter Card tags.
Going back to our HTTPS post, you can see the Twitter Card tags we use.
<meta name="twitter:card" content="summary"/> <meta name="twitter:description" content="It just makes sense to switch to HTTPS. The upsides clearly outweigh the cost and effort needed to make the switch. "/> <meta name="twitter:title" content="Here's Why We Switched to HTTPS - Digital Ink"/> <meta name="twitter:site" content="@dgtlnk"/> <meta name="twitter:image" content="https://www.digital.ink/wp-content/uploads/https.jpg"/> <meta name="twitter:creator" content="@dgtlnk"/>
A lot of it is the same as the Open Graph tags, but there’s obviously more integration with our Twitter account.
BTW, don’t forget to add a via link so tweets that share your site mention your Twitter handle.
Publishing Your Social Metadata Correctly
Thankfully, ensuring that each page on your site has Open Graph tags isn’t a cumbersome process — especially with the right tools.
The popular Yoast SEO plugin for WordPress is our go-to for populating the site with basic social metadata. It gives you the ability to automatically add Open Graph meta data, as well as social network-specific information, like a Facebook App ID, Google Publisher page, and more.
You can also set default sharing information – like a generic image – if you have a page that you haven’t yet optimized for sharing.
On each post, you have the ability to set specific titles for each social networks (if you don’t want to use the default post title or meta description you’ve already set). You can also upload specific images to be used when sharing, if your featured image isn’t optimal.
Previewing Your Shared Content
One of the best tools to make sure you content looks correct when it shared is the Facebook Debugger. Enter in the URL of your page and the Debugger will scrape it and display all of the tags it’s found.
On Twitter, use their Card Validator to preview your page before it’s shared.
Sometimes, you’ll need to have it fetch new information (especially if you’ve recently updated the social metadata). But that’s good – you want to make sure everything the Debugger is displaying is what you want to be shown.
It even gives you a nice little preview of how your content will be displayed on Facebook.
There’s No Reason to Skimp Out
It doesn’t take a lot of time to make sure your pages are optimized for social sharing, so there’s no reason to skimp out.
If every single one of your pieces of content uses the same image for sharing, how will they ever stand out from each other? Adding social metadata is a best practices requirement now, so make it part of your routine.
About Jason Unger
Jason Unger is the Founder of Digital Ink. He built his first website on Geocities, and hasn't looked back since. Digital Ink tells stories for forward-thinking businesses, mission-driven organizations, and marketing and technology agencies in need of a creative and digital partner.
Other Stories You May Like
