New Feature: Twitter Card Integration

Twitter recently released a new opportunity for website owners to enhance the way their content is displayed when it is shared on Twitter. It's called Twitter Cards and today we're announcing automated integration of Twitter Card tags for every website on the LightCMS platform. Get more details below.

How It Works

Twitter Cards work in much the same way as Facebook's Open Graph. That is, they look for special tags included in the headers of your web pages and use the information included in those tags to construct visual representations of the content on your pages. When people include a link to a page of your site in a tweet, Twitter includes the Twitter Card along with the tweet so people get a nice summary of your page right inside their Twitter feeds.

Enabling Twitter Cards on your website can increase the visibility and visual appeal of your content when it is shared by others on Twitter. It can also encourage more people to follow you if you highlight your own Twitter account by including the appropriate tag (more on this below).

The Required Fields are Automatic

The first step in setting up Twitter Cards is to place the required tags on your website. Fortunately, we've already done that for you. The tags are active on your LightCMS websites right now!

Most of the required pieces of content are already specified by LightCMS's Open Graph tag integration. Twitter uses Open Graph content if no Twitter-specific content is provided. They do this so that site owners can avoid duplicating all of this information. We have relied on the Open Graph tags already present as much as possible, but there are a few Twitter-specific tags we had to provide, as follows.

twitter:card
This tag is specific to Twitter so there is no Open Graph equivalent to fall back on. LightCMS sets the card type for every page to "summary" by default. This is by far the most common Twitter Card type. There are only two types of cards besides summary -- photo and player. These additional types can be used in specific cases where your entire page is dedicated to featuring a single photo or some type of playable media. If you want to set a specific page to a different card type, you can do so by including your own tag in the "Additional Header" field for that page, and that tag will override our automated tag.

twitter:image
Facebook allows for multiple Open Graph image tags to be included and generally uses the first one included on your page as the default. Wouldn't it be great if Twitter would also use the first Open Graph image? Sure it would! But alas, they don't. Twitter uses the last Open Graph image on the page. Why can't we all just get along? Anyway, to fix this issue, LightCMS adds a Twitter-specific image tag that essentially tells Twitter to use the first Open Graph image on the page (if you'd like to review how our system generates Open Graph image tags, see our blog post about Open Graph).

twitter:description
Description is an optional tag for Open Graph, but it is required by Twitter. So, we generate a Twitter description for every page, if possible. We first look for a meta description. If there isn't one, we look to the first text element in the main content region or the first text element elsewhere, if needed. For blog posts, calendar events, and product pages we use the summary or, if there's no summary, we use the body / description. In all cases, the Twitter description is truncated to 200 characters, as required by Twitter.

One Tag to Add Manually

There's one more optional tag you might want to add to your site. Twitter lets you specify the Twitter account to associate with your website content. When you do, Twitter includes your username and gives people the chance to follow you right from the Twitter card. Generally, you'll want to use the same Twitter account across your entire site, so you can drop one tag into your website settings and it will work for every page. LightCMS can't generate this tag for you automatically because we don't know what Twitter account to use.

You can use your Twitter User ID or your Twitter @username. The @username is easiest. The only downside is if you ever change the username on your account, you'll need to update your tag. Using your account ID will keep the link intact no matter how many times you change your username.

To add the information, log into your LightCMS Website and click "Settings" on the top toolbar. Select the Advanced Tab and scroll to the "Google Analytics" box. Put the following line of code into this box:

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

or

<meta name="twitter:site:id" content="24586843" />

Of course, you'll want to replace our username or account ID with your own. If you need help finding your Twitter ID, try using this tool.

You Have to Apply!

As opposed to Open Graph, which is used by Facebook for every webpage that includes their tags, Twitter Cards are only used on sites that have been approved by Twitter. Once your tags are in place, Twitter requires you to fill out their submission form for consideration.

If you want, you can submit your site right now, because we've already included the required tags for you. But if you want to check things out first, you can use Twitter's preview tool to see how a particular page's Twitter Card will look once approved. Twitter claims approvals generally take between 5-10 business days. Reports from users vary on how long it actually takes.

See It in Action on LightCMS.com

This very website (lightcms.com) has already been approved for Twitter Cards already. So, why not share a link to this post on Twitter? When you do, you should see our Twitter card associated with your tweet!

Get the full specs on Twitter Cards here on their reference documentation.

Tags

Archive

Try it today. It’s Free.

Takes less than 60 secondsNo commitmentNo payment information required

Get Started