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 TweetWeb
: Truncated to one line in timeline and expanded Tweet
twitter:description
iOS
,Android
: Not displayedWeb
: 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 of144x144
or maximum of4096x4096
pixels. Images must be less than5MB
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>