GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects â†’ vercel â†’ Og Image

vercel / Og Image

Licence: mit
Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc

Programming Languages

typescript
32286 projects
CSS
56736 projects
HTML
75241 projects

Labels

imagegeneratoropen-graphtwitter-cardsimage-generatorvercel

Projects that are alternatives of or similar to Og Image

flyyer-wp
👉 Visit the wiki: https://github.com/useflyyer/flyyer-wp/wiki | Generate social share images with web technologies
Stars: ✭ 13 (-99.52%)
Mutual labels:  open-graph, twitter-cards, image-generator
flyyer-python
Python helpers to create https://flyyer.io URLs for link previews | Manage your og:images from a single dashboard
Stars: ✭ 11 (-99.59%)
Mutual labels:  open-graph, twitter-cards, image-generator
flyyer-ruby
Ruby helpers to create https://cdn.flyyer.io URLs | Og:Image as a Service
Stars: ✭ 13 (-99.52%)
Mutual labels:  open-graph, twitter-cards, image-generator
axiom
Axiom - A Hugo Theme. GitTip: https://gitcoin.co/tip?username=jhauraw
Stars: ✭ 67 (-97.52%)
Mutual labels:  open-graph, vercel
Paintbynumbersgenerator
Paint by numbers generator
Stars: ✭ 85 (-96.86%)
Mutual labels:  image, generator
SeoTags
SeoTags create all SEO tags you need such as meta, link, twitter card (twitter:), open graph (og:), and JSON-LD schema (structred data).
Stars: ✭ 113 (-95.82%)
Mutual labels:  open-graph, twitter-cards
furlex
A structured data extraction tool written in Elixir
Stars: ✭ 42 (-98.45%)
Mutual labels:  open-graph, twitter-cards
Php Initial Avatar Generator
Generate avatars with initials from user names.
Stars: ✭ 302 (-88.84%)
Mutual labels:  image, generator
Swift Video Generator
Stars: ✭ 517 (-80.89%)
Mutual labels:  image, generator
Gopherkon
Go mascot image constructor. Create your cute own gopher.
Stars: ✭ 86 (-96.82%)
Mutual labels:  image, generator
Doctron
Docker-powered html convert to pdf(html2pdf), html to image(html2image like jpeg,png),which using chrome(golang) kernel, add watermarks to pdf, convert pdf to images etc.
Stars: ✭ 141 (-94.79%)
Mutual labels:  image
Gf Cli
GoFrame Command Line Interface, which is your helpmate for building GoFrame application with convenience.
Stars: ✭ 143 (-94.72%)
Mutual labels:  generator
Flowiz
Converts Optical Flow files to images and optionally compiles them to a video. Flow viewer GUI is also available. Check out mockup right from Github Pages:
Stars: ✭ 144 (-94.68%)
Mutual labels:  image
Generator Rs
rust stackful generator library
Stars: ✭ 146 (-94.6%)
Mutual labels:  generator
React Avatar Editor
Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface.
Stars: ✭ 1,846 (-31.78%)
Mutual labels:  image
Jhipster Dotnetcore
JHipster.NET blueprint
Stars: ✭ 144 (-94.68%)
Mutual labels:  generator
Magick.net
The .NET library for ImageMagick
Stars: ✭ 2,071 (-23.47%)
Mutual labels:  image
Image Shadow
Simple and small Javascript script to display the shadow of an image!
Stars: ✭ 142 (-94.75%)
Mutual labels:  image
Asyncimage
Asynchronous Image Loading from URL in SwiftUI
Stars: ✭ 139 (-94.86%)
Mutual labels:  image
Hephotopicker
自由定制支持视频，图片的相册选择器
Stars: ✭ 146 (-94.6%)
Mutual labels:  image
View All Similar Projects ➔

Deploy with Vercel

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.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://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 for more info)
  5. 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. Connect Vercel for GitHub to automatically deploy each time you git push 🚀

Authors

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].