سيو Next.js: العرض والبيانات الوصفية وخرائط الموقع ومدونة تتصدر النتائج

يقوم سيو Next.js أساسًا على اتخاذ القرار الصحيح في كل مسار: ما الذي يُعرض على الخادم، وما الذي يُخزَّن مؤقتًا، وما الذي يصل إلى HTML قبل تشغيل أي سكربت. تشرح Google في أساسيات تحسين محركات البحث لـ JavaScript أنها تعالج تطبيقات JavaScript على ثلاث مراحل (الزحف والعرض والفهرسة)، وأن العرض من جهة الخادم أو العرض المسبق "لا يزال فكرة ممتازة". وهذا ما يفعله Next.js افتراضيًا. يغطي هذا الدليل App Router (من Next.js 13 فما بعد)، مع ملاحظات حول Pages Router القديم.

هل Next.js جيد لتحسين محركات البحث؟

نعم. يرسل تطبيق React التقليدي المعروض من جهة العميل ملف HTML شبه فارغ ويبني الصفحة في المتصفح؛ على محركات البحث أن تعرضه، وكثير من الروبوتات لا تفعل ذلك أبدًا. أما Next.js فيعرض React على الخادم، فتحتوي استجابة HTML مسبقًا على العناوين والنص والروابط والبيانات الوصفية. يشرح دليلنا حول سيو JavaScript سبب أهمية هذا الفرق للفهرسة.

في App Router، تكون المكوّنات Server Components افتراضيًا. وحتى المكوّنات الموسومة بـ 'use client' تُعرض مسبقًا إلى HTML على الخادم. نقطة الضعف هي البيانات: كل ما تجلبه داخل useEffect، أو بعد نقرة فقط، يغيب عن HTML الأولي. اجلب المحتوى داخل Server Components، واحتفظ بمكوّنات العميل للتفاعل.

SSG أم SSR أم ISR أم CSR: أي وضع عرض تختار؟

يتيح Next.js المزج بين الأوضاع مسارًا بمسار. ويؤثر الاختيار في حداثة المحتوى والسرعة وما تتلقاه الزواحف.

تعدّد وثائق Next.js حول ISR فوائده: تحديث المحتوى الثابت "دون إعادة بناء الموقع بالكامل"، والتعامل مع أعداد كبيرة من الصفحات دون أوقات بناء طويلة. يُعاد توليد المسار الذي يحتوي على export const revalidate = 3600 مرة واحدة في الساعة على الأكثر؛ وللتحكم الدقيق، استدعِ revalidatePath أو revalidateTag عند تغيّر المحتوى. لا يعمل ISR مع التصدير الثابت (output: 'export'). وللتطبيقات التي يجب أن تبقى معروضة من جهة العميل، يعرض دليلنا حول سيو تطبيقات الصفحة الواحدة الحلول الممكنة.

كيف تضبط العناوين والأوصاف والروابط الأساسية باستخدام Metadata API؟

تحل Metadata API محل next/head في App Router. ووفق وثائق Next.js حول البيانات الوصفية، تصدّر كائن metadata ثابتًا من ملف layout أو صفحة، أو دالة generateMetadata حين تعتمد القيم على البيانات، فيولّد Next.js وسوم head. ولا يُدعم الاثنان إلا في Server Components.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

خمس قواعد تمنع معظم المشكلات:

• اضبط metadataBase في layout الجذر (نطاق الإنتاج لديك)، لتصبح الروابط الأساسية النسبية وروابط Open Graph مطلقة.
• استخدم قالب عنوان في layout الجذر، مثل '%s | العلامة'، ليحصل كل صفحة على عنوان فريد يذكر العلامة مرة واحدة.
• امنح كل صفحة قابلة للفهرسة رابطًا أساسيًا يشير إليها عبر alternates.canonical؛ فهو يحمي من التكرار الناتج عن معاملات الرابط والشرطة المائلة في النهاية. يلخّص مدخلنا حول وسم الرابط الأساسي القواعد.
• اكتب وصفًا لكل صفحة، يُولَّد من المحتوى داخل generateMetadata، لا قيمة افتراضية واحدة للموقع كله.
• أضف صور Open Graph بملف opengraph-image في مجلد المسار، وتحقّق من النتيجة بـ أداة معاينة Open Graph.

