How to Add a Twitter Preview Card in Your Web App

What Are Twitter Cards?

Twitter Cards enable you to add media-rich content to your tweets. There are several types of Twitter Cards, but the most common ones are:

Summary Card: A basic card with a title, description, and thumbnail image.
Summary Card with Large Image: Similar to the Summary Card but with a larger image.
App Card: Designed for mobile apps, includes a link to download.

Steps to Implement Twitter Preview Cards

Step 1: Choose Your Card Type

Decide which type of Twitter Card you want to use. For this example, we’ll create a Summary Card.

Step 2: Add Meta Tags in Your HTML

You need to add specific meta tags in the <head> section of your HTML to define the Twitter Card's properties. Here’s an example for a Summary Card:

<head>
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Your Web App Title" />
  <meta name="twitter:description" content="A brief description of your web app." />
  <meta name="twitter:image" content="https://yourwebsite.com/path/to/image.jpg" />
  <meta name="twitter:site" content="@your_twitter_handle" />
  <meta name="twitter:creator" content="@your_twitter_handle" />
</head>

Implement in Next.js

in Next Js we use meta-data object in root layout to define meta data, we can add our twitter preview and other site preview using this object

export  const  metadata= {
openGraph: {
title:  siteMetadata.title,
description:  siteMetadata.description,
url:  './',
siteName:  siteMetadata.title,
images: /youimage.png,
locale:  'en_US',
type:  'website',
   },  // For preview on other sites
twitter: {
title:  siteMetadata.title,
card:  'summary_large_image',
images: /youimage.png,
   }, // for preview on twitter
}

Step 4: Test Your Card

Use the Twitter Card Validator to test your implementation. Simply enter the URL of your web page, and the tool will show you how your card will appear on Twitter.