Social metadata and your website

16:35 Mar 13th - Alex

How socially connected is your website? When users share or search your content on social services, a few simple lines of code can greatly improve their experience. Whether you’re displaying your profile picture in Google search results or using a Twitter “card” to preview your content, simple metadata can improve your website’s appearance online.

What is metadata?

Meta data is code added to the header of a website

Metadata is code added to the header of a website

Webpages often include metadata in the form of meta tags. Most search engines use this data when adding pages to their search index. This is coded into the website’s header, and most CMS, such as WordPress, automatically add these tags for you.

As social networks have become more prominent, certain services such as Facebook and Twitter have started specifying their own tags to integrate your website deeper into their platforms.

Facebook Social Graph

Content using Meta Tags when being added to your Facebook profile.

Content using meta tags when added to your Facebook profile.

Your website can be more integrated with Facebook using the Open Graph Protocol. This process involves adding meta og:tags to the header of your website. Again, most CMS platforms do this automatically. One of the main uses for this is when using ‘like’ buttons or when a user posts a link to your website. This has the following benefits:

  • When you share content on your timeline, a preview is provided within the post, including an image, description and link.
  • When a user clicks a ‘like’ button on your page, a connection is made between your website and the user. Your page will appear in the “likes and interests” section of the user’s profile.
  • You can target ads to people who like your content.

Twitter ‘cards’

Example of a Morph London Twitter "card".

Example of a Morph London Twitter ‘card’.

Twitter ‘cards’ make it possible to attach media experiences to Tweets, which users post with a link. Once the correct Twitter meta tags have been added to your website, your content will have a ‘card’ added to the Tweet that’s visible to all of their followers. This includes the following benefits:

  • An image or video as well as short description will be displayed on the card.
  • Content attribution displays your website’s Twitter account next to the content so users can follow you directly from Twitter.
  • You can also add the author’s Twitter account on the ‘card’ as well for extra promotion.

Google+ Authorship

Nathan Harrigan's author picture appearing in Google Search results.

Nathan Harrigan’s author picture appearing in Google Search results.

Google+ authorship allows you to link content that you publish on your website to your Google+ account. Most importantly, this allows your picture to appear next to your posts within Google search. To make this happen isn’t really related to meta data but I thought it was relevant including it in here anyway. All you have to do is include a byline “By Your Name” next to the content. “Your Name” must match your Google+ profile. And you need an email on the same domain as the content. Then all you have to go is activate your site here.

The above code and content improvements are very simple to implement and can have a great impact on the appearance of your content on these third-party sites.

comments powered by Disqus

The Author

Alex McFarlane

Alex's technical background spans development, emerging technologies and technical direction. Specialising in innovation Alex has years of technical experience across websites, social media technologies and mobile.

View alex mcfarlane's profile on LinkedIn