Display Twitter Cards in Drupal Using Meta Tags Module
Twitter Cards make it possible to attach media to Tweets. The media can be a summary of a page, image or a video. For example, when you see an article summary with a teaser image below a Tweet, that is a Twitter card.
Displaying Twitter cards on your site is simple, all you need to do is add a few meta-tags to your page. These meta-tags are very similar to Open Graph meta-tags that Facebook uses.
Adding the required meta-tags on a Drupal site is pretty easy thanks to the Meta Tags module, just enable the sub-module called "Meta tags: Twitter Cards".
In this tutorial, we'll have a look at the three required steps for setting up Twitter cards.
Step 1: Enable Meta Tags and Meta tags: Twitter Cards Module
In the current stable (7.x-1.0-beta4) version of the Meta Tags module, there is a major bug in the Twitter cards sub-module. Download the 7.x-1.x-dev version or apply the patch in issue #1846978 on drupal.org.
Once you have the right version downloaded, enable "Meta Tags" and "Meta tags: Twitter Cards" module. If you have already used Meta tags module in the past, then configuring Twitter cards should be easy.
1. Go to Configuration -> "Meta tags" (admin/config/search/metatags).
2. Click on Override on the Content Row.
3. Click on the "Twitter cards" field-set to expose the required fields.
If you can't see a "Twitter cards" field-set, make sure you have enabled the "Meta tags: Twitter Cards" sub-module.
4. Select "Summary (default)" from the "Twitter card type" drop-down and simply configure the rest of the fields.
The only fields that are required are the "Page URL", Title and Description field. For more details, check out the documentation page.
5. The last piece of configuration we need to do is define the
twitter:site property. This property item can only be configured from the Global meta tag or any meta tags that are been inherited from the Global meta tag.
6. Clear site cache.
Step 2: Test and Preview Meta Tags
Once you have set everything up, go to the Twitter card preview and make sure it displays properly.
If the preview is not working check the following:
- View your page source and make sure the meta-tags are actually appearing.
- Make sure that the site that you are implementing the tags on is accessible on the Internet. Your
localhostsite will not work.
- Clear the site cache.
Step 3: Submit Application
The final bit of work you need to do is submit an application to have your domain whitelisted. Twitter cards will not appear until Twitter approves your site. Make sure you have setup the meta-tags on your production site before you submit the application.
Once your site has been approved by Twitter, you'll be able to see the Twitter cards by clicking on the "View summary" link below each tweet.
If you have any questions, please leave a comment.
Like what you see?
Join our free email list and receive the following:
- Discover our best tutorials in a 6 part series
- Be notified when free content is published
- Receive our monthly newsletter