Uso

Hay dos formas de entregar las imágenes:

  • https://generator.opengraphimg.com/: denominamos esto como producción porque le entregaremos una imagen en caché con un tiempo de respuesta más rápido.
  • https://generator.opengraphimg.com/view: a esto lo denominamos desarrollo cada vez que hagas un cambio en esta URL te va a recuperar una imagen real, sin caché para experimentar cómo la vas a ver en producción.

Requerimientos

1. Título codificado

Dependiendo del lenguaje de programación o framework que estés utilizando debes codificar el título dos veces. Aquí hay unos ejemplos:

// 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>

Desarrollo

Todo lo que tienes que hacer es pasar parámetros a la URL https://generator.opengraphimg.com/view? Así:

Loading CodeSandbox...

Recuerde: esta URL es solo para probar cómo se verá la imagen, no está optimizada para producción.

Producción

Todo lo que tienes que hacer es pasar parámetros a la URL https://generator.opengraphimg.com/? Así:

Loading CodeSandbox...

Tiempos de carga

Loading CodeSandbox...

Como puedes ver en el benchmark, solo la URL de producción está dando tiempos de carga muy rápidos para las imágenes, es la única URL optimizada para las redes sociales.

Puede ingresar al ejemplo de Codesandbox y probarlo tu mismo aquí