تطبيقات Vue.js متوافقة مع SEO: نصائح وأدوات ومثال عملي للبريرندر

لماذا تواجه تطبيقات SPA مشاكل مع SEO؟

التطبيق أحادي الصفحة (SPA) يعرض محتواه عبر JavaScript بعد تحميل الصفحة. يرسل الخادم فقط قشرة HTML صغيرة. عندما يزور Google:

1. يقرأ الزاحف HTML الخام — قشرة فارغة.
2. لاحقاً، يشغّل Google JavaScript في موجة ثانية أبطأ.
3. بعض الصفحات لا تُعرض ولا تُفهرس بالكامل أبداً. هذا يعني أن العناوين والأوصاف والمحتوى غير مرئية في البداية. الحل بسيط: أعطِ الروبوتات HTML حقيقياً من البداية.

الأدوات التي تحتاجها لتحسين SEO في Vue

إليك أفضل الأدوات لتحسين SEO في Vue.js لعام 2026. لا تحتاجها كلها — ابدأ بتلك التي تحل أكبر مشكلة لديك.

الأداةوظيفتهامتى تستخدمها@unhead/vueإدارة وسوم العنوان والميتا لكل صفحةكل تطبيق SPAvue-routerالتوجيه من جهة العميل مع روابط نظيفةكل تطبيق SPAvite-plugin-sitemapتوليد sitemap.xml أثناء البناءالمسارات الثابتةسكربت بريرندر Puppeteerعرض HTML كامل أثناء البناءصفحات المحتوىrobots.txtيخبر الروبوتات بما يجب زحفهكل موقعJSON-LDبيانات منظمة للنتائج الغنيةالصفحات المهمة

لننظر إلى كل واحدة منها.

1. @unhead/vue لوسوم الميتا الديناميكية

تحتاج كل صفحة إلى عنوانها ووصفها الخاص. @unhead/vue هو المعيار الحديث لـ Vue 3. يخلف vue-meta القديم.

<script setup>
import { useHead } from '@unhead/vue'

useHead({
  title: 'من أنا | أمين لمحاري',
  meta: [{ name: 'description', content: 'مطور Vue.js مستقل في مراكش.' }]
})
</script>

استخدم قيماً computed حتى تتحدث الوسوم تلقائياً عندما تصل بياناتك من الـ API.

2. روابط نظيفة مع vue-router

استخدم روابط نظيفة وواضحة. الروابط الجيدة تساعد Google والبشر على فهم صفحاتك.

/blog/أول-تطبيق-لي-بفيو      → جيد
/?page=blog&post=123          → سيئ

أضف مسار 404 شاملاً حتى تتصرف الصفحات المفقودة بشكل صحيح.

3. vite-plugin-sitemap

خريطة الموقع (sitemap) تسرد كل صفحة تريد فهرستها. يقوم vite-plugin-sitemap بإنشائها لك أثناء vite build. أضف مساراتك الثابتة في dynamicRoutes:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Sitemap from 'vite-plugin-sitemap'

export default defineConfig({
  plugins: [
    vue(),
    Sitemap({
      hostname: 'https://www.your-site.dev',
      dynamicRoutes: ['/about', '/contact', '/my-work', '/blog']
    })
  ]
})

4. ملف robots.txt

ضع ملف robots.txt في مجلد public/. سينسخه Vite تلقائياً إلى مخرجات البناء.

User-agent: *
Allow: /

Sitemap: https://www.your-site.dev/sitemap.xml

5. البيانات المنظمة JSON-LD

تخبر JSON-LD شركة Google بالضبط عن مضمون صفحتك. أضفها باستخدام useHead:

useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'BlogPosting',
        headline: 'تطبيقات Vue.js متوافقة مع SEO',
        author: { '@type': 'Person', name: 'أمين لمحاري' },
        datePublished: '2026-08-02'
      })
    }
  ]
})

قائمة التحقق SEO لـ Vue.js

اتبع هذه النصائح لجعل أي تطبيق Vue أحادي الصفحة متوافقاً مع SEO:

1. املأ ملفindex.htmlالافتراضي. إنه أول ما تقرأه الروبوتات. أعطه عنواناً حقيقياً ووصفاً ووسوم Open Graph.
2. ضع رابطاً كنسياً (canonical) في كل صفحة. يخبر Google أي نسخة من الرابط هي الرسمية.
3. حدّث وسوم الميتا لكل مسار. استخدم useHead() بقيم تفاعلية.
4. أضف خريطة موقع. أرسلها في Google Search Console.
5. احجب الصفحات الخاصة. استخدم noindex على لوحات التحكم ومناطق الإدارة.
6. لا تحجب JavaScript. لا تحجب أبداً .js أو .css عن Googlebot في robots.txt.
7. عالج أخطاء 404. أضف رداً احتياطياً من الخادم حتى تعمل الروابط العميقة وتعرض 404 حقيقياً.
8. استخدم HTML دلالياً. العناوين المرتبة (h1، h2، h3) تساعد محركات البحث على فهم محتواك.

   مثال البريرندر: HTML كامل أثناء البناء

البريرندر هو أبسط طريقة لإعطاء الروبوتات HTML حقيقياً دون الانتقال إلى إطار عمل خادم. إليك كيف يعمل: أثناء البناء، يزور متصفح بلا واجهة (headless) كل مسار، وينتظر حتى يعرض Vue الصفحة، ثم يحفظ HTML النهائي. عندما يزور Google لاحقاً، يقرأ صفحات كاملة وقابلة للفهرسة.

هذا هو بالضبط النهج المستخدم في هذا الموقع. إليك مثالاً عملياً.

الخطوة 1: أطلق حدث «جاهز» في تطبيق Vue

في مكوّن الصفحة أو التدوينة، أخبر سكربت البريرندر عندما يكون المحتوى جاهزاً:

<script setup>
import { onMounted } from 'vue'
import { useBlog } from '@/composables/useBlog'

const { post, fetchPost } = useBlog()

onMounted(async () => {
  await fetchPost(route.params.slug)
  document.dispatchEvent(new Event('prerender-ready'))
})
</script>

الخطوة 2: اكتب سكربت البريرندر

أنشئ scripts/prerender.js. يستخدم Puppeteer لالتقاط كل مسار:

import puppeteer from 'puppeteer'
import { promises as fs } from 'node:fs'
import path from 'node:path'

const DIST = path.resolve('dist')
const routes = ['/blog', '/about', '/contact', '/my-work']

const browser = await puppeteer.launch({ headless: true })

for (const route of routes) {
  const page = await browser.newPage()
  await page.goto(`http://localhost:5173${route}`, {
    waitUntil: 'networkidle0'
  })

  await page.evaluate(() => {
    return new Promise((resolve) => {
      if (document.readyState === 'complete') resolve()
      document.addEventListener('prerender-ready', resolve, { once: true })
    })
  })

  const html = await page.content()
  const outputDir = path.join(DIST, route === '/' ? '' : route)
  await fs.mkdir(outputDir, { recursive: true })
  await fs.writeFile(path.join(outputDir, 'index.html'), html)
  console.log(`تم عرض: ${route}`)
}

await browser.close()

الخطوة 3: شغّله بعد البناء

أضف خطوة البريرندر إلى سكربتاتك:

{
  "scripts": {
    "build": "vite build",
    "prerender": "node scripts/prerender.js",
    "postbuild": "prerender"
  }
}

النتيجة هي مجلد dist/ يحتوي ملفات HTML حقيقية:

dist/
├── index.html
├── about/index.html
├── contact/index.html
├── my-work/index.html
└── blog/index.html

محركات البحث ومعاينات وسائل التواصل تقرأ هذه الملفات فوراً. ويحتفظ المستخدمون بتجربة SPA السريعة.

البريرندر أم SSR: أيهما تختار لـ Vue؟

البريرندرSSR (Nuxt)الإعدادسكربت بناء صغيرتغيير إطار عمل كبيرالحاجة لخادملا، ملفات ثابتةنعم، خادم Nodeمثالي لـمحتوى يتغير نادراًصفحات لحظية ومخصصة لكل مستخدمالسرعةسريع جداًأبطأ لكل طلب

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

نصائح أخيرة لتطبيق Vue.js متوافق مع SEO

• ابدأ بقائمة التحقق. معظم تطبيقات Vue تحقق 80% من مكاسب SEO من وسوم ميتا جيدة وخريطة موقع وملف index.html صحيح.
• أضف البريرندر عندما يكون لديك الكثير من صفحات المحتوى التي يجب أن تظهر في البحث.
• حافظ على مصدر واحد للحقيقة للمسارات — استخدم القائمة نفسها لخريطة موقعك وسكربت البريرندر حتى لا يفوتك شيء.
• تحقق من المخرجات: بعد البناء، افتح ملف HTML معمولاً بالبريرندر وتأكد من وجود العنوان والوصف والمحتوى. يمكن لتطبيقات Vue.js أحادية الصفحة أن تظهر جيداً في نتائج Google. مع الأدوات المناسبة وسكربت بريرندر صغير، سيتم العثور على تطبيقك — وسيُرى محتواك أخيراً.

---

كُتب هذا المقال في أغسطس 2026. أدوات البريرندر وتحسين SEO تتطور بسرعة، لذا تحقق دائماً من أحدث الوثائق لـ @unhead/vue و vite-plugin-sitemap.