og-image/README.md

<a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fog-image&demo-title=OG%20Image%20Generator&demo-description=A%20service%20that%20generates%20dynamic%20Open%20Graph%20images&demo-url=https%3A%2F%2Fog-image.vercel.app%2F&demo-image=https%3A%2F%2Fog-image.vercel.app%2FOpen%2520Graph%2520Image%2520as%2520a%2520Service.png%3Ftheme%3Dlight%26md%3D1%26fontSize%3D95px%26images%3Dhttps%253A%252F%252Fassets.vercel.com%252Fimage%252Fupload%252Ffront%252Fassets%252Fdesign%252Fzeit-black-triangle.svg"><img src="https://vercel.com/button" alt="Deploy with Vercel" align="right" width="128"/></a>

# [Open Graph Image as a Service](https://og-image.vercel.app)

<a href="https://twitter.com/vercel">
    <img align="right" src="https://og-image.vercel.app/tweet.png" height="300" />
</a>

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](http://ogp.me) says you can put a `<meta>` tag in the `<head>` of a webpage to define this image.

It looks like the following:

```html
<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.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:

```html
<head>
  <title>Hello World</title>
  <meta property="og:image" content="https://og-image.vercel.app/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](https://github.com/vercel/og-image/blob/main/CONTRIBUTING.md) for more info)
5. Remove all configuration inside `vercel.json` besides `rewrites`
6. Run locally with `vercel dev` and visit [localhost:3000](http://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. Connect [Vercel for GitHub](https://vercel.com/github) to automatically deploy each time you `git push` 🚀

## Authors

- Steven ([@styfle](https://twitter.com/styfle)) - [Vercel](https://vercel.com)
- Evil Rabbit ([@evilrabbit](https://twitter.com/evilrabbit_)) - [Vercel](https://vercel.com)
Update README.md (#177) 2021-11-24 22:49:09 +00:00			<a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fog-image&demo-title=OG%20Image%20Generator&demo-description=A%20service%20that%20generates%20dynamic%20Open%20Graph%20images&demo-url=https%3A%2F%2Fog-image.vercel.app%2F&demo-image=https%3A%2F%2Fog-image.vercel.app%2FOpen%2520Graph%2520Image%2520as%2520a%2520Service.png%3Ftheme%3Dlight%26md%3D1%26fontSize%3D95px%26images%3Dhttps%253A%252F%252Fassets.vercel.com%252Fimage%252Fupload%252Ffront%252Fassets%252Fdesign%252Fzeit-black-triangle.svg"><img src="https://vercel.com/button" alt="Deploy with Vercel" align="right" width="128"/></a>
Add deploy button at top of readme (#100) 2019-10-14 19:18:16 +00:00
Update to vercel.app suffix (#130) 2020-08-11 19:38:08 +00:00			`# [Open Graph Image as a Service](https://og-image.vercel.app)`
Create README.md 2019-01-29 22:12:25 +00:00
Update broken readme tweet banner (#132) * fix: update dead readme banner * Update link Co-authored-by: Steven <steven@ceriously.com> 2020-08-14 23:07:54 +00:00			`<a href="https://twitter.com/vercel">`
			`<img align="right" src="https://og-image.vercel.app/tweet.png" height="300" />`
Add link to twitter 2019-02-05 14:29:49 +00:00			`</a>`

Update README.md 2019-02-06 15:10:08 +00:00			Serverless service that generates dynamic Open Graph images that you can embed in your `<meta>` tags.
Create README.md 2019-01-29 22:12:25 +00:00
Update description (#71) * Update description * Update readme 2019-03-28 13:10:39 +00:00			`For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached.`

Add link to twitter 2019-02-05 14:29:49 +00:00			`See the image embedded in the tweet for a real use case.`
Add screenshot of tweet 2019-02-05 14:23:26 +00:00

Create README.md 2019-01-29 22:12:25 +00:00			`## What is an Open Graph Image?`

Update README.md 2019-02-04 18:17:59 +00:00			`Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup?`
Create README.md 2019-01-29 22:12:25 +00:00			`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](http://ogp.me) says you can put a `<meta>` tag in the `<head>` of a webpage to define this image.

			`It looks like the following:`

			```html
			`<head>`
Update readme 2019-02-25 18:51:21 +00:00			`<title>Title</title>`
			`<meta property="og:image" content="http://example.com/logo.jpg" />`
Create README.md 2019-01-29 22:12:25 +00:00			`</head>`
			```

			`## Why use this service?`

Update README.md (#117) 2020-05-26 16:00:21 +00:00			`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.`
Update README.md 2019-02-04 18:17:59 +00:00
Update to vercel.app suffix (#130) 2020-08-11 19:38:08 +00:00			That's where `og-image.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!
Create README.md 2019-01-29 22:12:25 +00:00
			`It looks like the following:`

			```html
			`<head>`
Update readme 2019-02-25 18:51:21 +00:00			`<title>Hello World</title>`
Update to vercel.app suffix (#130) 2020-08-11 19:38:08 +00:00			`<meta property="og:image" content="https://og-image.vercel.app/Hello%20World.png" />`
Create README.md 2019-01-29 22:12:25 +00:00			`</head>`
			```

Update readme 2019-02-25 18:51:21 +00:00			Now try changing the text `Hello%20World` to the title of your choosing and watch the magic happen ✨
Create README.md 2019-01-29 22:12:25 +00:00
Update README.md 2019-02-04 18:17:59 +00:00			`## Deploy your own`
Create README.md 2019-01-29 22:12:25 +00:00
			`You'll want to fork this repository and deploy your own image generator.`

			`1. Click the fork button at the top right of GitHub`
Fix typos 2019-01-30 22:59:43 +00:00			2. Clone the repo to your local machine with `git clone URL_OF_FORKED_REPO_HERE`
Update README.md 2019-04-01 12:45:13 +00:00			3. Change directory with `cd og-image`
Rename master to main 2020-08-11 19:53:00 +00:00			`4. Make changes by swapping out images, changing colors, etc (see [contributing](https://github.com/vercel/og-image/blob/main/CONTRIBUTING.md) for more info)`
Update README.md (#155) 2021-04-03 17:49:15 +00:00			5. Remove all configuration inside `vercel.json` besides `rewrites`
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 2020-05-27 23:15:22 +00:00			6. Run locally with `vercel dev` and visit [localhost:3000](http://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
Update README.md (#177) 2021-11-24 22:49:09 +00:00			8. Connect [Vercel for GitHub](https://vercel.com/github) to automatically deploy each time you `git push` 🚀
Update README.md 2019-02-04 18:17:59 +00:00
Create README.md 2019-01-29 22:12:25 +00:00			`## Authors`

Rename ZEIT Now to Vercel (#113) https://vercel.com/blog/zeit-is-now-vercel 2020-04-23 22:53:55 +00:00			`- Steven ([@styfle](https://twitter.com/styfle)) - [Vercel](https://vercel.com)`
			`- Evil Rabbit ([@evilrabbit](https://twitter.com/evilrabbit_)) - [Vercel](https://vercel.com)`