How to Add Twitter Cards in Titan CMS

How to Add Twitter Cards in Titan CMS

*Important Note: The following information only applies to users with Titan CMS v.6.7 or higher. 

Unless Twitter changes its ways and expands the character count to 10,000 per tweet, marketers don’t have much real estate to work with. So we must take advantage of every inch and every trick – Twitter Cards, for example, can sneak rich information into each tweet and draw more traffic to your website.

Example of Twitter Card

How can I add Twitter Cards to my Titan CMS website?

Simply add a few lines of HTML to your webpage, and Twitter will attach a custom-made card to any tweet that links to that page.

Sounds easy enough -- but wait! You know nothing about HTML! Calm down. You don’t have to. Follow the steps below and your Twitter Cards will be up and running in no time.  

First, go to this Twitter website and scroll down to the “Drive engagement from your Tweets” portion of the page.

This section offers four different versions of Twitter Cards: Summary Card, Summary Card with Large Image, App Card and Player Card. Click through and read about each option before selecting the right card for your business. In this example, I will create a summary card for one of our blogs on Content Marketing.

The summary card webpage provides a small snippet of code.

Copy this text and paste it into Notepad or Word document, so you can easily edit the copied text.

Now it’s time to enter your own information into this code snippet. It’s not as scary as it looks. Simply sub in your text after the word “content” in each line. Let’s break it down, step by step.

Tweaking your Twitter Card Code

  1. Leave the first line of text alone. (See? This is easy!) This first line merely states the type of Twitter card we decided to use, in this case the Summary Card.

Example: <meta name="twitter:card" content="summary" />

  1. I want to make sure to include the Northwoods Twitter handle, @Northwoods, in any share of a link to this blog. So in the second line of text, I will take out the “@flickr” and swap in “@Northwoods.”

Example: <meta name="twitter:site" content="@Northwoods" />

Note: Be sure to leave the quotations marks around your content.

  1. Next, I will insert the name of the blog into my Twitter card. I will replace the part of the sample code that says “Small Island Developing States Photo Submission” and input the title of my blog.

Example: <meta name="twitter:title" content="The Hard Truths of Content Marketing" />

  1. Almost done! Next add a brief description of what users can expect to find when reading this blog. I will replace the part that says “View the album on Flickr” with my own descriptive text.

    Example:  <meta name="twitter:description" content="Learn to overcome common content marketing challenges that B2B manufacturers face every day." />
  2. Last step: Create an image. The summary card uses an image that is 125 by 125 pixels. Once you have created your image, upload it to the file pile within Titan CMS. Find the link to the image in the image properties.

              Grab this link and replace the link that Flickr uses in the sample code.

Example: <meta name="twitter:image" content="" />

That’s it! You just created the code you need! Pretty cool, huh? Just drop this code onto your webpage and your Twitter card will be up and running.

What? You want to know where should you put it?

I knew you would ask that.

Where to Put Your Twitter Card Code in Titan CMS

Navigate to the blog or webpage for which you created your Twitter card. In the page properties, find the field titled “Additional Metatags, Scripts, CSS, etc.” Paste you code into this field as shown below:

Now save and publish your work!

Validate Your Twitter Card

It’s quiet… too quiet. No fireworks or musical TA-DA! No accomplishment ribbon. How do you know if it worked?

Visit the Card Validator and enter the URL of the webpage where you dropped your code. This validator will let you know if your Twitter Card is set up correctly. It will even give you a preview.

We digital marketers love measurement. So monitor your card’s performance in the Twittersphere, via Twitter’s Analytics.

Originally Published: Tue, October 25, 2016