Twitter Cards

Works exactly the way of Facebook Open Graph, but this time is for Twitter Summary Card instead.

Meta Type

All meta tag names starts with twitter:

List Of Tags

Here is the full list of tags that should be included for each page


<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@username_in_twitter">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:image" content="https://www.example.com/image.jpg">

Let’s examine it one by one

twitter:card

Must be set to a value of summary

twitter:site

The Twitter @username the card should be attributed to.

twitter:title

Platform specific behaviors:

iOS, Android: Truncated to two lines in timeline and expanded Tweet
Web: Truncated to one line in timeline and expanded Tweet

twitter:description

iOS, Android: Not displayed
Web: Truncated to three lines in timeline and expanded Tweet

twitter:image

Path of the page image

Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels. Images must be less than 5MB in size

Full Page Content

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- UTF8 -->
    <meta charset="UTF-8">
    <!-- Responsive Viewport Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Page Title -->
    <title>Page Title</title>
    <!-- Meta description -->
    <meta name="description" content="your page description here">
    <!-- Meta Keywords -->
    <meta name="keywords" content="your,keywords,list,here">
    <!-- Meta Image -->
   <meta name="image" content="http://www.example.com/image.jpg">
    <!-- Open Graph Tags -->
    <!-- Title -->
    <meta property="og:title" content="Page Title">
    <!-- Description -->
    <meta property="og:description" content="Page Description">
    <!-- Image -->
    <meta property="og:image" content="https:://site-name.com/path-to-image">
    <!-- Type -->
    <meta property="og:type" content="website">
    <!-- URL -->
    <meta property="og:url" content="https:://site-name.com/page-route">
    <!--/ Open Graph Tags -->

    <!-- Twitter Card -->    
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@username_in_twitter">
    <meta name="twitter:title" content="Page Title">
    <meta name="twitter:description" content="Page description less than 200 characters">
    <meta name="twitter:image" content="http://www.example.com/image.jpg">
    <!--/ Twitter Card -->
</head>
<body>
    <!-- Page visible content -->
</body>
</html>

To Be Continued…

seo series1 - SEO Optimization in technical point of view: Meta Data Part I 2 - SEO Optimization in technical point of view: Meta Data Part II: Facebook Open Graph Protocol 3 - SEO Optimization in technical point of view: Meta Data Part III: Twitter Cards 4 - SEO Optimization in technical point of view: Visible Content

#SEO