What is the main reason Nuxt is more SEO-friendly than a plain Vue SPA?

Nuxt uses server-side rendering by default, so crawlers get full HTML instead of an empty shell

Nuxt automatically writes your meta descriptions for you

Nuxt blocks AI crawlers by default to save crawl budget

Nuxt ranks higher because Google gives Vue frameworks a boost

What does Harlan Wilton's @nuxtjs/seo meta-package bundle?

Robots, sitemap, OG images, Schema.org, and canonical handling modules

A faster JavaScript renderer for Googlebot

A replacement for Vue's reactivity system

Paid rank-tracking and keyword research tools

Should you use dynamic rendering for a new Nuxt site?

No — Google deprecated it, and Nuxt's SSR/SSG already serve full HTML

Yes — it's the recommended modern approach for Nuxt

Only if you want to rank in Bing

Why does SSR or SSG matter for AI crawlers like GPTBot and PerplexityBot?

AI-crawler rendering varies by provider, so a client-rendered page can be missed by HTML-only fetchers

AI crawlers crawl faster than Googlebot, so HTML must load instantly

AI crawlers only read sitemaps, not page HTML

AI crawlers require a separate Nuxt module to be installed

تحسين محركات البحث في Nuxt

الخلاصة — Nuxt هو إطار العمل المبني فوق Vue، وهو مناسب لـSEO لسبب رئيسي: في المسار الذي يحافظ على الإعداد الافتراضي يبني الصفحات على الخادم، فتحصل محركات البحث على صفحة HTML مكتملة بدلاً من صفحة فارغة عليها ملؤها بنفسها. هذا إعداد لكل مسار، لا ضمان للموقع بأكمله؛ إذ يستطيع routeRules أو إعداد عام ssr: false إعادة أي مسار إلى غلاف فارغ شبيه بتطبيق Vue العادي. افحص المسار الفعلي، لا اسم المشروع فقط. أهم اختيار ستتخذه هو كيفية عرض كل مسار؛ وكل ما عداه، من وسوم تعريفية وخرائط موقع، يأتي بعد ذلك.

لماذا يفيد Nuxt في SEO على المسارات التي تحافظ على الإعداد الافتراضي؟

ينشئ Vue بمفرده تطبيقاً أحادي الصفحة: يرسل الخادم غلاف HTML شبه فارغ، ثم يملأ JavaScript المحتوى عند تشغيله في المتصفح. وهذا يصعّب البحث لأن الصفحة تبدو فارغة إلى أن يُنفذ JavaScript.

يُعد Nuxt «إطاراً فوقياً» لـVue، أي مجموعة أدوات أكمل مبنية حوله، ويحل إعداده الافتراضي هذه المشكلة. يعرض Nuxt صفحاتك أولاً على الخادم، أي العرض من جهة الخادم أو SSR، فعندما يطلب Google أو زائر صفحةً في مسار لم يُعطل فيه SSR يحصل على HTML كاملاً فوراً. Evidence for this claim Nuxt universal rendering returns server-rendered HTML to the browser by default. Scope: Nuxt default universal rendering. Confidence: high · Verified: 2026-07-14 Nuxt: Rendering modes لا انتظار لـJavaScript. وهذا أكبر سبب يجعل فهرسة موقع Nuxt أسهل أحياناً من تطبيق Vue عادي؛ لكنها نتيجة لكل مسار وليست ضماناً يمنحه اسم الإطار. يتخلى المسار الذي يستخدم ssr: false، أو يعتمد على <ClientOnly> في محتواه الرئيسي، عن هذه الميزة ويرسل مشكلة الغلاف الفارغ نفسها في Vue العادي.

القرار الأهم: العرض لكل مسار

عندما يطلب شخص صفحة بعينها، فأين يُبنى HTML الخاص بها؟ هذا سؤال على مستوى routeRules لا على مستوى المشروع؛ إذ يمكن لتطبيق Nuxt مزج الأنماط بين المسارات. يمنحك Nuxt عدة خيارات:

العرض من جهة الخادم (SSR) — الافتراضي. يبني الخادم الصفحة كاملة عند كل طلب، وهو ممتاز لـSEO.
التوليد الثابت (SSG) — شغّل nuxt generate ليبني Nuxt جميع صفحاتك مسبقاً كملفات HTML عادية. وهو ممتاز أيضاً لـSEO ومثالي للمدونات والوثائق التي لا تتغير كل دقيقة.
نمط SPA — تُبنى الصفحة في المتصفح مثل Vue العادي. تجنبه لأي محتوى تريد ظهوره في البحث.

الخبر الجيد أن الإعدادات الافتراضية تتجه بالفعل إلى الخيار الصحيح. وما عليك غالباً إلا تجنب تعطيلها.

إضافة العناوين والوسوم التعريفية

تضبط في Nuxt عنوان الصفحة ووصفها التعريفي بدالة مدمجة تسمى useSeoMeta(). Evidence for this claim Nuxt provides useSeoMeta for defining SEO and social metadata. Scope: Current Nuxt composable. Confidence: high · Verified: 2026-07-14 Nuxt: useSeoMeta تضعها في الصفحة وتمرر إليها العنوان والوصف وصورة المشاركة الاجتماعية:

useSeoMeta({
  title: 'My Page Title',
  description: 'A concise, page-specific summary with the key information first',
})

هذه هي الطريقة الحديثة الموصى بها. وتوجد دالة أقدم تسمى useHead() لا تزال تعمل وتُستخدم لأشياء أخرى في <head> الصفحة، لكن استخدم useSeoMeta() لوسوم SEO. ليس لدى Google حد ثابت لعدد أحرف الوصف التعريفي؛ فالمقتطفات تعتمد على الاستعلام وتُقتطع لتناسب الجهاز. لذلك عاين الصفحات المهمة بلغتها ونظام كتابتها المقصودين بدلاً من البرمجة وفق حصة ثابتة.

الإضافة الاختيارية: وحدات Nuxt SEO

لا تنشئ نواة Nuxt ملف robots.txt أو خريطة موقع XML أو صور المشاركة الاجتماعية أو البيانات المنظمة أو الروابط الأساسية؛ فهذه مهام حزم منفصلة اختيارية وليست مما يوفره nuxt.config.ts افتراضياً. يصون مطور اسمه Harlan Wilton حزمة مجتمعية مجانية من هذه الوحدات، تُثبت باسم @nuxtjs/seo، وتغطيها كلها دفعة واحدة. إنها مجموعة أدوات خارجية وليست جزءاً من Nuxt نفسه، لذا لا يجعل تثبيتها المخرجات صحيحة تلقائياً؛ يظل عليك التأكد من أن خريطة الموقع وقواعد الروبوتات وschema المولدة تطابق ما تريده.

ما يخطئ الناس في فهمه

يفترض الناس أن «Vue وNuxt لا يمكن أن يظهرا في Google». كان هذا صحيحاً جزئياً قبل سنوات لتطبيقات Vue العادية، لكنه لا يصح على Nuxt مع عرضه من جهة الخادم. الأخطاء الحقيقية هي تعطيل SSR دون قصد أو حظر ملفات JavaScript بحيث لا يستطيع Google بناء الصفحة.

هل تريد النسخة الأعمق، بكل أنماط العرض وتفاصيل منظومة الوحدات ومؤشرات Core Web Vitals والأخطاء الشائعة وحلولها؟ انتقل إلى تبويب Advanced.

