Twitter Card Meta Tags Generator


Fill in required fields.

Code

Copy your code.
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="twitter:description" content="">
<meta name="twitter:app:name:iphone" content="">
<meta name="twitter:app:id:iphone" content="">
<meta name="twitter:app:name:ipad" content="">
<meta name="twitter:app:id:ipad" content="">
<meta name="twitter:app:name:googleplay" content="">
<meta name="twitter:app:id:googleplay" content="">

About Twitter Card Meta Tags Generator

Twitter is one of the popular social sharing platforms. Making the correct use of it will help driving considerable traffic to your website or app. Facebook follows Open Graph protocol while Twitter follows Cards to pickup appropriate data from a webpage. The extracted data will be shown on the timeline with beautiful image or video. Here is a free tool to generate Twitter meta tags for your site.

Twitter Cards

Twitter uses the meta tags identified with "name="twitter:card" for effective sharing of content with appropriate image sizes. You can generate Twitter card meta tags for your site with free Twitter card meta tags generator tool and share your content on Twitter in an attractive manner. Below is how the shared content will look like on Twitter timeline:

Twitter Card

Twitter uses the following four types of cards:

  • Summary card - shows short description with smaller image
  • Summary card with large image - shows short description with larger image
  • App card - for mobile apps
  • Player card - for sharing audio and video media files.

If you are a website owner you should focus on either summary card or summary card with large image.

Twitter Card Meta Tags

The required card information is to be added as a HTML meta tags within the <head>...</head> section of your webpage. For summary cards there are three meta tags are to be added mandatorily:

  • twitter:card - type of the card (summary or summary_large_image or app or player or product).
  • twitter:title - title to be shown on the tweet.
  • twitter:description - meta description to be shown on the tweet.

Below is how the meta tags should look like on your webpage:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="This is a title">
<meta name="twitter:description" content="This is a description.">

This tool generates the following meta tags:

  • Type - choose one of the available options from the dropdown. The options are App, Player, Product, Summary or Summary with Large Image.
  • Site Username - this is the name of your site with the prefix @.
  • Description - meta description to be shown in tweets.
  • App details - If you are generating teh Twitter card for App then enter the details like name, iPhone ID, iPad ID, Google Play ID and App country.

The meta tags will be generated automatically in the text box when you enter the details. Click on the "Copy" button to select all the code and copy by pressing "Ctrl + C" or "Cmd + C". You need to paste the meta tags inside the header tags of your webpage.

Validating Twitter Card Meta Tags

Once you have generated the tags, insert the tags inside the header section of your page. Login to you Twitter account and go to the Twitter Card validator page. Enter the page URL o which you have inserted the meta tags and click on the "Preview card" button. You should see the preview based on the card type along with the information confirming the meta tags are found.

Twitter Card Validator

Integrating Twitter Cards in Content Management Systems

The above tool help you to generate Twitter cards and add them manually on your webpage source code. This is an easy task, when you have few number of pages. But this is a big task when you have large number of pages on your site. Integrating social meta tags is kind of must do thing for this social world. So, it’s a wise idea to choose proper content management system for creating your site.

For example, free hosting platforms like Weebly does not offer proper integration of Twitter card on your site. On other hand, platforms like WordPress has plenty of plugins to do this task automatically for you. This makes big difference when you see the shared content on Twitter timeline.

Open Graph Vs Twitter Card

Facebook uses open graph protocol to fetch the required content from a webpage when sharing. But Twitter uses cards for this purpose. Though both are easy to generate, it adds lots of meta tags on each of your page. To avoid this situation, Twitter first will check the presence of card tags. If not found, it will use the open graph tags as a fallback to get necessary details.

This will help website owners to only retain open graph meta tags and share the content both on Facebook and Twitter.

Related SEO Tools: