Social networking on the internet is a great way to increase traffic to your website. A lot of people these days have a social network account, but if we look a little into the future, with my magical all telling glassy ball, we can see almost everybody having some sort of account whether it be on Facebook, Twitter, Google+ or many of the other social networks that are available.
The use of Social networks in SEO is already important as you can now create Facebook and Google+ pages for your business helping to target local customers and drive traffic from the networks to your website. The best way to do this and to create a professional look to your posts and tweets is to use Open Graph meta tags and Twitter Cards.>
Open graph meta tags are a new protocol designed for websites to help better represent websites on the social networks. Facebook and Google both use open graph meta tags while Twitter uses its own protocols which are called Twitter cards.
Open Graph Meta tags, Twitter Cards and W3C validation
Neither of these protocols are validated by W3C so if you are a stickler for validating webpage’s be prepared to have your nose put out for a while, or at least until at some point W3C makes them valid. But don’t worry too much as even though your webpage’s will not validate anymore, they will still be just as valid and with the addition of the social networking meta tags will improve your websites profile.
How many Open Graph Meta Tags do I need
There are 5 open graph meta tags and 4 twitter cards which are essential, although you may get away with a couple less and of course you may even want to add a couple more, but the following will achieve the desired effect on Google+ Facebook, Twitter and LinkedIn.
The 5 Open graph Meta tags in the order they are placed on my website are as follows:
<meta property=”og:image” content=”http://www.yourwebsite.co.uk/images/buttons/image.png” />
The open graph ‘image’ meta tag should have the absolute path to the image to which you want displayed when you make a post on a social network. If you’re using a social media management application like Hootsuite then you can choose another image which will sometimes override the open graph image.
<meta property=”og:title” content=”your enticing seo title” />
The open graph ‘title’ meta tag is the same as your webpage title tag it can however be a different title to the one you use as your main title but must in the same way relate to the content on that page and be around the same lenght as your main tilte tag at around 70 to 90 characters.
<meta property=”og:url” content=”http://www.yourwebsite.co.uk” />
The open graph ‘url’ meta tag is to let the social networks know the exact location of your webpage on your site and should also be the absolute path.
<meta property=”og:description” content=”Your description don’t forget can be up to 300 characters! And up to 200 for Twitter” />
The description open graph meta tag follows the same rule as the title tag so it can be different from that of the main description but must relate to the content of the webpage. You also get quite a few extra characters up to 300. Twitter will also use this description and will show up to 200 characters.
<meta property=”og:type” content=”website” />
The ‘type’ tag helps the social networks to recognise the type of content you are sharing. If say you were sharing the main index page to your website then you may use as above ‘website’ however if you were posting a blog then you would use ‘blog’ or if an article then ‘article’. There are quite a few content types and work mostly for Facebook however the schema for other social networks may differ. You can view the different Facebook types here.
The Essential Twitter Cards Meta Tags
Twitter cards are great way to enhance your tweets and engage your followers. They give you the opportunity to place a link within your tweet to a page on your website and allows you upto 200 characters in the description along with an image, gallery or video. The process is quite easy and you do not have to use all the Twitter meta tags as Twitter will recognise the open graph meta tags to. But in order for the cards to work then these 4 meta tags are essential for Twitter to be able to validate your cards.
<meta name=”twitter:url” content=”http://www.lakanephotography.co.uk”>
As with the open graph ‘url’ this tells Twitter the absolute path to your webpage.
<meta name=”twitter:card” content=”summary”>
The Twitter ‘card’ meta tag determines the style of your card, ‘summary’ will cover most links ie if it is for a blog article or website however you can also use cards to display photo’s video apps and products. You can read more about the types of cards here.
<meta name=”twitter:creator” value=”@LeeAllanKane”>
<meta name=”twitter:site” content=”@LeeAllanKane”>
The Twitter ‘creator’ and ‘site’ meta tags are essential for the validation. If you do not have a Twitter account for your website then just place your Twitter id. When you apply for validation of your Twitter cards these two meta tags must be in place and correct for Twitter to validate the ownership of your website. You can find out more information about this here.
You can, by using more Twitter card meta tags ie;
display a different description title and image. But Twitter will fallback to the open graph meta tags if the above tags are not displayed.
What will my posts and tweets look like after adding Open Graph and Twitter meta tags.
Once you have placed the meta tags in your <head> section next time you make a post or a tweet they should display like my examples below.
I use Hootsuite to publish all my posts so i chose a different image for Facebook and Google plus. Twitter and LinkedIn displayed the meta tag images. Hootsuite also makes publishing Twitter cards much easier.
None of it works perfectly, but then this is all in a development stage. But by utilizing the above code in my website, i have increased my readership through making the posts more appealing and attractive than the average post and link, to which you get without them.
*All logos and trademarks used are registered trademarks of their respective owners.