الخلاصة — الإعداد الافتراضي في Nuxt هو العرض من جهة الخادم، لذلك يحصل المسار الذي يحافظ عليه على DOM كامل بدلاً من الغلاف الفارغ الذي يرسله تطبيق Vue أحادي الصفحة. لكنها نتيجة لكل مسار: يستطيع ssr: false أو تجاوز عبر routeRules تحويل أي مسار إلى CSR أو نمط هجين، لذا اختبر المسار الفعلي لا اسم المشروع. استراتيجية العرض هي القرار الأساسي: SSR افتراضياً، أو SSG عبر nuxt generate، أو routeRules هجينة؛ لأن البيانات الوصفية وschema وخرائط الموقع تأتي بعدها. استخدم useSeoMeta() للوسوم التعريفية وuseHead() لبقية الرأس، والاستدعاءات الخاصة بالخادم عندما لا تحتاج إلى التفاعلية. وتعامل مع حزمة Harlan Wilton المسماة @nuxtjs/seo بوصفها مجموعة أدوات خارجية اختيارية للروبوتات وخرائط الموقع وOG وschema والروابط الأساسية، لا جزءاً من نواة Nuxt ولا دليلاً على صحة المخرجات قبل فحصها. لا تستخدم العرض الديناميكي؛ فقد أوقف Google التوصية به. يختلف عرض برامج زحف الذكاء الاصطناعي حسب المزود، ويزيد SSR وSSG تغطية HTML الخام. وبعد HTML الأولي، تحقق مستقلاً من hydration والحمولة وإعدادات نشر Nitro والتخزين المؤقت وحالة HTTP المباشرة؛ فلا يثبت HTML الخادم أياً منها وحده. وتظل قواعد SEO المعتادة لـJavaScript سارية: روابط <a href> حقيقية، وعدم حظر JS وCSS، ومقارنة HTML المعروض بالخام.

Nuxt هو جواب Vue لمشكلة SPA

يرسل Vue وحده تطبيقاً أحادي الصفحة: غلاف HTML مع JavaScript يبني DOM في المتصفح. أما Nuxt فهو الإطار الفوقي المبني على Vue، ويعمل على محرك الخادم Nitro في Nuxt 3 مع تبني Nuxt 4 في 2025. ومن منظور SEO، سبب وجوده كله أنه يعرض الصفحات على الخادم افتراضياً. تصل كل صفحة كمستند HTML مكتمل، وهذا بالضبط ما يريد Googlebot قراءته من دون تنفيذ JavaScript أولاً. إن SEO في Vue موضوع مستقل بأوضاع إخفاقه الخاصة؛ وأفترض هنا أنك اخترت Nuxt تحديداً كي لا تضطر إلى مكافحة مشكلة SPA.

هذه هي النقطة نفسها التي أوضحها عن JavaScript عموماً: أي إعداد من SSR أو العرض الثابت أو العرض المسبق سيكون مناسباً لمحركات البحث، ومنها Gatsby وNext وNuxt. تتجه إعدادات Nuxt الافتراضية إلى الطريق الصحيح. وتنشأ معظم مشكلات SEO في Nuxt من تعطيل الناس تلك الإعدادات أو إضافة أخطاء فوقها.

استراتيجية العرض هي الأساس: تُحسم لكل مسار لا لكل مشروع

قبل الوسوم التعريفية وschema وخرائط الموقع، السؤال الذي يحسم كل شيء هو: كيف يُنتج HTML لهذا المسار تحديداً؟ توثق Nuxt العرض العام من الخادم بوصفه الإعداد الافتراضي للتطبيق، لكنه ليس ضماناً لكل مسار. يحول ssr: false العام التطبيق كله إلى العرض من جهة العميل، ويمكن لـrouteRules تعيين نمط مختلف لأي نمط URL. لا تخبرك عبارة «هذا تطبيق Nuxt» بأي شيء عن عرض صفحة بعينها؛ بل عليك فحص المسار. يوفر Nuxt خمس استراتيجيات:

النمط	كيفية ضبطه	أثره في SEO	الأنسب له
عام / SSR	الافتراضي (`ssr: true`)	ممتاز: HTML كامل مع كل طلب	المحتوى الديناميكي والمخصص
ثابت / SSG	`nuxt generate`	ممتاز: يُبنى HTML وقت النشر	المدونات والوثائق والتسويق
هجين	`routeRules` لكل مسار	ممتاز: مزيج لكل مسار	المواقع الكبيرة متنوعة المحتوى
SPA / CSR	`ssr: false`	ضعيف للمحتوى المراد فهرسته	لوحات المعلومات والإدارة
عند الحافة	هدف النشر	ممتاز: TTFB منخفض	الأداء العالمي

توضح وثائق Nuxt الرسمية بلا مواربة سبب كون العرض من جهة العميل خياراً خاطئاً للمحتوى: تستغرق فهرسة المحتوى المقدم بهذه الطريقة وتحديثه وقتاً أطول، بينما تستطيع برامج زحف الويب فهرسة محتوى الصفحة مباشرة مع العرض العام من الخادم. Evidence for this claim Nuxt documents that universal rendering delivers HTML content immediately and allows crawlers to index it directly. Scope: Nuxt rendering; no indexing guarantee. Confidence: high · Verified: 2026-07-14 Nuxt: Rendering modes (وثائق عرض Nuxt.) يُقترح CSR، أي ssr: false، للمكاتب الخلفية ولوحات المعلومات والألعاب، لا لما تريد فهرسته.

العرض الهجين هو الخيار الأقوى للمواقع الكبيرة. تتيح قواعد المسارات في nuxt.config.ts تعيين نمط العرض والتخزين المؤقت لكل نمط URL:

routeRules: {
  '/blog/**':     { prerender: true },        // SSG for the blog
  '/product/**':  { swr: 3600 },              // ISR-style: regenerate hourly
  '/admin/**':    { ssr: false },             // SPA for the admin area
  '/checkout/**': { ssr: true },              // always-fresh SSR
}

يولد swr، أي stale-while-revalidate، وisr، أي incremental static regeneration، الصفحة بصورة ثابتة ثم يحدثانها في الخلفية. وهذا مثالي للتجارة الإلكترونية أو الأخبار ذات عدد الصفحات الكبير، حيث لا تكون إعادة البناء الكامل عند كل تغيير عملية. تعرض Nuxt Islands، أي <NuxtIsland>، المكونات من دون إرسال JavaScript إلى العميل، فتخفض كلفة hydration وتساعد INP، وهو مؤشر Core Web Vital الأكثر تعرضاً للمشكلات في تطبيقات Nuxt.

كيفية التحقق مما نشرته فعلياً: يعرض View Source ملف HTML الخام الذي أرسله الخادم؛ فإذا كان محتواك موجوداً فيه فأنت تستخدم العرض من جهة الخادم. وتعرض لوحة Elements في DevTools شجرة DOM المعروضة. أما أداة URL Inspection في GSC فتعرض ما جلبه Google وعرضه فعلياً، وهي مرجع الحقيقة. لا تثق بعبارة «يبدو جيداً في متصفحي».

كيف يتعامل Googlebot مع تطبيق Nuxt؟

يعالج Google أي تطبيق JavaScript في ثلاث مراحل: الزحف ثم العرض ثم الفهرسة. والمشكلة هي التوقيت؛ فالعرض يحدث في طابور لا فوراً. وكما قلت في دليل SEO في JavaScript، فإن العارض صبور: “there is no fixed timeout for the renderer… It’s really patient, and you should not be concerned.” (ترجمة) «لا توجد مهلة ثابتة للعارض… إنه صبور جداً، ولا ينبغي أن تقلق.» لكن الصبر لا يعني السرعة للمحتوى الحديث. إذا أرسلت صفحة معروضة لدى العميل فلن يوجد محتواك لدى Google حتى تعمل موجة العرض؛ بينما يغلق SSR وSSG هذه الفجوة لأن HTML يكون كاملاً عند أول جلب.

