Usage

There are two ways to deliver the images:

  • https://generator.opengraphimg.com/: we denominate this as production because going to deliver to you a cached image with a faster response time.
  • https://generator.opengraphimg.com/view: we denominate this as development every time that you make a change to this URL is going to retrieve you an actual image, without cache to experiment how you going to see it in production.

Requirements

1. Encoded title

Depending on which language or framework you are using you need to encode the title two times. Here are some examples:

// Dependencies
import React from "react";

export default () => {
  const title =
    'All you have to do is pass parameters to the URL 🙌 <br /> <small class="text-2xl">You can put HTML if you want</small>';

  // Render
  return (
    <img
      src={`https://generator.opengraphimg.com/?title=${encodeURIComponent(
        encodeURIComponent(title)
      )}`}
      alt=""
    />
  );
};
<template>
  <div>
    <img :src="`https://generator.opengraphimg.com/?title=${title}`" alt="" />
  </div>
</template>

<script>
export default {
  computed: {
    title() {
      const title =
        'All you have to do is pass parameters to the URL 🙌 <br /> <small class="text-2xl">You can put HTML if you want</small>';

      return encodeURIComponent(encodeURIComponent(title));
    },
  },
};
</script>
<?php
$title = 'All you have to do is pass parameters to the URL 🙌 <br /> <small class="text-2xl">You can put HTML if you want</small>';

echo '<img src="https://generator.opengraphimg.com/?title=' . rawurlencode(rawurlencode($title)) . '" style="width: 100%;" />';
?>
<img id="myImage" src="" alt="" style="width: 100%;" />

<script>
  (function() {
    const img = document.getElementById("myImage");

    const title =
      'All you have to do is pass parameters to the URL 🙌 <br /> <small class="text-2xl">You can put HTML if you want</small>';
    const encodedTitle = encodeURIComponent(encodeURIComponent(title));

    img.src = `https://generator.opengraphimg.com/?title=${encodedTitle}`;
  })();
</script>

Development

All you have to do is pass parameters to the URL https://generator.opengraphimg.com/view? like this:

Loading CodeSandbox...

Remember: this url is only to test how you will see the image, it's not optimized for production

Production

All you have to do is pass parameters to the URL https://generator.opengraphimg.com/? like this:

Loading CodeSandbox...

Load times

Loading CodeSandbox...

As you can see in the benchmark only the production url is giving very fast load times for the images, is the only url optimized to social media

You can enter to de Codesandbox example and try it by yourself here