في الصفحات الديناميكية، يبث Next.js البيانات الوصفية بعد البايتات الأولى لتسريع العرض. وتوضح الوثائق أن البث معطّل للروبوتات التي تتوقع البيانات الوصفية داخل head، والتي تُكتشف عبر user agent (من الأمثلة Bingbot وTwitterbot وSlackbot)، وأن خيار htmlLimitedBots يتيح تعديل القائمة. إن غاب عنها زاحف يهمك، فأضفه. وفي Pages Router، المكافئ هو مكوّن Head من next/head، مع خاصية key لتجنب الوسوم المكررة.

كيف تنشئ sitemap.xml وrobots.txt في Next.js؟

كلاهما ملف خاص في مجلد app. يتحول ملف sitemap.ts الذي يصدّر دالة تعيد الروابط إلى /sitemap.xml، ويتحول ملف robots.ts إلى /robots.txt. ويشير مرجع خريطة الموقع إلى أن الملف يُخزَّن مؤقتًا افتراضيًا، وأن حد Google هو 50,000 رابط لكل خريطة موقع؛ وفوق ذلك تقسّمها generateSitemaps إلى عدة ملفات.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

لا تُدرج إلا الروابط الأساسية القابلة للفهرسة التي تعيد 200، مع تاريخ التحديث الحقيقي في lastModified. وتقبل خريطة الموقع أيضًا alternates.languages للمواقع متعددة اللغات. وفي robots.ts، أشر إلى خريطة الموقع وحدّد أي روبوتات ذكاء اصطناعي يُسمح لها بالزحف؛ يسردها مقالنا حول robots.txt لزواحف الذكاء الاصطناعي. وتجد المزيد عن الصيغة في مدخلنا حول خريطة موقع XML.

ما التفاصيل التقنية التي تضر سيو موقع Next.js أكثر من غيرها؟

كل هذه المشكلات تقلّل قابلية الزحف: يجب أن يتمكن الزاحف من اكتشاف كل رابط عبر الروابط وأن يحصل على رمز حالة سليم.

كيف تضيف البيانات المنظمة في Next.js؟

توصي وثائق Next.js بعرض JSON-LD داخل وسم script من نوع application/ld+json مباشرة في مكوّن الصفحة أو layout، انطلاقًا من بيانات الصفحة نفسها، مع تهريب الحرف < في JSON المسلسل لمنع الحقن. ولأنه يُعرض على الخادم، تراه Google وزواحف الذكاء الاصطناعي في HTML الخام. استخدم Article (أو BlogPosting) للمقالات، وOrganization في layout الجذر، وBreadcrumbList للصفحات العميقة، وProduct للتجارة الإلكترونية. يمنحك مولّد schema كتلة صالحة للبدء، ثم تحقّق من الصفحة باختبار النتائج المنسّقة من Google.

كيف تجعل موقع Next.js سريعًا بما يكفي لمؤشرات Core Web Vitals؟

يوفر Next.js مكوّنات تعالج الأسباب المعتادة لضعف Core Web Vitals:

