DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • The Origins of ChatGPT and InstructGPT
  • Building a 24-Core Docker Swarm Cluster on Banana Pi Zero
  • Model Cards and the Importance of Standardized Documentation for Explaining Models
  • Build a Twitter Leaderboard App With Redis and AWS Lambda (Part 2)

Trending

  • Understanding Git
  • Using Open Source for Data Integration and Automated Synchronizations
  • Three Ways AI Is Reshaping DevSecOps
  • Supercharge Your Software Development Journey With DevOps, CI/CD, and Containers

Add Twitter Cards To Your Website

Paul Underwood user avatar by
Paul Underwood
·
May. 09, 13 · Interview
Like (0)
Save
Tweet
Share
4.31K Views

Join the DZone community and get the full member experience.

Join For Free

When you share a post on a social network like Facebook it will scan the URL that you are sharing and return certain information to display the page in your feed. Facebook will get the page title, page description and a thumbnail image for the page. You can change the information that Facebook gets by using the open graph meta tags.

These are simply meta tags you can add to the head tag of your page, when Facebook scans your page to get the title, description and images it will search for these tags, if they are there then it will use the contents of these tags instead of the page title. These means you can fully customise the page titles just for Facebook.

card-web-summary_0

Twitter also has meta tags which you can use to customise the message on Twitter. These are called Twitter cards, it allows website owners to add more descriptive text on their links when they are shared on Twitter.

When a link is shared on Twitter it is limited to the 140 character limit on all tweets, but on all tweets you can expand the tweet to find out more about it. This section is where you find information on how many people have replied to the tweet, re-tweeted it and added it to their favourites. But if you have the Twitter meta tags added to your head tag then instead of just seeing the information about re-tweets and favourites you will also see a snippet of the page by showing you the title, description and an image.

Because you can post different types of links to Twitter like images and videos there are different types of Twitter cards you can have, one will give you a snippet of the page, another will display an image, the last one is a media play to play music or video.

Which type of card that is displayed can also be defined by a meta tag.

<meta name="twitter:card" content="summary">

To display a snippet of the page the value of the content attribute will need to be summary. For an image the value will need to be changed to photo. To change this to display the media player for a video or music set the value to be player.

Twitter Card Meta Tags

There are different meta tags you can use depending on the type of Twitter card you are using.

Summary Card

  • twitter:card - The card type, which will be one of "summary", "photo", or "player".
  • twitter:url - Canonical URL of the card content.
  • twitter:title - The title of your content as it should appear in the card.
  • twitter:description - A description of the content in a maximum of 200 characters.
  • twitter:image - A URL to the image representing the content.
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@paulund_">
    <meta name="twitter:creator" content="@paulund_">
    <meta name="twitter:url" content="http://www.paulund.co.uk">
    <meta name="twitter:title" content="Page Title">
    <meta name="twitter:description" content="Page Description">
    <meta name="twitter:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

Photo Card

  • twitter:card - Set this value to photo
  • twitter:url - Canonical URL of the card content.
  • twitter:title - The title of your content as it should appear in the card.
  • twitter:description - A description of the content in a maximum of 200 characters.
  • twitter:image - A URL to the image representing the content.
  • twitter:image:width - Define the original width of the image, this may not be the size Twitter use to display it but it will help twitter keep the aspect ratio of the image if it needs to resize the image.
  • twitter:image:height - Define the original height of the image.
    <meta name="twitter:card" content="photo">
    <meta name="twitter:site" content="@paulund_">
    <meta name="twitter:creator" content="@paulund_">
    <meta name="twitter:url" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
    <meta name="twitter:title" content="Image Title">
    <meta name="twitter:description" content="Image Description">
    <meta name="twitter:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">
    <meta name="twitter:image:width" content="500">
    <meta name="twitter:image:height" content="500">

Player Card

  • twitter:card - Set this value to player
  • twitter:url - Canonical URL of the card content.
  • twitter:title - The title of your content as it should appear in the card.
  • twitter:description - A description of the content in a maximum of 200 characters.
  • twitter:image - A URL to the image to be used as the thumbnail of the video
  • twitter:player - The URL of the player
  • twitter:player:stream - The URL of the video to stream on the player
  • twitter:player:width - The width of the IFRAME to display the player
  • twitter:player:height - The height of the IFRAME to display the player
    <meta name="twitter:card" content="player">
    <meta name="twitter:site" content="@paulund_">
    <meta name="twitter:url" content="http://www.paulund.co.uk/example-video.mp4">
    <meta name="twitter:title" content="Title Of Video">
    <meta name="twitter:description" content="Description of the video">
    <meta name="twitter:image" content="http://example.com/example-video-thumbnail-image.jpg">
    <meta name="twitter:player" content="https://www.paulund.co.uk/example-player">
    <meta name="twitter:player:stream" content="http://www.paulund.co.uk/example-video.mp4">
    <meta name="twitter:player:width" content="500">
    <meta name="twitter:player:height" content="250">

Facebook Open Graph Tags

If you are already using the Facebook open graph tags then you will have something like this in the head of your HTML.

<meta property="og:url" content="http://www.paulund.co.uk/example-url">
<meta property="og:title" content="Example Title">
<meta property="og:description" content="Example Description">
<meta property="og:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

Because the Twitter cards meta tags were based on the open graph tags, Twitter will actually use these as a fall back. It will first search for the Twitter card tags, if they are not there then it will search for the open graph tags and use them for the title, description and images. This is so you don't need to duplicate the tags with the same information as the open graph tags.

This means that you can have this in the head of your website and it will search work perfectly fine.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@paulund_">
<meta name="twitter:creator" content="@paulund_">
<meta property="og:url" content="http://www.paulund.co.uk/example-url">
<meta property="og:title" content="Example Title">
<meta property="og:description" content="Example Description">
<meta property="og:image" content="http://btenc7unnvpdjzve.zippykid.netdna-cdn.com/example-image.jpg">

To view updated information about the Twitter card visit the Twitter documentation.

Twitter Cards




Cards (iOS) twitter

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • The Origins of ChatGPT and InstructGPT
  • Building a 24-Core Docker Swarm Cluster on Banana Pi Zero
  • Model Cards and the Importance of Standardized Documentation for Explaining Models
  • Build a Twitter Leaderboard App With Redis and AWS Lambda (Part 2)

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: