1 
2تحسين محركات البحث التقنية ضروري لضمان أن يكون موقع Next.js الخاص بك قابلاً للفهرسة بسهولة وسريعًا وقادرًا على المنافسة في نتائج البحث. يغطي هذا الدليل استراتيجيات وأدوات وقطع شيفرة عملية لرفع تحسين محركات البحث لديك إلى المستوى التالي، مع التركيز بشكل خاص على المواقع متعددة اللغات.
3 
4## 1. العلامات الوصفية الديناميكية وOpen Graph
5 
6يتيح Next.js 13+ إدارة العلامات الوصفية مركزيًا باستخدام وظيفة `generateMetadata`:
7 
8```tsx
9export async function generateMetadata({ params }) {
10  const { locale } = await params;
11  const t = await getTranslations({ locale, namespace: 'common' });
12  return {
13    title: t('title'),
14    description: t('description'),
15    openGraph: {
16      title: t('title'),
17      description: t('description'),
18      images: ['/public/placeholder.svg'],
19    },
20    icons: {
21      icon: '/favicon.ico',
22    },
23  };
24}
25```
26 
27> **نصيحة:** تذكر تحديث العلامات الوصفية لكل لغة وصفحة باستخدام الترجمات الديناميكية.
28 
29## 2. خريطة الموقع وrobots.txt التلقائية
30 
31لإنشاء خرائط الموقع وملفات robots.txt، استخدم [next-sitemap](https://www.npmjs.com/package/next-sitemap):
32 
33```bash
34npm install next-sitemap
35```
36 
37قم بتكوين `next-sitemap.config.js` لدعم اللغات:
38 
39```js
40module.exports = {
41  siteUrl: 'https://spinny.dev',
42  generateRobotsTxt: true,
43  i18n: {
44    locales: [
45      'it',
46      'en',
47      'fr',
48      'de',
49      'es',
50      'ar',
51      'hi',
52      'ja',
53      'zh',
54      'pt',
55      'bn',
56      'ru',
57      'id',
58      'ur',
59      'ko',
60      'tr',
61      'vi',
62      'th',
63      'pl',
64    ],
65    defaultLocale: 'it',
66  },
67};
68```
69 
70> **أداة إضافية:** جرب [next-seo](https://github.com/garmeeh/next-seo) لإدارة متقدمة للعلامات الوصفية والبيانات المنظمة.
71 
72## 3. التدويل (i18n) وتحسين محركات البحث متعددة اللغات
73 
74يدعم Next.js المسارات المحلية. تذكر:
75 
76- استخدام علامة `hreflang` لكل لغة.
77- إنشاء خرائط مواقع متعددة اللغات.
78- ترجمة العلامات الوصفية.
79 
80مثال على علامة `hreflang`:
81 
82```tsx
83<link rel="alternate" href="https://spinny.dev/it" hreflang="it" />
84<link rel="alternate" href="https://spinny.dev/en" hreflang="en" />
85```
86 
87> **أفضل الممارسات:** قدم دائمًا محدد لغة مرئيًا وحافظ على تناسق عناوين URL.
88 
89## 4. الأداء وCore Web Vitals
90 
91- استخدم `<Image />` من Next.js للصور المحسّنة.
92- قم بتمكين التحميل البطيء.
93- قم بالتحليل باستخدام [Lighthouse](https://developers.google.com/web/tools/lighthouse) و[Vercel Analytics](https://vercel.com/analytics).
94- قلل من JavaScript وCSS غير المستخدمين.
95- استفد من ذاكرة التخزين المؤقت وشبكة CDN الخاصة بـ Vercel.
96 
97## 5. البيانات المنظمة (JSON-LD)
98 
99أضف بيانات منظمة لتحسين الرؤية في المقتطفات الغنية:
100 
101```tsx
102<script
103  type="application/ld+json"
104  dangerouslySetInnerHTML={{
105    __html: JSON.stringify({
106      '@context': 'https://schema.org',
107      '@type': 'BlogPosting',
108      headline: 'تحسين محركات البحث التقنية لمطوري Next.js',
109      datePublished: '2025-07-28',
110      author: { '@type': 'Person', name: 'Filippo Spinella' },
111      inLanguage: 'ar',
112    }),
113  }}
114/>
115```
116 
117> **نصيحة:** قم أيضًا بتضمين بيانات منظمة للخبز، المقالات، والمنتجات إذا كان ذلك مناسبًا.
118 
119## 6. إدارة الأخطاء وصفحات 404 المخصصة
120 
121قم بإنشاء صفحة `not-found.tsx` محلية لكل لغة. يحسن هذا من تجربة المستخدم وتحسين محركات البحث.
122 
123> **نصيحة:** قم أيضًا بتخصيص صفحات 500 وصفحات أخطاء الخادم.
124 
125## 7. أدوات مفيدة
126 
127- **next-sitemap**: خرائط الموقع وrobots.txt
128- **next-seo**: إدارة متقدمة للعلامات الوصفية
129- **Google Search Console**: مراقبة تحسين محركات البحث
130- **Ahrefs Webmaster Tools**: التحليل الفني
131- **Screaming Frog**: أدوات الزحف المتقدمة
132- **Mermaid**: لتصور تدفقات وهياكل تحسين محركات البحث
133 
134## 8. المراقبة والتحليل
135 
136قم بدمج Google Analytics وVercel Analytics ومراقبة Core Web Vitals.
137 
138- استخدم [Google Tag Manager](https://tagmanager.google.com/) لإدارة العلامات مركزيًا.
139- راقب سجلات الوصول والأخطاء باستخدام أدوات مثل Sentry.
140 
141 
142## الخلاصة
143 
144يتطلب تحسين محركات البحث التقنية في Next.js الانتباه إلى التفاصيل مثل العلامات الوصفية، الأداء، التدويل، والبيانات المنظمة. قم بأتمتة ما يمكن وأشرف باستمرار على النتائج!
145 
146> **قائمة التحقق النهائية:**
147>
148> - [x] العلامات الوصفية الديناميكية
149> - [x] خريطة الموقع متعددة اللغات
150> - [x] البيانات المنظمة
151> - [x] الأداء المحسن
152> - [x] المراقبة النشطة
153