دليل شامل لعلامات الميتا في Next.js 15 — من og:image إلى hreflang

ملخص أساسي

• يتيح Next.js 15 إدارة علامات الميتا الثابتة والديناميكية بشكل إعلاني من خلال واجهة برمجة التطبيقات للبيانات الوصفية المستندة إلى App Router.
• يمكن إنشاء og:image وtitle وdescription الديناميكية لكل صفحة تلقائيًا باستخدام دالة generateMetadata().
• يمكن التحكم في Twitter Card وhreflang وcanonical URL والبيانات المنظمة (JSON-LD) من ملف واحد.
• تؤدي علامات الميتا غير الصحيحة إلى أخطاء في المعاينة الاجتماعية وانخفاض في ترتيب البحث، لذا يجب التحقق منها قبل النشر باستخدام أداة فحص علامات الميتا.

ما هي واجهة برمجة التطبيقات للبيانات الوصفية في Next.js 15؟

تقدم واجهة برمجة التطبيقات للبيانات الوصفية Metadata API التي تحل محل طريقة التقليدية، والتي تم تقديمها مع App Router في Next.js 13. في Next.js 15، أصبحت هذه الواجهة أكثر تطورًا، حيث يمكن التحكم في علامات الميتا من خلال طريقتين: تصدير كائن metadata من ملفات layout.tsx وpage.tsx أو استخدام دالة generateMetadata().

البيانات الوصفية الثابتة

أبسط شكل هو تصدير كائن metadata مباشرة.

// app/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'دليل علامات الميتا في Next.js 15',
  description: 'كل شيء عن علامات الميتا في Next.js من og:image إلى hreflang',
}

تعتبر هذه الطريقة مناسبة للصفحات الثابتة التي يتم تحديد محتواها في وقت البناء. تُستخدم في الصفحات التي لا تتغير محتوياتها كثيرًا مثل الصفحة الرئيسية للمدونة أو صفحة التعريف.

البيانات الوصفية الديناميكية: generateMetadata()

في حالة وجود محتوى يتغير حسب معلمات URL مثل منشورات المدونة أو صفحات تفاصيل المنتجات، يتم استخدام دالة generateMetadata().

// app/blog/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { slug: string }
}

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const post = await fetchPost(params.slug)

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
    },
  }
}

تعمل generateMetadata() على الخادم، مما يتيح استعلامات قاعدة البيانات أو استدعاءات API الخارجية. القيمة المرجعة هي من نوع Metadata، حيث يقوم Next.js بإدخالها تلقائيًا في علامة .

كيف يتم إعداد og:image بشكل صحيح؟

تعتبر صورة Open Graph صورة المعاينة التي تظهر عند مشاركة الروابط على منصات التواصل الاجتماعي مثل KakaoTalk وSlack وTwitter. إذا تم إعدادها بشكل خاطئ، قد تظهر صورة فارغة أو تخطيط مكسور، مما يؤدي إلى انخفاض كبير في معدل النقرات.

إعداد og:image الأساسي

export const metadata: Metadata = {
  openGraph: {
    title: 'عنوان الصفحة',
    description: 'وصف الصفحة',
    url: 'https://example.com/blog/my-post',
    siteName: 'اسم الموقع',
    images: [
      {
        url: 'https://example.com/og/my-post.png',
        width: 1200,
        height: 630,
        alt: 'صورة تمثيلية للمنشور',
      },
    ],
    locale: 'ko_KR',
    type: 'article',
  },
}

إنشاء og:image الديناميكي في Next.js — ImageResponse

يدعم Next.js 15 وظيفة عرض صور OG ديناميكيًا على الخادم باستخدام ImageResponse من next/og. يمكن التحكم في التصميم من خلال الكود دون الحاجة إلى تحرير الصور.

// app/og/route.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') ?? 'عنوان افتراضي'

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 60,
          background: '#0f172a',
          color: 'white',
          width: '100%',
          height: '100%',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '40px',
        }}
      >
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

بعد ذلك، يمكن الإشارة إلى نقطة النهاية هذه في generateMetadata().

images: [{ url: `https://example.com/og?title=${encodeURIComponent(post.title)}` }]

إعداد Twitter Card

تستخدم Twitter (المعروفة الآن باسم X) معايير علامات الميتا الخاصة بها، لكن واجهة برمجة التطبيقات للبيانات الوصفية في Next.js تدير ذلك من خلال مفتاح twitter.

export const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'عنوان الصفحة',
    description: 'وصف الصفحة',
    creator: '@handle',
    images: ['https://example.com/og/my-post.png'],
  },
}

يمكن اختيار قيمة card من بين summary وsummary_large_image وapp وplayer. تعتبر summary_large_image الأكثر ملاءمة لمنشورات المدونة.

كيفية إكمال SEO متعدد اللغات باستخدام hreflang

تعتبر علامة hreflang إشارة تخبر محركات البحث بالإصدارات اللغوية والإقليمية للمحتوى نفسه. إذا كان لديك موقع يدير إصدارات باللغة الكورية والإنجليزية، يجب إعدادها بالتأكيد. إذا تم إغفال الإعداد، قد تعتبر Google صفحات اللغة المختلفة محتوى مكررًا مما يؤدي إلى عقوبات في ظهور البحث.

إعداد hreflang باستخدام alternates

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/ko/blog/my-post',
    languages: {
      'ko-KR': 'https://example.com/ko/blog/my-post',
      'en-US': 'https://example.com/en/blog/my-post',
      'ja-JP': 'https://example.com/ja/blog/my-post',
    },
  },
}

يقوم Next.js بإنشاء علامات تلقائيًا بناءً على هذا الإعداد.

<link rel="canonical" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="ko-KR" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en/blog/my-post" />
<link rel="alternate" hreflang="ja-JP" href="https://example.com/ja/blog/my-post" />

أهمية إعداد URL canonical

تعتبر URL canonical علامة تخبر محركات البحث أن "هذا هو الرابط الأصلي" عندما يوجد محتوى مشابه أو متطابق على عدة روابط. في حالة حدوث روابط مكررة بسبب الترقيم، ومعلمات UTM، واختلاف www، فإن عدم وجود إعداد canonical يؤدي إلى تشتت نقاط البحث.

alternates: {
  canonical: 'https://example.com/blog/my-post',
}

يجب استخدام مسارات مطلقة والحفاظ على تناسق HTTPS وwww عبر الموقع بأكمله.

الحصول على نتائج غنية باستخدام البيانات المنظمة (JSON-LD)

تتيح البيانات المنظمة عرض معلومات إضافية مثل النجوم، المؤلف، وتاريخ النشر في نتائج البحث. في Next.js، يمكن استخدام