Skip to content
Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc
TypeScript CSS HTML Dockerfile
Branch: master
Clone or download

Latest commit

styfle Rename zeit/og-image to vercel/og-image (#119)
- Rename `now` CLI to `vercel` CLI
- Rename `now.json` to `vercel.json`
- Rename `.nowignore` to `.vercelignore`
- Rename `zeit/og-image` to `vercel/og-image`

https://vercel.com/blog/zeit-is-now-vercel
1
Latest commit bbd8b8b May 28, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add codeowners file Mar 13, 2019
api Rename zeit/og-image to vercel/og-image (#119) May 27, 2020
public Rename zeit/og-image to vercel/og-image (#119) May 27, 2020
web Change assets to vercel.com (#114) Apr 28, 2020
.gitignore Rename zeit/og-image to vercel/og-image (#119) May 27, 2020
.vercelignore Rename zeit/og-image to vercel/og-image (#119) May 27, 2020
.yarnrc Move to zeit org (#67) Mar 4, 2019
CONTRIBUTING.md Rename zeit/og-image to vercel/og-image (#119) May 27, 2020
Dockerfile Add Dockerfile Feb 5, 2019
LICENSE Rename ZEIT Now to Vercel (#113) Apr 23, 2020
README.md Rename zeit/og-image to vercel/og-image (#119) May 27, 2020
package.json Upgrade Node 10 to Node 12 (#106) Apr 6, 2020
vercel.json Rename zeit/og-image to vercel/og-image (#119) May 27, 2020
yarn.lock Upgrade Node 10 to Node 12 (#106) Apr 6, 2020

README.md

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>

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 og-image.now.sh 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://og-image.now.sh/Hello%20World.png" />
</head>

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

Deploy your own

You'll want to fork this repository and deploy your own image generator.

  1. Click the fork button at the top right of GitHub
  2. Clone the repo to your local machine with git clone URL_OF_FORKED_REPO_HERE
  3. Change directory with cd og-image
  4. Make changes by swapping out images, changing colors, etc (see contributing for more info)
  5. Hobby plan users will need to remove all configuration inside vercel.json besides rewrites
  6. Run locally with vercel dev and visit localhost:3000 (if nothing happens, run npm install -g vercel)
  7. Deploy to the cloud by running vercel and you'll get a unique URL
  8. Setup GitHub to autodeploy on push

If you are using a paid plan, you can do a one-click deploy with the button below.

Deploy to Vercel

Once you have an image generator that sparks joy, you can setup automatic GitHub deployments so that pushing to master will deploy to production! 🚀

Authors

You can’t perform that action at this time.