How to Enrich Your Posts With Twitter Cards

• Download code for the extension from GitHub

Introduction

I am a big fan of the semantic web. Even back in the university days before Facebook and Twitter were yet to be popularised or invented, nah I cannot be that old. Any way the semantic web was always an area of interest. The concept behind the web being read and explored by only people with browsers was always questionable.

Do not worry I am not going to give you a new article about how to optimize your web site for extraterrestrial creatures though that would be so original, no this article is about bots and ways how social media platforms might consider extracting your content. Mostly, this article is about how to help Twitter render your content better with How to enrich your posts with Twitter cards.

The idea of rendering your content nicer to its reader is of mutual benefit, ok for those of you about to Google mutual benefit, it means that the social media platform, in this case, Twitter benefits in showing the followers decently rendered content. Also the content provider also knows as the blog owner will benefit if he can decide what and how this content is displayed when a link is shared on Twitter. Note mutual benefit is also referred to as Win Win situation but mutual benefit sounds more nerdy :)

So the Benefits of Twitter Cards are Clear, Next We Proceed to the How

The concept of putting tags into the HTML in order to pass hidden messages to robots existed since the beginning of the web and this is what HTML versions are about. For example, such tags were used in meta tags for web engine crawlers. These crawlers before they became as intelligent as they are today depended on such tags to know what your web site was about. Well, that did not last for long as evil web-masters started cheating so Google got wiser. Now Google is back to encourage tags for other reasons but this will be discussed in another topic to come soon Google and JSON-LD .... promise

Still Twitter and Facebook are happy to let you implement specific tags that tell the platform what is what in your page. In the developer overview, we have a good example of what a twitter card needs to have and how it will look.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

And if looking better than all the others is not enough... Twitter is so encouraging for web developers to define their twitter meta-tags that is ready to provide us with several freebies. Twitter promises that if we enrich our Tweets with Twitter Cards, it will give us a greater insight into your URL clicks, app installs, and Retweets. Sounds like a done deal.

Automating Twitter Cards For Blog Content

Here comes the cherry on the cake or better the olive in your martini. Twitter card meta tags can be easily automated if you are using a decent CMS. I am sorry I do not do wordpress at least for now, but if you are a fan of blog4Net or any other .NET blog engine, you can refer to my quick extension. My code resides on github TwitterCard.cs.

Quick and very straight forward implementation, I created a typical BlogEngine.NET.Custom.Extensions. This will facilitate enabling and disabling the extension.

Then I created a new event on page load and detected that it is loading a full article. I accessed the page HTML and added the meta tags as indicated in the Twitter card example. Replace the content value off the tag with blog related information as instructed on Twitter developer example.

post.Description
post.AbsoluteLink.ToString()
post.Title

Next, thanks to a regex expression, it will match the first occurrence of an image and return the source part. To include this extension, you will need to create the TwitterCard.cs class in the extension directory 'BlogEngine.NET\Custom\Extensions' rebuild and publish. The extension will be ready to deploy and can be enabled or disabled from the blogEngine settings.

Last But Not Least - Validate Your Cards

Once you have the required meta-tags check page source to confirm, you should run the validator to get white listed and be sure that your tagging is done right. The Twitter validator can be used to whitelist your Twitter cards. If the validator does not allow you to preview the card, it is likely that you have something wrong in your tags. I personally found the Twitter cards summary page very useful. The validation process is very straight forward. Just paste the url press validate and if you get a warn not whitelisted error than you just need to press the register button. UHU

Code for the extension can be copied from https://gist.github.com/Drinu82/830d1c9e5acc746ca652.js and feel free to ask me if you need any further details.