Renderuj w loaderze, wypisz adres w eksporcie meta.
`loader` w Remiksie działa wyłącznie na serwerze, więc klucz API tam zostaje; jego wynik trafia do eksportu `meta`, który Remix renderuje w nagłówku dokumentu po stronie serwera — dokładnie tam, gdzie roboty podglądu linków czytają og:image. Ten sam wzorzec działa w React Routerze v7 i nowszym, następcy Remiksu: tam `meta` dostaje `loaderData` zamiast `data`, a loader zwraca zwykły obiekt zamiast `json()`. (Remix 3 to osobny, nowszy framework, którego ten przykład nie obejmuje.)
app/routes/blog.$slug.tsx
import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
import { json } from '@remix-run/node';
import { getPost } from '~/models/post.server';
export async function loader({ params }: LoaderFunctionArgs) {
const post = await getPost(params.slug!);
const res = await fetch('https://shareglint.com/v1/images?wait=true', {
method: 'POST',
headers: {
Authorization: `Bearer ${process.env.SHAREGLINT_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
template: 'blog-og',
modifications: { title: post.title, author: post.author, site: 'yourblog.com' },
}),
});
const { url: ogImage } = (await res.json()) as { url: string };
return json({ post, ogImage });
}
export const meta: MetaFunction<typeof loader> = ({ data }) => [
{ title: data?.post.title },
{ property: 'og:title', content: data?.post.title },
{ property: 'og:image', content: data?.ogImage },
{ property: 'og:image:width', content: '1200' },
{ property: 'og:image:height', content: '630' },
{ name: 'twitter:card', content: 'summary_large_image' },
];Wygrywa meta najgłębszej dopasowanej trasy, a dokumentacja React Routera mówi wprost, że „the entire meta descriptor array is replaced, not merged” — cała tablica jest zastępowana, nie scalana. Trasa wpisu, która zwraca sam tytuł, gubi tagi og:image z layoutu nadrzędnego — zwracaj pełny zestaw, z obrazkiem, z każdej trasy, która ma go mieć.
Z ?wait=true czekasz na gotowy obrazek w tym samym połączeniu — zwykle około sekundy.
{
"id": "img_01m08s3ez1zcv28h335g9923bw",
"status": "completed",
"url": "https://cdn.shareglint.com/renders/img_01m08s3ez1zcv28h335g9923bw.png",
"duration_ms": 912
}100 obrazków miesięcznie za darmo, potem $9 za 2 000. Ten sam wpis wyrenderowany drugi raz zwraca istniejący adres i nie zużywa limitu — więc przebudowanie strony nic nie kosztuje.