https://github.com/marcl/og-image
https://github.com/marcl/og-image
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/marcl/og-image
- Owner: MarcL
- License: mit
- Created: 2020-04-28T19:16:25.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-28T19:17:09.000Z (about 6 years ago)
- Last Synced: 2025-01-26T17:24:34.872Z (over 1 year ago)
- Language: TypeScript
- Size: 419 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# [Open Graph Image as a Service](https://og-image.now.sh)
Serverless service that generates dynamic Open Graph images that you can embed in your `` 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 ``.
The [Open Graph protocol](http://ogp.me) says you can put a `` tag in the `` of a webpage to define this image.
It looks like the following:
```html
Title
```
## Why use this service?
Read the [blog post](https://zeit.co/blog/social-og-image-cards-as-a-service) for more info on the "Why" part.
The short answer is that it would take a long time to painstakingly design an image for every single blog post. 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:
```html
Hello World
```
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](https://github.com/zeit/og-image/blob/master/CONTRIBUTING.md) for more info)
5. Run locally with `now dev` and visit [localhost:3000](http://localhost:3000) (if nothing happens, run `npm install -g now`)
6. Deploy to the cloud by running `now` and you'll get a unique URL
7. Setup [GitHub](https://zeit.co/github) to autodeply on push
Alternatively, you can do a one-click to deploy with the button below.
[](https://zeit.co/new/project?template=zeit/og-image)
Once you have an image generator that sparks joy, you can setup [automatic Now + GitHub](https://zeit.co/github) deployments so that pushing to master is also deploying to production! 🚀
## Authors
- Steven ([@styfle](https://twitter.com/styfle)) - [ZEIT](https://zeit.co)
- Evil Rabbit ([@evilrabbit](https://twitter.com/evilrabbit_)) - [ZEIT](https://zeit.co)