هناك أمران آخران مهمان على النطاق الكبير. عرض JavaScript مكلف؛ ووفق محاضرتي عام 2019، JavaScript SEO في Ungagged، ترتفع تكاليف الزحف بنحو 20 مرة عندما يضطر Google إلى العرض. الرقم اتجاهي لكن رتبته التقريبية لا تزال مفيدة. ويأخذ Google التوجيه الأكثر تقييداً بين HTML الخام والمعروض؛ لذلك يتغلب noindex الذي يضيفه JavaScript على index في HTML الخام، والعكس صحيح. ولا يُحترم الرابط الأساسي الذي يحقنه JavaScript إلا إذا لم يوجد رابط أساسي بالفعل في HTML الخام. أبق إشارات robots والروابط الأساسية في HTML المعروض من الخادم، وهو ما يفعله Nuxt عند تشغيل SSR.

واقع برامج زحف الذكاء الاصطناعي

هذه هي إضافة 2026. لا تنفذ برامج زحف الذكاء الاصطناعي، مثل GPTBot وClaudeBot وPerplexityBot وغيرها، JavaScript عموماً. فهي تفهرس HTML الخام ولا شيء سواه. لذلك تكون صفحة Nuxt المعروضة لدى العميل غير مرئية عملياً لمحركات الإجابة بالذكاء الاصطناعي. لا يقتصر كون SSR أو SSG أفضل هنا على Google؛ بل هو ثمن دخول تحسين محركات الإجابة. إذا أردت أن يستشهد ChatGPT أو Perplexity أو Claude بمحتواك، فيجب أن يكون موجوداً في HTML عند أول جلب.

ما بعد HTML الأولي: الحمولة وhydration ورموز الحالة

وجود محتواك في HTML الخادم ضروري لكنه غير كاف؛ إذ يمكن أن تسوء أمور عدة بعد ذلك الرد الأول، ولا يغطيها قولك «فحصت View Source»:

الحمولة وhydration. يرسل العرض العام HTML وحمولة بيانات متسلسلة يستخدمها العميل لإجراء hydration، أي إرفاق مستمعي الأحداث ومواصلة عمل الخادم، من دون إعادة الجلب. لا يثبت ظهور HTML الخادم بصورة صحيحة نجاح hydration أو إعادة التنقل لدى العميل للمحتوى نفسه أو حداثة الحمولة. إذا بدت الصفحة سليمة عند التحميل الأول ثم تعطلت بعد تغيير مسار من جهة العميل، فهذه مشكلة hydration أو حمولة لا مشكلة نمط عرض.
<ClientOnly> والمحتوى الخاص بالمتصفح. يعني تغليف شيء داخل <ClientOnly>، وهو شائع للأدوات المعتمدة على واجهات المتصفح، غيابه عن رد الخادم حتى في مسار عام. إذا انتهى محتواك الرئيسي أو رابط مهم أو وسومك داخل حد خاص بالعميل، فلن تراه برامج الزحف وروبوتات الذكاء الاصطناعي التي تقرأ HTML الخام فقط، بصرف النظر عن إعداد نمط العرض. افحص الرد الفعلي لا إعداد العرض فحسب.
لا تثبت رموز الحالة والتحويلات نفسها. لا يثبت ظهور صفحة خطأ Nuxt في المتصفح، أو تحويل تديره navigateTo() أو composable، حالة HTTP التي أرسلها الرد المباشر من الخادم. توضح إرشادات Google أن رموز الحالة ذات المعنى مهمة للزحف والفهرسة؛ لذا أكد الترويسة الفعلية باستخدام curl -I، لا ما تعرضه صفحة خطأ العميل.

ليس في هذا حجة ضد العرض العام؛ بل تذكير بأن «HTML معروض من الخادم» هو الفحص الأول لا الأخير.

Nitro وإعدادات النشر المسبقة وحدود التخزين المؤقت

يبني Nitro مخرجات خادم Nuxt، ويترجمها بصورة مختلفة بحسب إعداد النشر المسبق المستهدف، مثل خادم Node أو Cloudflare أو Vercel أو Netlify أو النشر الثابت وغيرها. وهذا مهم لـSEO لأن الإعدادات والمحولات قد تختلف في واجهات وقت التشغيل المتاحة وسلوك التخزين المؤقت ودعم التدفق ومناطق النشر والوصول إلى نظام الملفات؛ فلا يُضمن أن تعمل قاعدة مسار أو معالج خادم يعمل تحت إعداد ما بالطريقة نفسها تحت إعداد آخر. وهناك نتيجتان تستحقان الاختبار الصريح بدلاً من الافتراض:

مفاتيح التخزين والإبطال خاصة بالمسار وليست تلقائية. تخزن قواعد swr وisr المخرجات وتجددها، لكن مفتاحاً خاطئاً أو إبطالاً مفقوداً أو ترويسة تخزين تضعها منصة النشر قد تقدم HTML قديماً أو مخصصاً أو غير متسق لبرامج الزحف. افحص عمر الرد الفعلي وأي ترويسات Cache-Control وAge في عنوان حي، لا إعداد routeRules فقط.
سلوك بيئة الاختبار لا يضمن التكافؤ مع الإنتاج. لا يثبت عرض المسار بصورة صحيحة في التطوير المحلي أو نشر المعاينة أن إعداد الإنتاج سيولد المخرجات نفسها. تعيش مسارات الخادم والتحويلات ومعالجة الأخطاء في طبقة خادم Nitro، وهي الأكثر عرضة للاختلاف بحسب الهدف. اختبر URL الإنتاج مباشرة بعد أي تغيير نشر كما تختبر نمط العرض.

الوسوم التعريفية: useSeoMeta() وuseHead()

تعمل إدارة رأس الصفحة في Nuxt على Unhead، وتمنحك دالتي composable لوظيفتين مختلفتين.

استخدم useSeoMeta() لوسوم SEO والوسوم الاجتماعية. إنها واجهة مسطحة آمنة الأنواع ذات معاملات محددة النوع. Evidence for this claim useSeoMeta is a typed Nuxt API for SEO and social meta tags. Scope: Current Nuxt composable. Confidence: high · Verified: 2026-07-14 Nuxt: useSeoMeta وتساعد في تجنب خطأ Open Graph الشائع، أي استخدام name حيث يلزم property:

useSeoMeta({
  title: 'My Page Title',
  ogTitle: 'My Page Title',
  description: 'Concise page-specific description with the key information first',
  ogDescription: 'Concise social description tailored to this page',
  ogImage: 'https://mysite.com/og-image.png', // must be an absolute URL
  twitterCard: 'summary_large_image',
})

أما useHead() فهي أداة الرأس العامة لكل شيء آخر: النصوص البرمجية ووسوم الروابط وسمات body وقوالب العنوان:

useHead({
  titleTemplate: '%s · My Site Name',
  htmlAttrs: { lang: 'en' },
})

نمط الطبقات الموثوق هو: الإعدادات الثابتة الافتراضية، مثل charset وviewport وfavicon، في nuxt.config.ts، ثم قالب العنوان العام وقيم OG الافتراضية في app.vue، ثم التجاوزات الخاصة بالصفحة عبر useSeoMeta() في مكوّن الصفحة. من الأخطاء الشائعة وضع useSeoMeta() في layout بدلاً من الصفحة، فيستبدل وسوم الصفحة المحددة بأخرى عامة. ولأن محركات البحث تقرأ التحميل الأول، لا تحتاج بيانات SEO الوصفية عموماً إلى التفاعلية؛ ويتجنب useServerHead() إعادة التنفيذ لدى العميل.

