← Blog

Open Graph العلامات في Next.js: دليل المطور لعام 2026

Next.js يجعل علامات OG سهلة باستخدام Metadata API. إليك كل ما تحتاج إلى معرفته — بدءًا من صور OG الثابتة إلى صور OG الديناميكية.

لست متأكدًا مما إذا كانت علامات OG Next.js صحيحة؟

تحقق من علامات Open Graph مجانًا باستخدام Proovd — الصق عنوان URL وشاهد بالضبط كيف يبدو على X وLinkedIn وSlack وDiscord وWhatsApp وReddit.

إجابة سريعة

  • Next.js 13+ يستخدم واجهة برمجة تطبيقات البيانات الوصفية لعلامات OG
  • الصفحات الثابتة: تصدير كائن metadata
  • الصفحات الديناميكية: استخدم generateMetadata()
  • صور OG الديناميكية: استخدم @vercel/og

Next.js جهاز توجيه التطبيقات - البيانات الوصفية الثابتة

في Next.js 13+ (جهاز توجيه التطبيقات)، إن أبسط طريقة لتعيين علامات OG هي تصدير بيانات التعريف في تخطيطك أو ملف الصفحة:

export const metadata = {
  title: 'My Next.js App',
  description: 'A Next.js app with OG tags',
  openGraph: {
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
  },
};

يؤدي هذا تلقائيًا إلى إنشاء علامات الصحيحة في صفحتك . Next.js يتولى الباقي.

Next.js جهاز توجيه التطبيقات - بيانات التعريف الديناميكية

بالنسبة للصفحات الديناميكية (منشورات المدونة، صفحات المنتج)، استخدم generateMetadata():

import { notFound } from 'next/navigation';
import { getPost } from '@/lib/posts';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

صور OG الديناميكية باستخدام @vercel/og

للحصول على صور OG مخصصة (مع ألوان علامتك التجارية وعناوين منشوراتك وما إلى ذلك)، استخدم @vercel/og:

// app/api/og/route.ts
import { ImageResponse } from '@vercel/og';

export function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      

        

          {title}
        

      

    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

ثم قم بالإشارة إلى مسار واجهة برمجة التطبيقات هذا في بيانات التعريف الخاصة بك:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
    twitter: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
  };
}

Next.js راوتر الصفحات

إذا كنت تستخدم جهاز توجيه الصفحات الأقدم، فاستخدم الحزمة next/head أو next-seo:

import Head from 'next/head';

export default function PostPage() {
  return (
    <Head>
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.coverImage} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={post.title} />
      <meta name="twitter:image" content={post.coverImage} />
    </Head>
  );
}

أو استخدم next-seo للحصول على واجهة برمجة تطبيقات أكثر نظافة:

import { NextSeo } from 'next-seo';

<NextSeo
  title={post.title}
  description={post.excerpt}
  openGraph={{
    title: post.title,
    description: post.excerpt,
    images: [{ url: post.coverImage }],
    type: 'article',
  }}
  twitter={{
    type: 'summary_large_image',
  }}
/>

قائمة مراجعة الإصلاح السريع

  1. استخدم واجهة برمجة تطبيقات البيانات الوصفية للصفحات الثابتة
  2. استخدم generateMetadata() للصفحات الديناميكية
  3. قم بتعيين خصائص openGraph وtwitter
  4. استخدم @vercel/og للحصول على صور OG الديناميكية
  5. اختبر باستخدام Proovd للتحقق على جميع المنصات

الأسئلة المتداولة

هل يعرض Next.js علامات OG تلقائيًا في HTML؟

نعم. يقوم Next.js بإدخال البيانات التعريفية كعلامات في HTML الذي يعرضه الخادم، بحيث تراها برامج الزحف بدون JavaScript.

هل يمكنني استخدام صور OG الديناميكية مع وظائف Vercel Edge؟

نعم. يعمل @vercel/og على Vercel Edge ويقوم بإنشاء صور أثناء التنقل. تتم الإشارة إلى عنوان URL للصورة في البيانات الوصفية الخاصة بك، وتجلبه الأنظمة الأساسية عندما تزحف إلى صفحتك.

مقالات ذات صلة

تحقق من علامات Next.js OG الخاصة بك عبر جميع المنصات

تحقق من علامات Open Graph مجانًا باستخدام Proovd — الصق عنوان URL وشاهد المعاينة على X وLinkedIn وSlack وDiscord وWhatsApp وReddit.