Documentation

Une seule route compte : GET /v1/og. Tout se passe dans la chaîne de requête, ce qui la rend utilisable partout où l'on peut écrire une URL.

Démarrer en trois minutes

1. Connectez-vous sur app.myog.dev avec GitHub. Une clé publique est créée automatiquement.
2. Collez l'URL dans une balise <meta property="og:image">.
3. Vérifiez le rendu avec le validateur de la plateforme visée. Le premier appel génère l'image, les suivants la servent depuis le cache.

Paramètres

Les alias courts existent pour garder les URL lisibles dans le HTML. Ils produisent exactement la même image et la même entrée de cache que leur forme longue.

Paramètres acceptés par GET /v1/og
Paramètre	Alias	Type	Défaut	Contraintes
title	t	string	—	Requis. 1 à 120 caractères.
subtitle	s	string	—	Jusqu’à 200 caractères.
template	tpl	enum	minimal	minimal · gradient · terminal · article
theme	—	enum	dark	dark · light
accent	—	hex	#6366f1	Avec ou sans dièse.
author	a	string	—	Jusqu’à 60 caractères.
tag	—	string	—	Badge, jusqu’à 24 caractères.
w	—	int	1200	De 600 à 2000.
h	—	int	630	De 315 à 1200.
format	fmt	enum	png	png (jpeg et webp à venir).
key	—	string	—	Requis. Votre clé API.

En-têtes de réponse

X-MyOG-Cache: HIT-EDGE, HIT-R2 ou MISS. Utile pour vérifier votre intégration.
X-MyOG-Render-Time: Durée du rendu en millisecondes. Absent sur un cache hit.
X-MyOG-Quota-Remaining: Images restantes sur le mois en cours.
X-Request-Id: Identifiant de la requête, à nous communiquer en cas de problème.

Clés publiques et clés secrètes

myog_pk_…

Destinée au HTML, donc visible. Protégez-la en restreignant les domaines autorisés depuis le dashboard.

myog_sk_…

Usage serveur uniquement. L'API la refuse si elle détecte un en-tête Origin de navigateur.

Guides d'intégration

HTML

<meta property="og:image"
  content="https://api.myog.dev/v1/og?title=Mon+article&template=gradient&key=myog_pk_..." />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

Next.js (App Router)

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  const og = new URL('https://api.myog.dev/v1/og');
  og.searchParams.set('title', post.title);
  og.searchParams.set('subtitle', post.excerpt);
  og.searchParams.set('template', 'article');
  og.searchParams.set('key', process.env.MYOG_PUBLIC_KEY!);

  return { openGraph: { images: [og.toString()] } };
}

Astro

---
const og = new URL('https://api.myog.dev/v1/og');
og.searchParams.set('title', Astro.props.title);
og.searchParams.set('key', import.meta.env.PUBLIC_MYOG_KEY);
---
<meta property="og:image" content={og.toString()} />

Nuxt

useSeoMeta({
  ogImage: () => {
    const og = new URL('https://api.myog.dev/v1/og');
    og.searchParams.set('title', post.value.title);
    og.searchParams.set('key', useRuntimeConfig().public.myogKey);
    return og.toString();
  },
});

WordPress

add_action('wp_head', function () {
  if (!is_single()) return;
  $url = add_query_arg([
    'title'    => get_the_title(),
    'template' => 'article',
    'key'      => MYOG_KEY,
  ], 'https://api.myog.dev/v1/og');
  printf('<meta property="og:image" content="%s" />', esc_url($url));
});

Comment fonctionne le cache

Chaque combinaison de paramètres produit une empreinte. La première requête génère l'image et la stocke ; les suivantes la servent depuis le point de présence le plus proche. Deux URL équivalentes — mêmes valeurs dans un ordre différent, ou alias au lieu du nom long — partagent la même entrée de cache.

Votre clé API n'entre pas dans le calcul de l'empreinte. C'est volontaire : cela maximise le taux de cache, et c'est ce qui rend le plan gratuit soutenable.

Une erreur inattendue ? Le catalogue d'erreurs décrit chaque code et la manière de le corriger.