أي واجهة تستخدم، وما الذي تثبته فعلياً؟

الواجهة	النطاق	تفاعلية؟	ما تثبته عن المخرجات
`useSeoMeta()`	بيانات SEO والاجتماعية المسطحة محددة النوع فقط	نعم افتراضياً	تضبط الخصائص محددة النوع بصورة صحيحة، لا أن المسار فريد أو أساسي أو قابل للفهرسة؛ فهذا منطقك أنت
`useHead()`	كل ما في `<head>` من نصوص وروابط وسمات وقالب عنوان	نعم افتراضياً	تحكم عام بالرأس مع التحذير نفسه؛ استخدام الواجهة لا يثبت صحة رد الخادم
`useServerHead()` / الاستدعاءات الخاصة بالخادم	مثل السابق	لا؛ للخادم فقط ويتجنب إعادة التنفيذ لدى العميل	يؤكد إرسال الوسم مرة في HTML الخادم، ولا يؤكد إعادة ضبطه عند تنقل العميل إذا كنت تعتمد عليه هناك

يخبرك استدعاء إحدى هذه الدوال بأن الواجهة عملت، لكنه لا يخبرك وحده بما يصدره رد مباشر من الخادم أو تغيير مسار من جهة العميل. تحقق عبر View Source أو curl، لا بمجرد قول «استدعيت useSeoMeta()».

منظومة وحدات @nuxtjs/seo من Harlan Wilton: اختيارية وليست من النواة

لا توفر نواة Nuxt خريطة موقع أو ملف robots.txt أو توليد صور OG أو Schema.org جاهزة؛ فهذه تقع خارج أدوات Nuxt الأصلية، مثل useHead وuseSeoMeta وقواعد المسارات وأنماط العرض. يسد المجتمع هذه الفجوة عبر @nuxtjs/seo من Harlan Wilton، وهي حزمة مظلة خارجية منفصلة التثبيت، متاحة على nuxtseo.com وعند v5.x حالياً، وتُصان بنشاط وتستهدف Nuxt 3,16+ وNuxt 4، وتجمع ست وحدات. يمنحك تثبيتها توليد خريطة الموقع والروبوتات وصور OG وschema؛ لكنه لا يضمن وحده أن المخرجات صحيحة لمساراتك. تحقق مما تنتجه كما تتحقق من أي شيء آخر:

الوحدة	ما تفعله
`@nuxtjs/robots`	ملف `robots.txt` ووسوم meta robots وترويسات `X-Robots-Tag`
`@nuxtjs/sitemap`	خرائط XML تلقائية من الصفحات والمسارات الديناميكية
`nuxt-og-image`	صور OG ديناميكية، من قالب Vue إلى صورة
`nuxt-schema-org`	بيانات Schema.org المنظمة بصيغة JSON-LD
`nuxt-seo-utils`	الروابط الأساسية ومسارات التنقل والإعدادات الافتراضية
`nuxt-link-checker`	اكتشاف الروابط المعطلة وقت البناء

ثبّت الحزمة كلها باستخدام npx nuxt module add seo، أو ثبّت الوحدات منفردة عبر npx nuxt module add sitemap robots. وهذه سلوكيات تستحق معرفتها:

تولد @nuxtjs/sitemap الخرائط تلقائياً من دليل pages/ والمسارات الديناميكية، وتقسمها تلقائياً إلى فهرس خرائط بعد 50 000 عنوان URL، وتدعم خرائط i18n متعددة اللغات وIndexNow مدمجاً. والنقطة التي يلزم ضبطها: يتجاهل Google changefreq وpriority؛ ولا يهم سوى lastmod الدقيق، وفقط عندما يتغير المحتوى فعلاً.
تولد @nuxtjs/robots ملف robots.txt ووسم robots التعريفي وترويسة X-Robots-Tag، وتمنع افتراضياً جميع برامج الزحف في البيئات غير الإنتاجية. وهذه تحديداً مشكلة فهرسة بيئة الاختبار التي تصيب البنى بلا واجهة. وتوفر قواعد لكل روبوت، فيمكنك حظر GPTBot تحديداً وترك الآخرين؛ لكن افعل ذلك عن قصد، لأن برنامج زحف الذكاء الاصطناعي المحظور لن يستشهد بك.
تتولى nuxt-seo-utils الروابط الأساسية، وتحذف بصورة مفيدة معاملات التتبع (utm_* وfbclid وgclid) منها تلقائياً.

nuxt/image ومؤشرات Core Web Vitals

@nuxt/image هي وحدة الصور: srcset متجاوب تلقائياً، وتنسيقات حديثة مثل WebP وAVIF، وتحسين مدمج عبر مزودي CDN، والتحميل الكسول. تحمل قاعدتان معظم قيمة SEO:

لا تحمل صورة LCP تحميلًا كسولًا أبداً. يجب تحميل صورة البطل بشغف؛ فالتحميل الكسول يؤخر Largest Contentful Paint.
اضبط دائماً width وheight كي يحجز المتصفح المساحة ولا تتلقى ضربة في Cumulative Layout Shift.

<NuxtImg
  src="/hero.jpg"
  width="1200"
  height="630"
  alt="Descriptive alt text"
  :loading="isHeroImage ? 'eager' : 'lazy'"
  format="webp"
/>

أهداف 2026 عند المئين 75 هي: LCP ≤ 2,5 s وINP ≤ 200ms وCLS ≤ 0,1. في تطبيقات Nuxt يميل INP إلى التضرر لأن hydration يسبب تأخر الإدخال؛ وهذا بالضبط ما صُممت له Nuxt Islands و<NuxtIsland>.

Nuxt Content وSEO

إذا كنت تستخدم @nuxt/content، أي وحدة محتوى Markdown وMDX، فتكاملها مع @nuxtjs/seo مباشر، لكن فيه مشكلة ترتيب واحدة: حمّل @nuxtjs/seo قبل @nuxt/content في مصفوفة الوحدات. ويمكنك بعد ذلك ضبط SEO في frontmatter المحتوى، مثل title وdescription وrobots وogImage وschemaOrg، وسحبه إلى قالب [slug].vue باستخدام useSeoMeta() بعد جلب المحتوى. هذه نسخة Nuxt الأصلية من نمط CMS بلا واجهة، وينطبق عليها انضباط «أعد بناء ما فعله الملحق» نفسه.

أخطاء SEO الشائعة في Nuxt

استخدام نمط SPA، أي ssr: false، لمحتوى تريد فهرسته. هذا أغلى خطأ، وهو ما يجعلك غير مرئي لبرامج زحف الذكاء الاصطناعي.
عناوين نسبية لصور OG. يجب أن يكون ogImage عنوان URL مطلقاً وإلا تعطلت معاينات الشبكات الاجتماعية.
وضع useSeoMeta() في layout بدلاً من الصفحة؛ فتستبدل الوسوم العامة وسوم الصفحة الخاصة.
عدم التحقق من HTML المعروض؛ فـView Source لا يساوي DevTools ولا ما عرضه Google. استخدم URL Inspection.
حظر JS أو CSS في robots.txt؛ فلن يعرض Google الصفحة من ملفات محظورة.
ترك noindex أو المنع الخاص ببيئة الاختبار بعد الإطلاق، أو نسيان أن @nuxtjs/robots تحظر غير الإنتاج افتراضياً ثم التساؤل لماذا الإنتاج سليم وبيئة مخصصة ليست كذلك.
التحميل الكسول لصورة LCP؛ فهذا يهدم LCP.
غياب width وheight عن الصور؛ فيضر CLS.
استخدام changefreq وpriority في خرائط الموقع؛ يتجاهلهما Google ولا يهم سوى lastmod.
اللجوء إلى العرض الديناميكي. لقد أوقف Google التوصية به: “dynamic rendering is a workaround and not a long-term solution”. (ترجمة) «العرض الديناميكي حل التفافي وليس حلاً طويل الأمد.» كما أنه يخدم المحركات التي تضبطها له فقط، ويفوّت Bing وكل برامج زحف الذكاء الاصطناعي. لا تحتاج إليه مع Nuxt؛ إذ يمنح SSR وSSG برامج الزحف HTML كاملاً بالفعل.

