← coderrocketfuel.com

Add Twitter Card Data To A Next.js & React Website

This article will show you how to add Twitter card data to your Next.js website.

Twitter cards can be used for many kinds of web content, including blog posts and news articles. It is designed to give the reader a preview of the content behind the link before clicking through to the website.

The Tweet below is an example of a Summary Card with a photo and text:

When a link is placed in a Tweet, Twitter's system crawls the site to fetch the Card type and content. So, you need to have the correct information added to your webpage for Twitter to correctly identify and collect the data to include in the Tweet.

Below are the meta tags included on the webpage from the above Tweet:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@CoderRocketFuel" />
<meta name="twitter:title" content="Embed a Twitch Video into a React Website" />
<meta name="twitter:description" content="How to embed a Twitch video into a React application or website using the ReactPlayer npm package." />
<meta name="twitter:image" content="https://assets.coderrocketfuel.com/twitter-post-with-node-js.png" />

Heres an explanation for each meta tag:

  • twitter:card: The card type, which will be either "summary", "summary_large_image", "app", or "player".
  • twitter:site: Twitter @username for the website used in the card footer.
  • twitter:title: The title for the related content.
  • twitter:description: Summary of the webpage content that is linked to in the Tweet.
  • twitter:image: A URL to a unique image representing the content on the page.

To learn more about the Twitter Card system, check out their Getting Started Guide.

Add Card Data To A Next.js Webpage

Now were ready to add the Twitter card data to a Next.js website.

For the next step, make sure you have a Next.js application setup and ready to go.

To add the meta tags, well need to populate the <head> tag using Nexts built-in "next/head" component.

So, open one of the pages with your favorite text editor and add the following code to the list of packages you import and the <head> section:

import Head from "next/head"

function YourPage() {
  return (
    <div>
      <Head>
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@YOUR_TWITTER_USERNAME" />
        <meta name="twitter:title" content="TITLE_FOR_YOUR_PAGE" />
        <meta name="twitter:description" content="DESCRIPTION_FOR_YOUR_PAGE" />
        <meta name="twitter:image" content="URL_FOR_YOUR_IMAGE" />
      </Head>
      <p>Your page content.</p>
    </div>
  )
}

The first thing we did was import the "next/head" component. This is one of Nexts built-in components that makes it super easy to append elements to the <head> of your page.

Then, we add the Twitter card data into the <Head> component above your page content.

Now whenever you or someone else makes a Tweet with a link to your page included, the Tweet will display the card data you included in this page.

Test it out and see for yourself!

For more information on what data can be added to the Twitter Card meta tags, check their Getting Started Page.

If everything went well, you should now know how to add Twitter card data to your Next.js webpages.

Thanks for reading and happy coding!