DEV Community

Cover image for Create beautiful looking social images for your Blog and Packages
Adrián UB
Adrián UB

Posted on

Create beautiful looking social images for your Blog and Packages

Hi everyone, today I want to present a serverless service for image generator. Social Image Generator - Adrián UB

Serverless service that generates dynamic Open Graph images that you can embed in your tags.

What is an Open Graph Image?

Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup? How did your social network know how to "unfurl" the URL and get an image? The answer is in your

.

The Open Graph protocol says you can put a tag in the

of a webpage to define this image.

It looks like the following:

<head>
  <title>Title</title>
  <meta property="og:image" content="http://example.com/logo.jpg" />
</head>
Enter fullscreen mode Exit fullscreen mode

Why use this service?

The short answer is that it would take a long time to painstakingly design an image for every single blog post and every single documentation page. And we don't want the exact same image for every blog post because that wouldn't make the article stand out when it was shared to Twitter.

That's where banners.adrianub.vercel.app comes in. We can simply pass the title of our blog post to our generator service and it will generate the image for us on the fly!

It looks like the following:

<head>
  <title>Hello World</title>
  <meta property="og:image" content="https://banners.adrianub.vercel.app/Hello%20World.png" />
</head>
Enter fullscreen mode Exit fullscreen mode

Now try changing the text Hello%20World to the title of your choosing and watch the magic happen ✨

This service also lets you generate beautiful looking social images for your PHP, Laravel packages, NPM and Yarn. You have already put a lot of time and effort into your package, so why not make it look beautiful using this service.

My repository

GitHub logo adrian-ub / package-banners

Create beautiful looking social images for your Blog and Packages.

Serverless service that generates dynamic Open Graph images that you can embed in your <meta> tags.

For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached.

See the image embedded in the tweet for a real use case.

What is an Open Graph Image?

Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup How did your social network know how to "unfurl" the URL and get an image? The answer is in your <head>.

The Open Graph protocol says you can put a <meta> tag in the <head> of a webpage to define this image.

It looks like the following:

<head>
  <title>Title</title>
  <meta property="og:image" content="http://example.com/logo.jpg" />
</head>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)