Social meta tags are one of the hardest things to grasp for website owners. Just like the title and description of your site, social meta tags they are hidden pieces of text on your page that will guide the social networks in how your site, and brand, should be represented in status updates, news feed posts and other social channels. When they aren't set, you're leaving your first impressions to thousands of perspective users in the hands of what Facebook, Twitter, Google and other social networks 'think' is the best way to represent your content.
Social meta tags are just like the other meta tags you've probably studied (and tried to abuse for SEO purposes) already. They are hidden tags on your page that no normal user would see. When a social network 'scrapes' the content of your page, they will use the tags to set the title, description and image, and possibly other information, about your page for when it's used in a post.
If you don't have social meta tags set, you're telling the social networks to make a guess at which content on the page is important. While they can sometimes be accurate, many times the results range from comical to non-sensical. Results range rom the 'main' image being an RSS icon or login button, to descriptions that are for some extra content in a sidebar. In short, letting the networks guess is the worst thing you can choose to do.
Quick! Which post above looks more interesting? The difference between a good post, and a bad post, is obvious. Don't let Facebook 'guess' for the content on your page when it can be so important!
Yes, you do! To the contrary, you need these tags even more! If there are any users talking about your site and posting links to your content, these tags will work for them too. That's why it's so important to be in control: a standard user sharing your content won't care if the title, description or image isn't perfect. You will! Set them up so that, even if you aren't the one sharing your content, when others do, your site will be displayed how you want it to.
There are actually dozens of different types of social meta tags you can include on a page. However, in reality, there are only 2 that you should be supporting right now. By including the tags below, you'll be targetting all 4 of the major social networks.
Open Graph tags are the most important social meta tags you can include on your site. Facebook was the original proponent of these tags, but now LinkedIn, Google+ and multiple other networks will use these tags, meaning that if you're going to target only one set of tags, these are it.
If you're using JFBConnect for social network integration in Joomla, you're already set! JFBConnect will automatically set the Open Graph tags across all pages of your site. Of course, you can easily customize the tags on a per-page basis, but you don't need to manage all of your pages.
To understand what the Open Graph Tags should look like in the HTML of your site, below is an example of the primary tags you should be using:
<meta property="og:title" content="Joomla Social Extensions"/> <meta property="og:description" content="Social network integration extensions for the Joomla CMS. Add Facebook, Google+, Twitter and LinkedIn to your website today." /> <meta property="og:image" content="http://www.sourcecoast.com/templates/sourcecoast/images/logo.png" />
Twitter uses it's own Social Meta Tag system called "Cards". These have similar syntax to Open Graph tags, but require an additional 'card' tag, which specifies the type of content for your page. "summary" is the most common type, but others card types can be used for pictures, apps, videos, galleries and more.
When implemented, an additional section will appear below any tweets with links in them. The content is taken directly from your page. It's awesome because it can provide a huge amount of extra content to the measly 140 characters and can be much, much more engaging.
JFBConnect for Joomla social network integration fully supports Twitter Card tags. When using JFBConnect, all pages of your site will automatically have Twitter Card summary tags generated, with easy ways to override the settings.
The raw HTML tags that should be set in your content for Twitter Cards look like the below example:
<meta name="twitter:title" content="Joomla Social Extensions" /> <meta name="twitter:description" content="Social network integration extensions for the Joomla CMS. Add Facebook, Google+, Twitter and LinkedIn to your website today." /> <meta name="twitter:image" content="http://www.sourcecoast.com/templates/sourcecoast/images/logo.png" /> <meta name="twitter:card" content="summary" />
Once you've added Twitter card tags to your site, you need to get approval from Twitter for your previews to show alongside Tweets. Approval is done using the Twitter Card Validator and submitting your page. Approval times can be anywhere from instant to a few days.
Once you think you've setup tags properly on a page, the most difficult thing is testing. You can share your post in each of the networks to see what happens, but that can be tedious. Worse, if you continuously Like and then Unlike the same page, you can inadvertantly mark the page as 'spammy' by Facebook.
To test your content before actually sharing, we created the free Social Debug meta checker tool. With it, you can get a quick glimpse of your page on Facebook, Google+, Twitter, LinkedIn and even search results, like Google and Bing. Additionally, Social Debug will provide recommendations for each tag that's set to guide you to the best results for each social network. Not sure how long a title should be on Facebook or Google? Not sure if your image is large enough for Twitter? Just test it and see what warnings or errors come up.
Try Social Debug out now. It's entirely free! Please use the comment area below to tell us how we could improve the checker or document social meta tags better.
