DEV Community

loading...
Cover image for Adding twitter tags to your NextJS blog

Adding twitter tags to your NextJS blog

uguremirmustafa profile image uguremirmustafa ・2 min read

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:
Screenshot_2021-03-31_22-02-28

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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',
        }}
      />
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

And that's it. You can check if your url is working as expected from this card validator.

I hope you find this tutorial helpful. You can find me on twitter where I share daily content related to web development and especially on NextJS.

Discussion (0)

pic
Editor guide