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.
Hi,
I followed all above steps. But when I clicked on tweet button the twitter cards screen which are appearing on twitter validator screen not appearing in my drupal website. Please guide me if I am missing any step.
Sorry, I don’t quite understand the problem. What do you mean “Twitter card Screen not appearing”.
The cards don’t appear on your website, they appear in Twitter’s timeline.
Hi,
Thanks for replying. Ya this problem is solved. But now when I am validating my url in https://dev.twitter.com/docs/cards/validation/validator then for my development site where i was implementing yesterday Invalid card type is error is showing. And twitter card is not appearing.
Similarly if I registered my url of live website denied by robot.txt error is showing.
Because of these errors the twitter cards are not appearing Twitter’s timeline.
There is no option to attach image otherwise i attaches the screenshots of errors.
View the HTML source and make sure the “twitter:card” meta tag is visible. Search the Twitter Dev site and find out what “Invalid card type” means.
Also, make sure your development site is not blocked. It needs to be publicly accessible.
Hi, I’m testing this out, and do have a few questions.
– Can the Twitter Cards be set for individual pieces of content? I see the Twitter Card fields available in the metatags section of a content node, but even when I’ve changed these, the Global tags still appear to override.
– When submitting the Twitter to validate, do you only need to submit the base URL of the site?
Thanks!
Maya
– Can the Twitter Cards be set for individual pieces of content? I see the Twitter Card fields available in the metatags section of a content node, but even when I’ve changed these, the Global tags still appear to override.
Yes, you should be able to modify meta tags on each node. Try changing other tags, if you’re still having trouble then it could be a bug with the module. Have a look in the Metatag queue for other people with a similar problem.
– When submitting the Twitter to validate, do you only need to submit the base URL of the site?
The URL has to point to a page that has the required meta tags. Most often, this would be a node page (example.com/node/1).
For whatever reason, my twitter:image metatags are blank, so there are no images in the summary card. I use the CKEditor module to replace D7s editor. What do I need to tweak to get article images tagged for Twitter to pick up?
You need to manually define which image is going to be used. Drupal won’t automatically grab an image from the article.
Also, only a single image can be used in twitter:image.
…though this now begs the question, how do I manually define the file to be used? Is there some flag I can attach to the picture from inside CKEditor (e.g. image properties) that metatag could recognize as the photo selected for the twitter:image?
Is there some flag I can attach to the picture from inside CKEditor (e.g. image properties) that metatag could recognize as the photo selected for the twitter:image?
No, you can’t do this using the Metatag module.
There should be a vertical tab called “Meta tags” where you can manually change the meta tags (twitter:image) for a specific node.
Does this require a Cron run to pull in the latest cards?
Cron is not involved. Twitter parses the page, reads the meta tags and creates a card on their end. Twitter does the pulling, not Drupal.
Hi Ivan,
Nice tutorial, is there any way to add twitter card field values programmatically? I am trying to create node programmatically and add image url to twitter card image field from code, but i don’t know which function/hook to use??
Please help…
Hi Wisal,
I’ve never done this but looking through the module I found “metatag_metatags_save()”. I would try this function.
Also, look at the tests. You’ll learn a lot by studying them.
Cheers,
Ivan
Hi,
Very useful information. It helped me to set up the twitter card on my Drupal 8 website.
Thanks!