Adrian Cini

Adrian Cini - Web Developer and internet marketer personal blog

How to enrich your posts with twitter cards

How to enrich your posts with twitter cards

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 can not 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. 

Stand out from the crowd with twitter cards

Do not worry I am not gonna 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 know 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 sound more nerdy :)

Your twitter card looks like this

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. Foreaxmple 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 an other 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 over view 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 is 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.

Twitter card extension enable

Then I created a new event on page load and detected that it is loading a full article. 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

validating twitter cards

Code for the extension can be copied below.... and feel free to ask me if you need any further details.

About the author

Adrian Cini - worked in different markets like gaming , marketing, regulatory bodies, government etc. Passionate in Internet marketing, search engine optimisation and development frameworks.
Facebook
Loading