Adding Social Images to Your Next.js Site

So, you’ve create yourself a blog. Congrats! Perhaps you’ve decided to use a React framework like Next.js or Remix. If so, read on.

Even for a ‘simple’ blog there’s a number of things to think about: does it look good on mobile? Does it load quickly? Can people use my navigation without getting lost?

What about social media? If you take a link to your blog and share it on Twitter, does it look like this?

(picture of shared link without a picture)

Wouldn’t it be better if it stood out with a picture, including a photo of the post’s author — you? Perhaps you’re good at designing or found a nice template, and so you decided to create an image and add it to your site.

(picture of shared link with a good looking picture but one that isn’t tied to the post content)

This looks so much better! But I think we can go further — what if we included the title of the post of the image?

With Little Eagle, we’ll help make the image for you. We’ll do it on-the-fly so you can have a tailored image for every blog post, whether you have 3 or 300. I’ll walk you through how for free.

First create a Next.js app, if you don’t have one. Here’s a starter template if you need.

So how does Twitter know what image to use? It’s through the use of HTML meta tags.

You’re probably familiar with HTML with elements like <h1> and <a>. At the very top there’s an <html> element. And inside that sit <head> and <body>.

Simplifying, <body> is for people — it’s everything you see or hear on a web page. And so <head> is for machines, such as the ones from Twitter or Facebook that load the links that are posted onto their platform.

Inside the <head> they look for <meta> tags, specifically ones that look like this:

<meta property="og:title" content="Download the fastest Firefox ever">

This one means “use the text ‘Download the fastest Firefox ever’ for the title under the link”.

There’s a whole bunch of them that you can set, from images, more text, to even identifying which Facebook page the website belongs to.

<meta property="og:image" content="https://www.mozilla.org/media/protocol/img/logos/firefox/browser/og.4ad05d4125a5.png">
<meta property="og:title" content="Download the fastest Firefox ever">
<meta property="og:description" content="Faster page loading, less memory usage and packed with features, the new Firefox is here.">
<meta property="fb:page_id" content="14696440021">

We’re interested in this one that sets the image:

<meta property="og:image" content="https://www.mozilla.org/media/protocol/img/logos/firefox/browser/og.4ad05d4125a5.png">

So if your page provides this meta tag, Facebook and Slack and LinkedIn will discover it and show it alongside the link when it’s posted.

In order to add an og:image meta tag, you need to do two things:

  1. You need to create the image using a design tool like Figma or Canva.
  2. You need to upload the image to a host so it’s available on the internet.

Little Eagle solves both of these problems for you:

  1. Little Eagle creates images so you don’t have to. We have templates that you plug your title text and photos into, and we produce a good looking image. Because we automate this, you can create a single image or you can create hundreds of images, all with different text.
  2. Because Little Eagle creates images just-in-time, it doesn’t have to manage image files and upload them somewhere. It also serves the images through a fast CDN: images are cached and served from the edge.

OK, so you know have some idea of how Little Eagle’s CDN works. How do you integrate it?

Here’s the overview of what we need to do to add Little Eagle to a Next.js app.

  1. In your project, install our npm package:
npm add @littleeagle/images-node

  1. Add a getServerSideProps function (if it doesn’t exist) to the page you want to have the Open Graph image on. If you haven’t used it before, you can read more about getServerSideProps in the Next.js docs.

  2. Import gitHubTemplateURL and call it in your getServerSideProps(), passing the text you want to appear in your image. Return it as a prop named ogImageURL to be used by the component.

  3. Read the ogImageURL prop in your component, and render the meta og:image tag inside a <Head> element.

npm add @littleeagle/images-node

import { gitHubTemplateURL } from '@littleeagle/images-node';

export const getServerSideProps: GetServerSideProps = async (context) => {
  const ogImageURL = gitHubTemplateURL({
    username: "BurntCaramel",
    backgroundColor: "#B89856",
    text: [
      { text: "My favorite movies", size: 45, color: "#351F00" },
      { text: "A mix of recent flicks and old classics", size: 30, color: "#473100" },
    ],
    authorName: 'Patrick Smith',
    website: 'icing.space',
  });

  return {
    props: {
      ogImageURL,
    },
  };
}

export default function HomePage({ ogImageURL }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return <>
    <Head>
      <title>Your title</title>

      <!-- Use the image URL here: -->
      <meta property="og:image" content={ogImageURL} />

      <!-- Other meta tags you might like: -->
      <meta property="og:type" content='website' />
      <link rel='icon' href='/favicon.ico' />
    </Head>
    <main>
      Your page content…
    </main>
  </>;
}

Here’s what the generated image will look like. Play around with the colors to create your own style!

Our Little Eagle generated Open Graph image

If you want to see what yours could look like use our online preview.