Generieren Sie Open Graph-Bilder mit einem API-Aufruf, kein Next.js erforderlich

Astro-Integration: Generieren Sie OG-Bilder zur Erstellungszeit

Die statische Site-Generierung von Astro macht dies besonders sauber. Erstellen Sie eine dynamische API-Route, die abruft OG-Images während des Builds und stellt sie statisch bereit .png Dateien.

// src/pages/og/[slug].png.ts
import type { APIRoute, GetStaticPaths } from 'astro';

// Your posts data source (markdown, CMS, database, etc.)
import { getAllPosts } from '@/lib/posts';

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { title: post.title, description: post.description },
  }));
};

export const GET: APIRoute = async ({ props }) => {
  const res = await fetch('https://api.botoi.com/v1/og/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      title: props.title,
      description: props.description,
      theme: 'dark',
    }),
  });

  const imageBuffer = await res.arrayBuffer();

  return new Response(imageBuffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=31536000, immutable',
    },
  });
};

Während astro build, diese Route generiert für jeden Beitrag ein PNG. Die Ausgabedateien landen in dein dist/og/ Verzeichnis als statische Assets. Keine Laufzeit-Image-Generierung, kein Serverless Funktion, kein Kaltstart.

Verweisen Sie auf die Bilder in Ihrem Seitenkopf:

<!-- In your BaseLayout.astro or page head -->
<meta property="og:image" content={\`https://yoursite.com/og/\${slug}.png\`} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={\`https://yoursite.com/og/\${slug}.png\`} />

Jede Seite erhält eine einzigartige Social Card, die einmal während der Erstellung generiert und von CDNs für immer zwischengespeichert wird.

Django- und Rails-Integration

Vom Server gerenderte Frameworks können OG-Bilder bei Bedarf generieren und das Ergebnis zwischenspeichern.

Django

# views.py
import requests
from django.http import HttpResponse
from django.views.decorators.cache import cache_page


@cache_page(60 * 60 * 24)  # Cache for 24 hours
def og_image(request, slug):
    post = get_object_or_404(Post, slug=slug)

    response = requests.post(
        'https://api.botoi.com/v1/og/generate',
        json={
            'title': post.title,
            'description': post.description,
            'theme': 'dark',
        },
        timeout=5,
    )

    return HttpResponse(
        response.content,
        content_type='image/png',
    )

# urls.py
urlpatterns = [
    path('og/<slug:slug>.png', views.og_image, name='og_image'),
]

Der @cache_page Decorator speichert das generierte Bild 24 Stunden lang. Nach dem ersten Auf Anfrage stellt Django das zwischengespeicherte PNG direkt bereit, ohne erneut auf die API zuzugreifen.

Schienen

# app/controllers/og_images_controller.rb
class OgImagesController < ApplicationController
  def show
    post = Post.find_by!(slug: params[:slug])

    response = HTTP.post(
      'https://api.botoi.com/v1/og/generate',
      json: {
        title: post.title,
        description: post.description,
        theme: 'dark'
      }
    )

    expires_in 24.hours, public: true
    send_data response.body.to_s, type: 'image/png', disposition: 'inline'
  end
end

# config/routes.rb
get 'og/:slug.png', to: 'og_images#show'

Beide Beispiele folgen dem gleichen Muster: Suchen Sie den Beitrag nach Slug, POSTEN Sie den Titel und die Beschreibung an die API senden und das PNG mit Caching-Headern zurückgeben. Das Framework übernimmt das Caching; Die API-Handles Bilderzeugung.

Headless CMS-Integration: Bei Veröffentlichung generieren

Wenn Ihre Inhalte in einem Headless-CMS wie Strapi, Contentful oder Sanity gespeichert sind, können Sie OG generieren Bilder, wenn ein Redakteur einen Beitrag veröffentlicht oder aktualisiert. Verknüpfen Sie einen Webhook, der Inhalte auslöst Änderungen.

Allgemeiner Webhook-Handler

// Webhook handler (any Node.js server or serverless function)
import { writeFileSync } from 'fs';

export async function handleCmsPublish(payload) {
  const { title, description, slug } = payload.entry;

  const res = await fetch('https://api.botoi.com/v1/og/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title, description, theme: 'light' }),
  });

  const buffer = Buffer.from(await res.arrayBuffer());

  // Save to your public/static directory or upload to S3/R2
  writeFileSync(\`./public/og/\${slug}.png\`, buffer);

  console.log(\`Generated OG image for: \${slug}\`);
}

Strapi-Lebenszyklushaken

// Strapi lifecycle hook: src/api/post/content-types/post/lifecycles.js
module.exports = {
  async afterUpdate(event) {
    const { result } = event;

    const res = await fetch('https://api.botoi.com/v1/og/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: result.title,
        description: result.description,
        theme: 'dark',
      }),
    });

    // Upload to your CDN or save locally
    const buffer = Buffer.from(await res.arrayBuffer());
    await strapi.plugins.upload.services.upload.upload({
      data: { path: \`og/\${result.slug}.png\` },
      files: { buffer, name: \`\${result.slug}.png\`, type: 'image/png' },
    });
  },
};

Dieser Ansatz ist nützlich für Teams, in denen Inhaltsredakteure über ein CMS veröffentlichen, Entwickler jedoch nicht Ich möchte für jede Textänderung eine Build-Pipeline ausführen. Das OG-Bild wird automatisch neu generiert, wenn das Änderungen des Beitragstitels oder der Beschreibung.

Bonus: Extrahieren Sie OG-Metadaten aus einer beliebigen URL

Die Botoi-API bietet auch /v1/url-metadata, was das Gegenteil bewirkt: Bei gegebener URL wird abgerufen die Seite und extrahiert ihre Open Graph-Tags. Dies ist nützlich zum Erstellen von Linkvorschauen und sozialen Karten Validatoren oder SEO-Audit-Tools.

curl -X POST https://api.botoi.com/v1/url-metadata \\
  -H "Content-Type: application/json" \\
  -d '{"url": "https://github.com/astro-community/astro-embed"}'

Antwort:

{
  "success": true,
  "data": {
    "url": "https://github.com/astro-community/astro-embed",
    "status": 200,
    "title": "GitHub - astro-community/astro-embed",
    "description": "Components to embed third-party media in Astro projects",
    "og": {
      "title": "astro-embed",
      "description": "Components to embed third-party media in Astro projects",
      "image": "https://opengraph.githubassets.com/...",
      "type": "object",
      "url": "https://github.com/astro-community/astro-embed",
      "site_name": "GitHub"
    }
  }
}

Verwenden Sie dies, um Linkvorschau-Komponenten in Ihrer App zu erstellen:

async function getLinkPreview(url: string) {
  const res = await fetch('https://api.botoi.com/v1/url-metadata', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ url }),
  });

  const { data } = await res.json();

  return {
    title: data.og?.title ?? data.title,
    description: data.og?.description ?? data.description,
    image: data.og?.image,
    siteName: data.og?.site_name,
  };
}

Kombinieren Sie beide Endpunkte: verwenden /v1/url-metadata um zu überprüfen, wie Ihre Seiten in sozialen Netzwerken angezeigt werden Plattformen und /v1/og/generate um die Bilder zu erstellen, die sie gut aussehen lassen.

Warum nicht selbst Satori leiten?

Du kannst. Satori ist Open Source und produziert qualitativ hochwertige Ergebnisse. Aber es selbst zu betreiben bedeutet:

• Benutzerdefinierte Schriftarten installieren und bündeln (Satori verwendet keine Systemschriftarten)
• Einrichten einer Node.js-Laufzeit oder Edge-Funktion für die Bildwiedergabe
• Schreiben von JSX-zu-SVG-Vorlagen und Konvertieren von SVG in PNG mit resvg
• Umgang mit Speicherbeschränkungen auf serverlosen Plattformen beim Rendern großer Bilder
• Pflege der Pipeline, während sich Satoris API weiterentwickelt

Ein API-Aufruf ersetzt all das durch eine einzige HTTP-Anfrage. Wenn Ihr OG-Bild benötigt wird Der API-Ansatz ist unkompliziert (Titel + Beschreibung + Branding), erspart stundenlange Einrichtung und laufende Wartung.