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~