3KITS is a leading Website Design and Development company in Hyderabad. Our company provides all services related to Web Design, Web Development, Software Development and SEO. 3KITS has the team of experienced Website Designers and Website developers in Hyderabad, India.
Wednesday, 16 July 2014
Add social meta tags to your website without plug-ins
When you come up with an awesome new blog post, the first thing that comes to your mind to reach a wider audience is sharing on social media. Evidently, there is no better platform than social media to share your content, target your local customers and drive massive traffic to your website, but do you know how to optimize your web content for social sharing?
Usually, social networking sites are really smart in pulling in the right content for posting. But sometimes the problem occurs when the content shared by your admirers doesn't appear properly on their social accounts pages. Fortunately, there is a way through which we can exactly define how titles, images, description, and more should appear on social streams of our followers.
Almost every one of us knows about title tags and meta description tags, but many of us don't know about many other meta tags that social networking sites such as Facebook, Twitter, Google+ and Pinterest also read. The reason why these sites have started using special metadata is to give the audience better visibility by making the content sharing process flawless and easier.
As each social network site has its own social media tag, knowing exactly which one to include proved to be very confusing task. For instance, Google+ and Pinterest prefer to use Schema tags, but they also recognize Open Graph Protocol tags, that are preferred by Facebook and LinkedIn. On the other hand, Twitter has defined its own tags which are called Twitter cards.
Let's take look at how you can leverage all these social meta tags.
Open Graph was introduced by Facebook in 2010 to promote the integration between Facebook and other websites. It allows any web page to become rich 'graph' object, which have the same functionality as any other Facebook object. Here's an example:
In simple words, Open Graph is a way of controlling how information will travel from a web page to Facebook. To leverage Open Graph tags, you need to place them between the <head> </head> section of your web page.
Below are the most commonly used Open Graph tags:
og:title: This is the title of your content that that Facebook populates in the snippet. It is similar to the html title tag that search engines use. Though Facebook doesn't have limit on number of characters in title, but it's better to keep the character count between 60 and 90.
<meta property="og:title"content="Social Meta Tags"/>
og:description: This is where you describe what your content is about. Keep it up to 300 characters.
As we mentioned earlier, LinkedIn also supports Open Graph tags to control how your web page should be displayed when it is shared. So once you've implemented Open Graph tags on your site, it will also work for LinkedIn.
Similar to Facebook's Open Graph tags, Twitter Cards empowers you to attach media experiences to Tweets that link to your content. Currently, Twitter offers nine different card types that can be attached to tweets.
Summary Card: Default Card that includes a title, description, thumbnail, and Twitter account attribution.
Summary Card with Large Image: It is similar to default Summary Card, except it allows you to feature an image with extra details and attribution.
Gallery Card: A Card with an album of four photos.
Photo Card: A Card with Tweet sized photo.
Player Card: A Card to provide audio, video, or any other type of media.
App Card: A Card featuring a mobile app with direct download facility.
Product Card: A Card to show off product.
Lead Generation Card: A Card for driving leads for your product/service.
Website Card: A Card featuring your website to drive traffic via clicks.
All of these cards can be extended with App Installs and Deep-Linking.
Note: Both Lead Generation and Website Card are available via the Twitter Ads Dashboard.
Here is the example:
Like Open Graph tags, the Twitter card tags also take place in the <head></head> section of your website code. The most commonly used Twitter card tags are:
twitter:card: This tag, which is very similar to og:type, lets you describe the type of content to be shared. You can choose from the nine different card types described above, and the default card type is "Summary".
Though both Google+ and Pinterest offer support for recognize Open Graph Protocol tags, but they prefer using Schema.org microdata markup to generate rich snippets. Using microdata markup doesn't only help search engines present your content in a useful and relevant way, but also improves your site's SEO.
Here's the example for Google+:
To use microdata with an article, you need to use the declaration given below within your HTML tag.
<p itemprop="description">Description under 156 Characters</p>
Once you've annotated a web page with Schema.org microdata, Google+/Pinterest will display the properties: name, image, and description found on any schema.org type in social snippets.
Social meta tags in WordPress
In WordPress, there are two ways of adding Social Meta Tags to your site. One is by using a plug-in - like SEO by Yoast, SEO Ultimate, etc - and another one is through header.php.
Most of the people use plug-ins to implement Social Meta Tags on their WordPress site, but there are few who know how to make use of these tags via header.php. Here I'm showing you how you can integrate Facebook Open Graph, Twitter Cards, and Google+ tag in your header.php file.
To do this, you need to add some code to your header.php file. Open your header.php file and paste the following code before</head> tag.
Just because you've added Twitter Card tags to your site doesn't mean Twitter Card will work. To get a Twitter Card activated for your site, you need to validate it using Twitter Card Validatorand apply for approval. Once your card is approved, it'll start working.
Debugging and validating Tools
All major social networking sites have their own Validator or Debugger that enables you test how links will be displayed when shared on social streams. Following are those tools: