Create a Twitter Card for Your Blog

As @swyx puts it, the Twitter card or more importantly og:image is important because “this is THE FIRST THING newcomers to your blog see, not your actual blog.”

You can set yours up fairly quickly thanks to a package called @jlengstorf/get-share-image by Jason Lengstorf.

Jason wrote an awesome blog post called “Automatically Generate Social Images for Blog Posts”. Assuming you’ve read his blog post, here’s how you can set your Twitter/og:image up quickly.

How to create your own

1. Sign up for Cloudinary

We’ll store our card template here, and be utilizing Cloudinary’s free services to lay text on top of our image.

2. Upload your card template

After you’ve signed up, upload your card template to Cloudinary. Note: if you’re having trouble designing one, Jason wrote a blog post on how to design your own.

3. Change the name to something meaningful like “website-card-template”

You’ll use this later in your blog so make it easy it remember.

4. Install Jason’s package

# install using npm
npm install --save @jlengstorf/get-share-image

# install using yarn
yarn add @jlengstorf/get-share-image

5. Add the code to generate the URL

I have an <SEO /> component on my site, which you can see here as an example of where to put this code.

import getSharingImage from "@jlengstorf/get-share-image";

const socialImage = getSharingImage({
  title: "How to be a x developer",
  tagline: "Learn all the tips from this one post",
  // This is the name you see in your url
  // https://res.cloudinary.com/<Your cloud name will be here>/image/upload/v1579118925/jp-blog-post-card.png
  cloudName: "jsjoeio",
  imagePublicID: "jp-blog-post-card",
  titleFont: "Roboto",
  titleExtraConfig: "_bold",
  taglineFont: "Roboto",
});

6. Use it in your meta tag

Use your new image in your meta tag:

<meta name="twitter:image" content={socialImage} />

7. Push to production and test

Once your code is ready, push it to production then check to see if it’s working using something like Twitter’s Card validator. If it works, you should see your template in action like this:

8. Celebrate!

We did it!