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>
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>
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
Open Graph Image as a Service
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>
Top comments (0)