Dynamically generate open graph images

What is open graph

Open Graph Meta Tags are a set of HTML tags that provide information about a webpage to social media platforms. These tags help social media platforms display a preview of the page when it's shared, including the title, description, image, and other relevant details.

The main purpose of Open Graph Meta Tags is to improve the appearance of a shared link on social media, making it more visually appealing and user-friendly. This can increase the chances of the link being clicked on, shared, and engaged with, ultimately leading to increased traffic to the website.

In summary, Open Graph Meta Tags are a simple and effective way to optimize the appearance of your content on social media platforms, helping to increase its visibility and engagement.

What is Tailgraph

TailGraph is a free API to help developers and content creators easily generate OG images using TailwindCSS.

Try out Tailgraph

When I was looking into creating my own OG Image generator I came across this service and I've been using it on my blog to generate OG Images.

It is easy and quick to use, you can customise the layout with tailwind CSS

How to use it

Once you customise the you will receive a URL that contains all of the parameters required to generate the PNG, which may appear cluttered depending on how it is customized.

https://og.tailgraph.com/og?fontFamily=Roboto&title=This%20is%20your%20title&titleTailwind=text-gray-800%20font-bold%20text-6xl&text=And%20this%20is%20your%20secondary%20text&textTailwind=text-gray-700%20text-2xl%20mt-4&logoTailwind=h-8&bgTailwind=bg-white&footer=tailgraph.com&footerTailwind=text-teal-600&t=1676309236521&refresh=1

Applying this to the code

The first thing I did was break down the URL parameters

  const ogParams = {
    fontFamily: 'Roboto',
    title: 'This is your title',
    titleTailwind: 'font-bold text-6xl text-white mt-3',
    text: ''And this is your secondary text',
    textTailwind: 'text-2xl mt-4 text-gray-500',
    logoUrl: 'https://blog.rrrm.co.uk/img/logo.svg',
    logoTailwind: 'text-center text-center m-auto',
    bgTailwind: 'bg-gray-900',
    footer: 'blog.rrrm.co.uk',
    footerTailwind: 'text-teal-600',
    t: '1673017484197',
    refresh: '1',
  };

Your result may differ based on the values you selected, but the title and text fields are the most important.

I want this to be dynamic depending on the article I'm on. So I created a function that accepts title and description as a parameter

const useOgImage = ({
  title,
  description
}) => {
  const ogParams = {
    fontFamily: 'Roboto',
    title, // use the title
    titleTailwind: 'font-bold text-6xl text-white mt-3',
    text: description, // use description
    textTailwind: 'text-2xl mt-4 text-gray-500',
    logoUrl: 'https://blog.rrrm.co.uk/img/logo.svg',
    logoTailwind: 'text-center text-center m-auto',
    bgTailwind: 'bg-gray-900',
    footer: 'blog.rrrm.co.uk',
    footerTailwind: 'text-teal-600',
    t: '1673017484197',
    refresh: '1',
  };

  // convert the object into a string that's readeable by the url
  const paramsToString = Object.entries(ogParams)
    .map(([key, val]) => {
      return `${key}=${encodeURIComponent(val)}`;
    })
    .join('&')

  // return the full image url
  return `https://og.tailgraph.com/og?${paramsToString}`
};

now I can just call the function and pass the required data and it will return me a URL.

useOgImage({
  title: 'Title',
  description: 'New description'
});

Now you just pass this to your meta tag for og:image property

Jsfiddle here: https://jsfiddle.net/gyzpxu8k/6/