قم بإنشاء صور Open Graph باستدعاء واجهة برمجة التطبيقات (API) مرة واحدة، دون الحاجة إلى Next.js

التكامل الفلكي: إنشاء صور OG في وقت الإنشاء

إنشاء موقع Astro الثابت يجعل هذا نظيفًا بشكل خاص. أنشئ مسارًا ديناميكيًا لواجهة برمجة التطبيقات (API) لجلب صور OG أثناء الإنشاء وتعمل كصور ثابتة .png ملفات.

// 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',
    },
  });
};

خلال astro build، يقوم هذا المسار بإنشاء ملف PNG لكل مشاركة. ملفات الإخراج تهبط في الخاص بك dist/og/ الدليل كأصول ثابتة. لا يوجد إنشاء صور في وقت التشغيل، ولا يوجد خادم وظيفة، لا يبدأ الباردة.

قم بالإشارة إلى الصور الموجودة في رأس صفحتك:

<!-- 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\`} />

تحصل كل صفحة على بطاقة اجتماعية فريدة، يتم إنشاؤها مرة واحدة أثناء الإنشاء ويتم تخزينها مؤقتًا إلى الأبد بواسطة شبكات CDN.

تكامل جانغو وريلز

يمكن للأطر المقدمة من الخادم إنشاء صور OG عند الطلب وتخزين النتيجة مؤقتًا.

جانغو

# 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'),
]

ال @cache_page يقوم مصمم الديكور بتخزين الصورة التي تم إنشاؤها لمدة 24 ساعة. بعد الأول عند الطلب، يقدم Django ملف PNG المخزن مؤقتًا مباشرة دون الضغط على واجهة برمجة التطبيقات (API) مرة أخرى.

القضبان

# 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'

يتبع كلا المثالين نفس النمط: ابحث عن المنشور حسب السلسلة، ثم انشر العنوان والوصف إلى واجهة برمجة التطبيقات (API)، وأعد ملف PNG مع رؤوس التخزين المؤقت. يعالج الإطار التخزين المؤقت. يعالج API توليد الصورة.

تكامل CMS بدون رأس: إنشاء عند النشر

إذا كان المحتوى الخاص بك موجودًا في نظام إدارة محتوى بدون رأس مثل Strapi أو Contentful أو Sanity، فيمكنك إنشاء OG الصور عندما ينشر المحرر منشورًا أو يقوم بتحديثه. قم بتوصيل خطاف ويب يتم تشغيله على المحتوى التغييرات.

معالج webhook العام

// 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 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' },
    });
  },
};

يعد هذا الأسلوب مفيدًا للفرق التي ينشر فيها محررو المحتوى من خلال نظام إدارة المحتوى (CMS) ولا يقوم المطورون بذلك تريد تشغيل خط أنابيب البناء لكل تغيير في النص. يتم تجديد صورة OG تلقائيًا عند عنوان المشاركة أو تغييرات الوصف.

المكافأة: استخراج البيانات التعريفية لـ OG من أي عنوان URL

توفر واجهة برمجة تطبيقات botoi أيضًا /v1/url-metadata, which does the reverse: given a URL, it fetches الصفحة واستخراج علامات Open Graph الخاصة بها. This is useful for building link previews, social card أدوات التحقق من الصحة، أو أدوات تدقيق تحسين محركات البحث (SEO).

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

إجابة:

{
  "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"
    }
  }
}

استخدم هذا لإنشاء مكونات معاينة الرابط في تطبيقك:

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,
  };
}

اجمع بين نقطتي النهاية: استخدم /v1/url-metadata للتحقق من كيفية ظهور صفحاتك على مواقع التواصل الاجتماعي المنصات، و /v1/og/generate لإنشاء الصور التي تجعلها تبدو جيدة.

لماذا لا تدير ساتوري بنفسك؟

أنت تستطيع. ساتوري مفتوح المصدر وينتج مخرجات عالية الجودة. لكن تشغيله بنفسك يعني:

• Installing and bundling custom fonts (Satori doesn't use system fonts)
• إعداد وقت تشغيل Node.js أو وظيفة Edge لعرض الصور
• كتابة قوالب JSX إلى SVG وتحويل SVG إلى PNG باستخدام resvg
• التعامل مع حدود الذاكرة على الأنظمة الأساسية التي لا تحتوي على خادم عند عرض صور كبيرة
• الحفاظ على خط الأنابيب مع تطور واجهة برمجة تطبيقات Satori

يستبدل استدعاء API كل ذلك بطلب HTTP واحد. إذا كانت احتياجات صورة OG الخاصة بك هي مباشرة (العنوان + الوصف + العلامة التجارية)، يوفر نهج واجهة برمجة التطبيقات (API) ساعات من الإعداد الصيانة المستمرة.