flip/og-image
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/og-image.git synced 2026-02-06 10:46:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
140 Commits 1 Branch 0 Tags 7.8 MiB
TypeScript 69.6%
CSS 19.2%
HTML 11.2%
bce2b04175
Go to file
Steven bce2b04175 Add support for now dev (#72) 
* Remove hacks to support now dev

* Fix local development for now dev

* Update CONTRIBUTING.md

* Add now dev to package.json
2019-03-31 18:09:16 -07:00
.fonts Add monospace font 2019-02-14 12:44:48 -05:00
.github Add codeowners file 2019-03-13 16:33:27 -04:00
public Update description (#71) 2019-03-28 09:10:39 -04:00
src Add support for now dev (#72) 2019-03-31 18:09:16 -07:00
.gitignore Improve performance 2019-02-11 17:34:05 -05:00
.nowignore Improve performance 2019-02-11 17:34:05 -05:00
.yarnrc Move to zeit org (#67) 2019-03-04 13:34:38 -05:00
CONTRIBUTING.md Add support for now dev (#72) 2019-03-31 18:09:16 -07:00
Dockerfile Add Dockerfile 2019-02-05 13:27:23 -08:00
LICENSE Create LICENSE 2019-01-29 17:18:30 -05:00
now.json Add both aliases: now.sh and zeit.sh (#68) 2019-03-04 14:53:35 -05:00
package.json Add support for now dev (#72) 2019-03-31 18:09:16 -07:00
README.md Update description (#71) 2019-03-28 09:10:39 -04:00
tsconfig.json Enable esModuleInterop in tsconfig.json 2019-02-10 21:41:21 -05:00
yarn.lock Move to zeit org (#67) 2019-03-04 13:34:38 -05:00

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?

Read the blog post 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:

<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. Make changes by swapping out images, changing colors, etc (see contributing for more)
  4. Deploy by running now from the CLI (if you don't already have it, run npm install -g now)

Alternatively, you can do a one-click to deploy with the button below.

Deploy to now

Once you have an image generator that sparks joy, you can setup automatic Now + GitHub deployments so that pushing to master is also deploying to production! 🚀

Authors