llms.txt وتحسين محركات الإجابة

llms.txt ملف نص عادي يشبه robots.txt، ويساعد أدوات الذكاء الاصطناعي على التنقل في محتواك. تولد وحدة nuxt-llms الملفين /llms.txt و/llms-full.txt تلقائياً من Nuxt Content. وحتى أواخر 2025 كان مستخدموه الأساسيون خوادم MCP وأدوات البرمجة بالذكاء الاصطناعي، مثل Cursor وClaude Code، لا ChatGPT أو Perplexity مباشرة. وهو أنفع لمواقع الوثائق والمدونات التقنية وأقل فائدة للتجارة الإلكترونية أو الأخبار. يستحق الإضافة إن كان موقعك للوثائق أو المطورين، وليس أولوية فيما عدا ذلك.

موقع هذا الموضوع

SEO في Nuxt تطبيق عملي لـSEO في JavaScript وفق اصطلاحات Nuxt، ويتداخل كثيراً مع موضوع SEO لنظام CMS بلا واجهة عندما تسحب واجهة Nuxt الأمامية من خلفية بلا واجهة. لا تتغير المبادئ؛ بل يمنحك Nuxt إعدادات افتراضية جيدة ومنظومة وحدات قوية لتنفيذها.

ملخص بالذكاء الاصطناعي

نسخة مكثفة من العدسة المتقدمة:

Nuxt هو الإطار الفوقي لـVue، وميزته في SEO هي إعداد افتراضي واحد: العرض من جهة الخادم. يرسل المسار الذي يحافظ عليه HTML كاملاً لا الغلاف الفارغ لتطبيق Vue أحادي الصفحة، لكنها نتيجة لكل مسار لا ضمان للمشروع. يستطيع ssr: false أو تجاوز routeRules تحويل أي مسار إلى CSR أو نمط هجين، لذا تحقق من المسار الفعلي.
استراتيجية العرض هي الأساس وتُحسم لكل مسار؛ فهي تسبق الوسوم وschema وخرائط الموقع. الأنماط: SSR افتراضياً، وSSG عبر nuxt generate، والهجين عبر routeRules، وSPA عبر ssr: false الذي يجب تجنبه للمحتوى المفهرس، والحافة.
تمزج routeRules الهجينة الأنماط لكل URL، ويجدد swr وisr الصفحات في الخلفية، وتخفض Nuxt Islands كلفة hydration وتساعد INP.
يزحف Googlebot ثم يعرض في طابور لا فوراً ثم يفهرس، ويأخذ التوجيه الأكثر تقييداً بين HTML الخام والمعروض. يكلف العرض نحو 20 ضعف كلفة الزحف، ويغلق SSR وSSG فجوة التوقيت.
عرض برامج زحف الذكاء الاصطناعي خاص بكل مزود؛ يعتمد CSR على تنفيذ العميل الذي لا يغطيه عقد مشترك واحد، لذلك يزيد SSR وSSG الظهور لدى الذكاء الاصطناعي.
بعد HTML التحميل الأول: تحقق مستقلاً من hydration والحمولة، لأن HTML الخادم لا يثبت نجاحهما أو التكافؤ مع تنقل العميل. انتبه إلى إخفاء <ClientOnly> المحتوى عن برامج الزحف حتى في المسارات العامة، وأكد حالة HTTP والتحويلات المباشرة باستخدام curl -I بدلاً من الثقة بصفحة خطأ يعرضها العميل.
يمكن أن تختلف إعدادات Nitro والنشر، مثل Node وCloudflare وVercel وNetlify والثابت، في واجهات وقت التشغيل والتخزين والتدفق والمناطق؛ لذا اختبر ترويسات التخزين والتكافؤ مع الإنتاج لكل مسار ولا تفترض تطابق الإعدادات.
الوسوم التعريفية: استخدم useSeoMeta() لـSEO والاجتماعية بأمان الأنواع، وuseHead() لبقية الرأس، والاستدعاءات الخاصة بالخادم عند غياب الحاجة للتفاعلية. رتب الطبقات: nuxt.config.ts ثم app.vue ثم الصفحة. لا تضع useSeoMeta() في layout. تحتاج صور OG إلى عناوين URL مطلقة. يثبت استدعاء الواجهة تشغيلها لا ما يصدره الرد المباشر؛ فتحقق عبر View Source أو curl.
@nuxtjs/seo من Harlan Wilton مجموعة أدوات خارجية اختيارية عند v5.x تُصان بنشاط لـNuxt 3,16+ و4.x، وليست جزءاً من النواة. تجمع الروبوتات وخريطة الموقع وصور OG وSchema.org والروابط الأساسية وفاحص الروابط، لكن تثبيتها لا يثبت صحة المخرجات. في الخريطة لا يهم سوى lastmod، وتحظر وحدة robots غير الإنتاج افتراضياً وتتيح قواعد لكل روبوت ذكاء اصطناعي.
@nuxt/image وCWV: لا تحمل صورة LCP كسولاً، واضبط دائماً width وheight من أجل CLS. الأهداف: LCP ≤ 2,5 s وINP ≤ 200ms وCLS ≤ 0,1.
لا تستخدم العرض الديناميكي؛ أوقف Google التوصية به، ويوفر SSR وSSG في Nuxt HTML كاملاً بالفعل.

الوثائق الرسمية

وثائق المصادر الأولية من Nuxt ومحركات البحث.

Nuxt

Nuxt — مفاهيم العرض — العرض العام ومن جهة العميل والهجين عبر routeRules، وسبب تفضيل برامج الزحف للمسارات المعروضة من الخادم.
Nuxt — SEO والبيانات الوصفية، البدء — useSeoMeta() وuseHead() وإدارة الرأس.
Nuxt — الدالة useSeoMeta — مرجع واجهة البيانات الوصفية الآمنة الأنواع، بما فيه الاستخدام الخاص بالخادم.
Nuxt — محرك الخادم Nitro — إعدادات النشر والمخرجات عبر المنصات ومواضع اختلاف وقت التشغيل والتخزين.
Nuxt — دورة حياة Nuxt — عرض الخادم ونقل الحمولة وhydration كمراحل مستقلة.
Nuxt Image — <NuxtImg> والتنسيقات المتجاوبة وإعداد المزود لمؤشرات Core Web Vitals.
@nuxtjs/seo في وحدات Nuxt — مدخل دليل الوحدات: الإصدار الحالي والتنزيلات وكونها حزمة منفصلة التثبيت.

Google

فهم أساسيات SEO في JavaScript — خط الزحف ثم العرض ثم الفهرسة والروابط القابلة للزحف، وهو مستقل عن الإطار ولا يذكر Nuxt بالاسم.
العرض الديناميكي، حل التفافي متوقف التوصية به — لماذا أوقف Google التوصية به وما البدائل، مثل SSR والعرض الثابت وhydration.

اقتباسات من المصدر

تصريحات مسجلة من Nuxt وGoogle وكتاباتي. كل رابط لمحرك بحث أو Nuxt رابط عميق ينتقل إلى المقطع المقتبس في صفحة المصدر.

Nuxt: العرض من أجل SEO

