Skip to content

Latest commit

 

History

History
50 lines (28 loc) · 1.57 KB

README.md

File metadata and controls

50 lines (28 loc) · 1.57 KB
Raw

Egghead Open Graph Images

This automatically generates Open Graph images for Egghead courses.

Navigate to https://og-image-egghead-course.now.sh followed by the slug of the course you want an image for.

For Example

https://og-image-egghead-course.now.sh/gatsby-theme-authoring creates this:

https://og-image-egghead-course.now.sh/vue-and-socket-io-for-real-time-communication creates this:

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>