When developing new websites and businesses marketing and promotion are a key part to success, because lets face it without people viewing, engaging and interacting with your website or application you literally have no reason to exist!
Our Geek.I.Am project is still very much in the development phase and everyday something new is being added a new feature here, a little tweak there and a whole lot of activity is being carried out in the background to develop the platforms and services we want to bring to the market. However, we also realise that if we don't make the market aware and engage with our target market all our efforts will be in vain.
We have over the past few months been creating and posting content on our site which we hope will provide value and create interest in our forthcoming platform, services and product offerings. We are also in the process of building up our marketing teams and activities. As a result we are gradually starting to invest some time and resources into our Social Media efforts.
Our key targeted platform at this stage is Twitter, primarily because this is where a large number of Software Developers and other Technology professionals seem to circulate.
One of the key objectives we want to achieve using Twitter is promote our posts, tutorials along with attempting to engage with our target audience. With this in mind, we have to carry out some additional development on our Gridsome based website to include Twitter Cards on every post.
What are Twitter Cards
Twitter Cards are customizable media units that advertisers can use to drive traffic to their website or mobile app. Promoted Tweets with Website Cards have 43% higher engagement rates than Tweets with links.
Twitter Cards are more attention grabbing than plain text tweets and that’s a huge plus in the over saturated social media world. They enable developers to attach rich photos, videos and media experiences to Tweets, helping to drive traffic to websites.
Simply adding a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card†added to the Tweet that’s visible to their followers.
There are currently four card types available. Though Twitter did experiment with options like lead generation cards, they decided to refine the choices offered in the last couple of years;
- Summary Card
- Summary Card with Large Image
- App Card
- Player Card
Summary Card
The Summary Card refines your web content into a snapshot image with a thumbnail, title and description. Users will be able to see the URL of your website displayed at the bottom of the card.
The idea is to give your viewers a preview of your content before they click through to your site. If you use Twitter to accelerate your blog traffic, this could be an excellent option for you.
Summary Card with Large Image
The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. Designed to provide a rich photo experience, and clicking on the image brings the user to your website.
App Card
Twitter app cards are used to attempt to highlight your exciting new app. Your app should be publicly available in the app store for Twitter to access its information. Additionally, the image and title for your app card will be pulled directly from the store.
Player Card
Video and audio clips have a special place on the Twitter platform thanks to the Player Card. By implementing a few HTML meta tags to your website and following the Twitter Developer Policy, you can deliver your rich media to users across the globe.
Twitter have a great Getting Started Guide on using Twitter cards which provides a lot more information.
How to include Twitter cards in Gridsome blog posts
In Gridsome – Configure Basic On-Page SEO I discussed how we can implement basic Meta tag information on our Gridsome Static Generated website, and how under the hood that Gridsome implements Vue Meta a vue.js plugin to enable managing the sites metadata.
We will build on that knowledge gained and the code we implemented to create the additional meta tag information to create the Twitter cards for our posts.
A basic overview of the tags we need to add to make our Twitter Cards is as follows:
Once we have added these meta tags to our posts and somebody shares our one of posts on Twitter, by dropping in the page URL in the tweet then a large image will be displayed
In order to do this we will need to edit the Post template file to add additional meta tags. In My project this file is name Post.vue, which we previously added meta information, the code before we start looked something similar too.
We now need to add our additional Twitter meta tags to this code, by adding
- twitter:card - Which in our case we setting to summary_large_image
- twitter:title - which will contain the title of the post
- twitter:description - will will contain the summary of the post we define in the CMS
- twitter:site - Which will contain the twitter account of our site
- twitter:author - The twitter account of the Author,
- twitter:image - which will contain the URl to the image we supply
We also need to include the link to the twitter widget script.
The full code for Post.vue for reference can be found at https://github.com/threenine/geekiam/blob/master/src/templates/Post.vue, this is obviously an evolving project so the code, I provide here is just a sample of what I have done and it may actually be different from what we actually implement. So it's worth checking out the actual code.
That is all that we basically need to achieve to get it working. I simply commit the code to Github and then our Netlify site deploy CI/CD process kicks and a few seconds later the change is live.
Testing you Twitter card
You can test if your card works by visiting the Twitter Card Validator and entering the URL for the post you have added.
Conclusion
We added some additional meta information to our site to include Twitter cards. Which adds a really nice touch to sharing your Gridsome blog articles on twitter. Tweets with an image will likely gain more impressions and clicks that tweets without, which for the growth of our new blog could be vitally important.
We are hustling to gain more attention in an already highly competitive space so it is essential to take the time and effort to do small things along your gradual path to success.
- What is this Directory.Packages.props file all about? - January 25, 2024
- How to add Tailwind CSS to Blazor website - November 20, 2023
- How to deploy a Blazor site to Netlify - November 17, 2023