“Indexing and updating the content delivered via client-side rendering takes more time.” (ترجمة) «تستغرق فهرسة المحتوى المقدم عبر العرض من جهة العميل وتحديثه وقتاً أطول.» — وثائق عرض Nuxt. انتقل إلى الاقتباس
“Web crawlers can directly index the page’s content, which makes Universal rendering a great choice for any content that you want to index quickly.” (ترجمة) «تستطيع برامج زحف الويب فهرسة محتوى الصفحة مباشرة، ما يجعل العرض العام خياراً ممتازاً لأي محتوى تريد فهرسته سريعاً.» — وثائق عرض Nuxt. انتقل إلى الاقتباس

Google: معالجة JavaScript والعرض الديناميكي

“Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” (ترجمة) «يعالج Google تطبيقات الويب بـJavaScript في ثلاث مراحل رئيسية: 1. الزحف 2. العرض 3. الفهرسة.» — وثائق Google Search Central. انتقل إلى الاقتباس
“Dynamic rendering is a workaround and not a long-term solution for problems with JavaScript-generated content in search engines. Instead, we recommend that you use server-side rendering, static rendering, or hydration as a solution.” (ترجمة) «العرض الديناميكي حل التفافي وليس حلاً طويل الأمد لمشكلات المحتوى الذي يولده JavaScript في محركات البحث. وبدلاً منه نوصي باستخدام العرض من جهة الخادم أو العرض الثابت أو hydration حلاً.» — وثائق Google Search Central. انتقل إلى الاقتباس

Patrick Stox (من عملي: JavaScript SEO: A Definitive Guide)

“Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines. Gatsby, Next, Nuxt, etc., are all great.” (ترجمة) «أي إعداد من SSR أو العرض الثابت أو العرض المسبق سيكون مناسباً لمحركات البحث. Gatsby وNext وNuxt وغيرها كلها رائعة.»
“There is no fixed timeout for the renderer… It’s really patient, and you should not be concerned.” (ترجمة) «لا توجد مهلة ثابتة للعارض… إنه صبور جداً، ولا ينبغي أن تقلق.»
“JavaScript is not bad for SEO, and it’s not evil. It’s just different from what many SEOs are used to.” (ترجمة) «JavaScript ليس سيئاً لـSEO ولا شريراً؛ إنه مختلف فحسب عما اعتاده كثير من مختصي SEO.»

ملاحظة: صفحات مصدري Nuxt وGoogle نفسها معروضة بـJavaScript وقد تقاوم التحقق الآلي من مقاطع النص. تم التحقق من الاقتباسات مقابل بحث الموجز، وينبغي تأكيدها في الصفحات الحية قبل معاملتها نهائية. يأتي رقم «20 ضعف كلفة الزحف للعرض» من محاضرتي عن JavaScript SEO عام 2019؛ فتعامل معه بوصفه اتجاهاً لا قياساً حالياً.

قائمة تحقق SEO في Nuxt

مراجعة سريعة للتأكد من إعداد موقع Nuxt للبحث وبرامج زحف الذكاء الاصطناعي:

النماذج الذهنية

1. استراتيجية العرض تأتي أولاً. تأتي الوسوم وschema وخرائط الموقع بعد قرار واحد: كيف يُنتج HTML؟ أجب عن سؤال «هل هذا المحتوى معروض من الخادم أم مولد ثابتاً أم معروض لدى العميل؟» قبل تصحيح أي شيء آخر.

2. SSR هو الافتراضي، ومهمتك غالباً ألا تفسده. توجه Nuxt الإعدادات الافتراضية إلى الطريق الصحيح. وتنشأ معظم إخفاقات SEO من ضبط ssr: false أو حظر JS وCSS أو حقن إشارات عبر JavaScript تتعارض مع HTML الخام.

3. اختر نمط العرض بحسب نوع المحتوى.

ثابت غالباً، مثل المدونة والوثائق والتسويق ← SSG عبر prerender: true.
حديث دائماً أو ديناميكي ← SSR.
محتوى يتحدث كل ساعة أو يوم ويريد سرعة الثابت ← swr أو isr.
خلف تسجيل دخول وغير مفهرس ← لا بأس بـSPA عبر ssr: false.
محتوى عام تريد ترتيبه أو استشهاد الذكاء الاصطناعي به ← لا تستخدم SPA أبداً.

4. HTML أولاً وJavaScript ثانياً لكل إشارة. ينبغي أن يوجد المحتوى والوسوم والرابط الأساسي وتوجيهات robots والروابط في HTML المعروض من الخادم. يأخذ Google التوجيه الأكثر تقييداً بين الخام والمعروض، ولا ترى برامج زحف الذكاء الاصطناعي سوى الخام. SEO المحقون بـJavaScript حل احتياطي لا خطة.

5. استخدم الوحدات، لكن افهم عملها. توفر @nuxtjs/seo الجهد، لكن يظل عليك ضبط المنع التلقائي للروبوتات خارج الإنتاج، وحقيقة أن lastmod وحده مهم في الخريطة، والروابط الأساسية المطلقة.

ورقة مرجعية سريعة لـSEO في Nuxt

أنماط العرض

النمط	الإعداد	SEO	الأنسب له
عام / SSR	`ssr: true` افتراضياً	✅ الأفضل	ديناميكي أو مخصص
ثابت / SSG	`nuxt generate`	✅ الأفضل	المدونات والوثائق والتسويق
هجين	`routeRules`	✅ الأفضل	المواقع الكبيرة متنوعة المحتوى
SPA / CSR	`ssr: false`	⚠️ ضعيف للفهرسة	لوحات المعلومات والإدارة
عند الحافة	هدف النشر	✅ TTFB منخفض	الأداء العالمي

دوال composable

الاستخدام	استخدم
وسوم SEO والاجتماعية	`useSeoMeta()` الآمنة الأنواع
قوالب العنوان والنصوص ووسوم الروابط وسمات html	`useHead()`
تجاوز إعادة التنفيذ لدى العميل للبيانات الثابتة	`useServerHead()`

وحدات @nuxtjs/seo

الوحدة	المهمة
`@nuxtjs/robots`	robots.txt وmeta robots وX-Robots-Tag، وتحظر غير الإنتاج افتراضياً
`@nuxtjs/sitemap`	خريطة XML؛ لا يهم سوى `lastmod`، وفهرس تلقائي بعد 50 ألف URL
`nuxt-og-image`	صور OG ديناميكية
`nuxt-schema-org`	بيانات JSON-LD منظمة
`nuxt-seo-utils`	روابط أساسية تحذف `utm_*` و`fbclid` و`gclid`، ومسارات تنقل
`nuxt-link-checker`	روابط معطلة وقت البناء

قواعد سريعة

ثبّت كل شيء عبر npx nuxt module add seo.
صور OG: عناوين URL مطلقة فقط.
صورة LCP: loading="eager"؛ وكل الصور تحتاج إلى width وheight من أجل CLS.
أهداف CWV: LCP ≤ 2,5 s وINP ≤ 200ms وCLS ≤ 0,1.
لا تحظر أبداً JS أو CSS في robots.txt.
العرض الديناميكي متوقف التوصية به؛ يحل محله SSR وSSG في Nuxt.
برامج زحف الذكاء الاصطناعي: لا JavaScript، لذلك لا ترى محتوى SPA.

شاهد ما ترسله صفحة Nuxt فعلياً

يختزل سؤال SEO في Nuxt كله في فحص واحد: هل يوجد محتواك في HTML الخام الذي يرسله الخادم أم لا يظهر إلا بعد تشغيل JavaScript؟ إذا كان في HTML الخام فأنت تعرضه من الخادم، ويمكن لبرامج الزحف وروبوتات الذكاء الاصطناعي قراءته.

