Adding twitter tags to your NextJS blog

#twitter #nextjs #seo

Images on your twitter posts will increase the interaction of your tweets, that's a fact. You like blogging on your brand new NextJS website and you would like to share it on twitter. But you realize that your blog url does not look like this card style:

In order to solve this problem you need to have twitter tags in the <head></head> of your page. So how do we manage this in NextJS ?

We can add <Head> tag to our component's return portion.

import Head from 'next/head';

export default function example() {
  return (
    <div>
      <Head>
        <title>My site title</title>
      </Head>
      <h2>My awesome content</h2>
    </div>
  );
}

Whatever we put inside the

tags will be available on the document's head section. So we can add our twitter tags here. But as a better option, we can use next-seo package to handle this problem.

npm i next-seo --save

Now let's create a component called Seo.js

// components/Seo.js
import { NextSeo } from 'next-seo';

export default function Seo({ post }) {
  const { title, excerpt, slug, coverImage } = post;
  return (
    <>
      <NextSeo
        title={title}
        description={excerpt}
        canonical={`https://myawesomewebsite.com/blog/${slug}`}
        openGraph={{
          type: 'website',
          url: 'https://myawesomewebsite.com',
          title: `${title} | originally posted on myawesomewebsite.com`,
          description: excerpt,
          locale: 'en_EN',
          images: [
            {
              url: coverImage,
              width: 800,
              height: 600,
              alt: `hero image for ${title}`,
            },
          ],
          site_name: 'myawesomewebsite.com',
        }}
        twitter={{
          handle: '@myawesometwittername',
          site: 'myawesomewebsite.com',
          cardType: 'summary',
        }}
      />
    </>
  );
}

After editing the fields with your own data you can import this component to your blog component. Notice that we are passing the data as a prop to the Seo.js component and dynamically rendering the meta data. This component can be very useful with dynamic routing in NextJS.

import Seo from '@components/Seo';

export default function example() {
  const post = {
    // ...
  };
  return (
    <div>
      <Seo post={post} />
      <h2>My awesome content</h2>
    </div>
  );
}