• next/image: يغيّر حجم الصور، ويقدّم صيغًا حديثة، ويؤجل التحميل افتراضيًا، ويشترط الأبعاد، ما يمنع إزاحة التخطيط. ضع علامة أولوية على الصورة الرئيسية في الجزء الظاهر حتى لا يُؤجَّل تحميلها (وهي غالبًا عنصر Largest Contentful Paint).
• next/font: يستضيف الخطوط على نطاقك ويتجنب الإزاحة الناتجة عن تبديل الخط المتأخر.
• next/script: يحمّل سكربتات الأطراف الخارجية وفق استراتيجية (afterInteractive وlazyOnload) بدل أن يعطّل الصفحة.
• JavaScript أقل على جهة العميل: كل حد 'use client' يضيف شيفرة يجب تنزيلها وترطيبها، ما يثقل مؤشر Interaction to Next Paint على الجوال.

قِس البيانات الميدانية لا نتيجة المختبر فقط: يوضح دليلنا حول PageSpeed Insights كيفية قراءة الاثنين.

كيف تدير مدونة على Next.js تتصدر النتائج؟

تأخذ مدونة Next.js عادة أحد ثلاثة أشكال: ملفات MDX أو Markdown في المستودع (بسيطة، لكن كل مقال يتطلب commit ونشرًا)، أو نظام إدارة محتوى منفصل الواجهة (Sanity وContentful وStrapi وPayload) يُستعلم عنه داخل Server Components، أو webhook للنشر يستقبل المقالات من أداة خارجية. وفي الحالات الثلاث، نمط السيو واحد: مسار ديناميكي app/blog/[slug] مع generateStaticParams وgenerateMetadata وISR، وخريطة موقع تتغذى من المصدر نفسه، وصفحة فهرس ترتبط بكل المقالات.

يفصل الـ webhook النشر عن دورة الإطلاق. يستقبل Route Handler المقال ويحفظه ثم يعيد التحقق من الصفحات المعنية:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

كيف يساعدك سيو Next.js على أن تستشهد بك مساعدات الذكاء الاصطناعي؟

العرض على الخادم هو الشرط الأول لـ GEO (التحسين للمحركات التوليدية). وجد تحليل Vercel الصادر في ديسمبر 2024، The rise of the AI crawler، أن "أيًّا من زواحف الذكاء الاصطناعي الكبرى لا يعرض JavaScript حاليًا"، وذكر GPTBot وChatGPT-User وOAI-SearchBot وClaudeBot وPerplexityBot، وأحصى 569 مليون طلب من GPTBot و370 مليونًا من Claude على شبكته خلال شهر واحد. صفحة Next.js التي تعرض نصها وعناوينها وJSON-LD مسبقًا قابلة للقراءة لديها جميعًا؛ أما الصفحة المعروضة من جهة العميل فلا.

الشرط الثاني محتوى يستحق الاستشهاد: مقالات تجيب عن سؤال واحد في كل قسم، مع مصادر وأرقام وتعريفات واضحة، تُنشر بانتظام. هذا هو الجزء الذي تؤتمته Sorank، منتجنا. Sorank برنامج سيو وGEO يعمل بنظام autopilot: يجد كلماتك المفتاحية، ويكتب مولّد مقالات المدونة فيه 20 أو 60 أو 120 مقالًا شهريًا مع مصادر وروابط داخلية وصور. وعلى موقع Next.js، يتصل عبر الـ webhook المخصص الموضح في صفحة التثبيت: يستقبل Route Handler لديك كل مقال ويحفظه ويعيد التحقق من المدونة. ثم يتحقق تتبّع الإشارات في الذكاء الاصطناعي كل أسبوع مما إذا كانت ChatGPT وClaude وGemini تستشهد بعلامتك.

الخلاصة: اعرض مسبقًا كل صفحة تريد أن يُعثر عليها، وحدّد البيانات الوصفية على الخادم، وغذِّ خريطة الموقع من مصدر المحتوى نفسه. يقدّم Next.js الأدوات، أما الترتيب والاستشهادات في الذكاء الاصطناعي فتأتي مما تنشره بها. لتغذية مدونة Next.js بالمقالات باستمرار، اطّلع على خطط Sorank، بدءًا من 49$ شهريًا مع تجربة مجانية لمدة 3 أيام.