اجلب HTML الخام وابحث عن محتواك

macOS / Linux:

# Raw HTML as the server sends it — before any client JS runs
curl -sL -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" \
  https://example.com/page/ -o raw.html

# Is your headline actually in the server HTML? (empty = client-rendered)
grep -o "Your headline text" raw.html

Windows (PowerShell):

$ua = "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
Invoke-WebRequest -Uri "https://example.com/page/" -UserAgent $ua -OutFile raw.html
Select-String -Path raw.html -Pattern "Your headline text"

إذا ظهر نصك في المتصفح وغاب عن raw.html، فالصفحة معروضة من جهة العميل؛ حول المسار إلى SSR أو اعرضه مسبقاً. لا يستطيع curl العادي تشغيل JS؛ ولرؤية DOM المعروض استخدم URL Inspection أو برنامج زحف Chrome بلا واجهة.

تأكد من أنك لا تحظر JS أو CSS

macOS / Linux:

curl -sL https://example.com/robots.txt | grep -iE "disallow.*\.(js|css)|Disallow:\s*/(_nuxt|_ipx|assets)"

يطابق Disallow للمسار /_nuxt/، أي مخرجات بناء Nuxt، أو /_ipx/، أي محسن @nuxt/image، فيكسر العرض؛ وهذا خطأ في معظم الحالات.

مقتطف إعداد ثابت في nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/seo'],          // robots, sitemap, og-image, schema-org, utils
  site: { url: 'https://mysite.com' }, // required for absolute canonicals + sitemap
  routeRules: {
    '/blog/**':  { prerender: true },  // SSG for content
    '/admin/**': { ssr: false },       // SPA for the dashboard (won't be indexed)
  },
})

أدوات SEO في Nuxt

URL Inspection في Google Search Console — مرجع الحقيقة. شغّل اختباراً مباشراً وافحص HTML المعروض ولقطة الشاشة وموارد الصفحة للتأكد من عرض محتوى Nuxt فعلياً وعدم حظر شيء.
@nuxtjs/seo وnuxtseo.com — حزمة وحدات Harlan Wilton؛ تعرض لوحة أدوات المطور ملفات robots وخريطة الموقع وschema وصور OG المولدة أثناء التطوير.
Nuxt DevTools — افحص وسوم الرأس وقواعد المسارات ونمط العرض الذي يستخدمه كل مسار.
Rich Results Test — أكد وجود JSON-LD من nuxt-schema-org في المخرجات المعروضة بعد أي تغيير في العرض.
Ahrefs Site Audit أو Screaming Frog في نمط عرض JS — ازحف مع تشغيل عرض JavaScript وإيقافه لمقارنة HTML الخام والمعروض عبر تطبيق Nuxt كله واكتشاف فجوات CSR.
Lighthouse أو PageSpeed Insights — مؤشرات Core Web Vitals، أي LCP وINP وCLS، لعمل @nuxt/image وNuxt Islands.
Bing Webmaster Tools — منظور Bing للزحف والفهرسة وموضع ظهور عمليات إرسال IndexNow.

أخطاء SEO التي ينبغي تجنبها في Nuxt

أخطاء ملموسة تتكرر في مواقع Nuxt الحقيقية؛ امنعها قبل النشر بدلاً من تشخيصها بعد انخفاض الزيارات.

ضبط `ssr: false` لمحتوى تريد فهرسته

هذا أغلى خطأ منفرد في SEO على Nuxt. يرسل نمط SPA مشكلة الغلاف الفارغ نفسها في Vue العادي؛ فتضطر محركات البحث إلى انتظار طابور العرض لملء المحتوى. وتختلف عقود عرض برامج زحف الذكاء الاصطناعي حسب المزود، لذلك سيفوّت برنامج لا يجلب سوى HTML الأولي محتوى الصفحة.

سبب الخطأ: تتخلى طوعاً عن الإعداد الافتراضي الوحيد، SSR، الذي يجعل فهرسة Nuxt أسهل من Vue العادي.

البديل: اترك ssr: true، وهو الافتراضي، لأي شيء عام وقابل للفهرسة. واحصر ssr: false في الأسطح غير المفهرسة فعلاً، مثل لوحات المعلومات بعد تسجيل الدخول ولوحات الإدارة، عبر routeRules لا قلب إعداد عام.

وضع `useSeoMeta()` في layout مشترك

يبدو ضبط العنوان والوصف داخل مكوّن layout فعالاً؛ فهو موضع واحد ينطبق في كل مكان. لكنه يعني حصول كل صفحة تستخدم ذلك layout على الوسوم العامة نفسها، وقد تُستبدل استدعاءات useSeoMeta() على مستوى الصفحة وفق ترتيب العرض.

سبب الخطأ: العناوين والأوصاف الفريدة الخاصة بالصفحة إشارات ملاءمة أساسية؛ ويختزلها الإعداد الافتراضي في layout إلى سلسلة واحدة.

البديل: اضبط القيم الاحتياطية العامة مرة في app.vue، مثل قالب العنوان وقيم OG الافتراضية، ثم استدع useSeoMeta() داخل كل مكوّن صفحة بعنوان الصفحة ووصفها الفعليين.

إرسال عنوان `ogImage` نسبي

يبدو ogImage: '/social.png' سليماً في المتصفح ويفشل تماماً عندما يحاول Facebook أو LinkedIn أو X جلبه؛ لأن برامج الزحف الاجتماعية لا تحل المسارات النسبية نسبةً إلى موقعك.

سبب الخطأ: تحتاج المنصات الاجتماعية إلى URL مطلق لجلب الصورة؛ والمسار النسبي لا يحل إلى شيء من جهتها.

البديل: مرر دائماً عنوان https:// كاملاً، واضبط site.url في nuxt.config.ts كي تبني وحدات @nuxtjs/seo عناوين مطلقة تلقائياً.

اللجوء إلى العرض الديناميكي

كان تقديم لقطة معروضة مسبقاً للروبوتات المعروفة وتطبيق SPA للآخرين حلاً التفافياً مشروعاً قبل سنوات. لكن Google قال منذ ذلك الحين صراحة: “dynamic rendering is a workaround and not a long-term solution.” (ترجمة) «العرض الديناميكي حل التفافي وليس حلاً طويل الأمد.»

سبب الخطأ: يخدم الروبوتات التي تضبطها فقط ويفوّت غيرها، مثل Bing ومعظم برامج زحف الذكاء الاصطناعي، ويضيف بنية حقيقية تحتاج إلى الصيانة لحل مشكلة يحلها SSR وSSG في Nuxt أصلاً.

البديل: استخدم SSR أو nuxt generate وتجاوز العرض الديناميكي كلياً. لا يوجد سيناريو يحتاج فيه موقع Nuxt إليه.

حظر `/_nuxt/` أو `/_ipx/` في `robots.txt`

قد تلتقط قاعدة عامة مثل Disallow: /assets/، أو قاعدة robots مفرطة، دليل مخرجات بناء Nuxt المسمى /_nuxt/ أو مسار محسن @nuxt/image المسمى /_ipx/ دون قصد.

سبب الخطأ: إذا عجز Googlebot عن جلب JS وCSS اللذين يبنيان الصفحة، فلن يستطيع تأكيد مطابقة مخرجات SSR لما تبدو عليه، وتتوقف التحسينات لدى العميل بصمت بالنسبة إليه.

البديل: لا تمنع مسارات مخرجات البناء أو محسن الصور. افحص robots.txt بعد كل نشر يمس التوجيه أو إعداد الوحدات، لا مرة واحدة عند الإطلاق.

ترك حظر الروبوتات لغير الإنتاج نشطاً بعد الإطلاق

تحظر @nuxtjs/robots جميع برامج الزحف في البيئات غير الإنتاجية افتراضياً، وهو صمام أمان جيد لبيئة الاختبار. لكنها تقرأ متغيرات البيئة لاتخاذ القرار، وقد يجعل إعداد NODE_ENV أو نشر المعاينة الخاطئ الحظر يعمل في الإنتاج أيضاً.

سبب الخطأ: يبدو الموقع سليماً تماماً في المتصفح بينما يمنع robots.txt كل شيء بصمت، ولا تُفهرس أي صفحة حتى يلاحظ أحد.

البديل: بعد أي تغيير في النشر أو البيئة، اجلب https://yoursite.com/robots.txt مباشرة وتأكد من أنه ليس Disallow: / عاماً.

مؤشرات الأداء الدائمة لـSEO في Nuxt

الأرقام المستمرة التي ينبغي تتبعها بعد تصحيح إعداد العرض؛ ليست فحوصاً لمرة واحدة بل إشارات دورية تلتقط التراجعات مع تغير التطبيق.

مؤشرات Core Web Vitals: ‏LCP وINP وCLS

ما الذي تخبرك به: هل يحصل الزوار الحقيقيون على صفحة سريعة ومستقرة؟ تتأثر مباشرة بكلفة Nuxt Islands وhydration في INP، وباختيارات تحميل الصور في LCP وCLS.

كيفية استخراجها: بيانات ميدانية من Chrome UX Report عبر /tools/crux-tracker/ أو /tools/cwv-checker/، وبيانات مختبرية من Lighthouse للفحوص السابقة للإصدار.

المعيار والنطاق الواقعي: حدود Google المنشورة للقيمة «الجيدة» هي LCP ≤ 2,5 s وINP ≤ 200ms وCLS ≤ 0,1 عند المئين 75. هذه خطوط النجاح والفشل التي يستخدمها CrUX نفسه وليست رقماً اخترعته. يعتمد موضعك داخل «الجيد» كثيراً على وزن الصور ومقدار hydration.

الدورية: تتحدث بيانات CrUX الميدانية في نافذة متحركة مدتها 28 يوماً؛ افحصها شهرياً وفور أي تغيير في الصور أو الخطوط أو hydration.

التكافؤ بين HTML المعروض والخام

ما الذي يخبرك به: هل يطابق المحتوى الذي تستطيع محركات البحث وبرامج زحف الذكاء الاصطناعي رؤيته في HTML الخام ما يراه الزائر في DOM المعروض؟ هذه مخاطرة SEO الأساسية في Nuxt إذا قُلب ssr أو تراجع مسار إلى CSR.

كيفية استخراجه: تقارن /tools/render-gap/ بين HTML الخام والمعروض لعنوان URL. وللمنظور الرسمي من Google استخدم URL Inspection في GSC ثم «View Crawled Page».

المعيار والنطاق الواقعي: هذا فحص ثنائي لا نطاق؛ ينبغي أن يوجد محتواك الأساسي، مثل العنوان والنص والروابط الداخلية، في HTML الخام بلا استثناء. أي فجوة في صفحة تريد فهرستها أو الاستشهاد بها تراجع يجب إصلاحه لا رقماً يمكن تحمله.

الدورية: بعد كل نشر يمس routeRules أو layouts أو إعداد ssr، مع فحص شهري للقوالب الأساسية فيما عدا ذلك.

تغطية الفهرس في تقرير Page Indexing

ما الذي تخبرك به: عدد عناوين URL المرسلة التي فهرسها Google فعلياً، وسبب استبعاد البقية، مثل التكرار أو الزحف دون فهرسة أو الحظر. وهي الإشارة اللاحقة التي تظهر فيها مشكلات العرض في النهاية.

كيفية استخراجها: تقرير Page Indexing في Search Console بعد تصفيته لأنماط URL الخاصة بموقع Nuxt.

المعيار والنطاق الواقعي: لا توجد نسبة سليمة عالمية؛ فهي تعتمد على عدد عناوين URL شبه المكررة أو الضعيفة التي يولدها هيكل المسارات. راقب الاتجاه وأسباب الاستبعاد لا رقماً مستهدفاً.

الدورية: أسبوعياً أثناء ترحيل نمط العرض وبعده، وشهرياً فيما عدا ذلك.

وصول برامج زحف الذكاء الاصطناعي

ما الذي يخبرك به: هل تستطيع GPTBot وClaudeBot وPerplexityBot وبرامج الزحف المشابهة جلب صفحاتك فعلياً؟ وهذا منفصل عن Google لأن هذه الروبوتات لا تنفذ JavaScript عموماً ولا تقرأ سوى HTML الخام الذي يسمح لها robots.txt بالوصول إليه.

كيفية استخراجه: استخدم /tools/ai-crawler-checker/ للتأكد من عدم منع أي user-agent للذكاء الاصطناعي، وسجلات الخادم للتأكد من أن الروبوتات تطلب الصفحات فعلاً لا أنها مسموحة فقط.

المعيار والنطاق الواقعي: لا أستطيع أن أعطيك معياراً صادقاً لمعدل الاستشهاد؛ إذ يعتمد تكرار استشهاد محرك إجابة بك على مساحة الاستعلام والمنافسة، لا على شيء يتحكم فيه إعداد Nuxt مباشرة. تتبع الوصول، مسموحاً أو محظوراً، لا نسبة استشهاد مختلقة.

الدورية: بعد كل تغيير في robots.txt أو إعداد @nuxtjs/robots، مع فحص شهري للسجلات فيما عدا ذلك.

اختبر نفسك: SEO في Nuxt

خمس أسئلة سريعة عن تحسين موقع Nuxt للبحث. اختر إجابة لكل سؤال ثم تحقق منها.

موارد تستحق وقتك

كتاباتي ذات الصلة

JavaScript SEO: A Definitive Guide — دليلي الكامل للعرض وتكافؤ DOM وقاعدة التوجيه الأكثر تقييداً وسبب ملاءمة SSR والعرض الثابت والمسبق، بما فيه Nuxt، للبحث.
دليل المبتدئ إلى SEO التقني — موضع العرض والزحف في الصورة الأكبر.

محاضراتي

JavaScript SEO — Ungagged 2019 على SlideShare — Chromium الدائم لدى Googlebot، ونحو 20 ضعف كلفة الزحف للعرض، وHistory API بدلاً من توجيه hash، وكيف يتعامل Google مع الروابط الأساسية المحقونة بـJS. تنبيه دائم: نصيحة العرض الديناميكي في تلك المحاضرة قديمة الآن، فقد أوقف Google التوصية به.

من أنحاء المجال

Nuxt — مفاهيم العرض رسمية — العرض العام مقابل عرض العميل وسبب تفضيل برامج الزحف لـSSR.
Nuxt — SEO والبيانات الوصفية رسمية — useSeoMeta() وuseHead()، مرجع البدء.
تعلم SEO مع Nuxt من Harlan Wilton وnuxtseo.com — أشمل دليل Nuxt SEO موجه للمطورين ويُحافظ على حداثته.
harlan-zw/nuxt-seo على GitHub — مصدر حزمة وحدات @nuxtjs/seo.
Nuxt Image رسمية — <NuxtImg> وتحسين Core Web Vitals.
تحسين أداء Nuxt من DebugBear — شرح ممارس لإصلاحات Core Web Vitals في Nuxt.
أنماط عرض Nuxt 3 من RisingStack — مقارنة تقنية لـSSR وSSG والعرض الهجين.
r/TechSEO — مجتمع تصحيح مشكلات العرض والفهرسة.