1~
2SEO-ul tehnic este esential pentru a te asigura ca site-ul tau Next.js este usor de indexat, rapid si competitiv in rezultatele cautarilor. Acest ghid acopera strategii, instrumente si fragmente de cod practice, cu un accent special pe site-urile multilingve.
3~
4## 1. Meta tag-uri dinamice si Open Graph
5~
6Next.js 13+ permite gestionarea centralizata a meta tag-urilor folosind functia `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> **Sfat:** Nu uita sa actualizezi meta tag-urile pentru fiecare limba si pagina.
28~
29## 2. Sitemap automat si robots.txt
30~
31```bash
32npm install next-sitemap
33```
34~
35```js
36module.exports = {
37  siteUrl: 'https://spinny.dev',
38  generateRobotsTxt: true,
39  i18n: {
40    locales: [
41      'it', 'en', 'fr', 'de', 'es', 'ar', 'hi', 'ja', 'zh', 'pt',
42      'bn', 'ru', 'id', 'ur', 'ko', 'tr', 'vi', 'th', 'pl',
43    ],
44    defaultLocale: 'it',
45  },
46};
47```
48~
49## 3. Internationalizare (i18n) si SEO multilingv
50~
51- Foloseste tag-ul `hreflang` pentru fiecare limba.
52- Genereaza sitemap-uri multilingve.
53- Traduce meta tag-urile.
54~
55```tsx
56<link rel="alternate" href="https://spinny.dev/it" hreflang="it" />
57<link rel="alternate" href="https://spinny.dev/en" hreflang="en" />
58```
59~
60> **Buna practica:** Ofera intotdeauna un selector de limba vizibil si mentine consistenta URL-urilor.
61~
62## 4. Performanta si Core Web Vitals
63~
64- Foloseste Next.js `<Image />` pentru imagini optimizate.
65- Activeaza lazy loading.
66- Analizeaza cu [Lighthouse](https://developers.google.com/web/tools/lighthouse) si [Vercel Analytics](https://vercel.com/analytics).
67- Minimizeaza JavaScript si CSS neutilizat.
68~
69## 5. Date structurate (JSON-LD)
70~
71```tsx
72<script
73  type="application/ld+json"
74  dangerouslySetInnerHTML={{
75    __html: JSON.stringify({
76      '@context': 'https://schema.org',
77      '@type': 'BlogPosting',
78      headline: 'Technical SEO for Next.js Developers',
79      datePublished: '2025-07-28',
80      author: { '@type': 'Person', name: 'Filippo Spinella' },
81      inLanguage: 'en',
82    }),
83  }}
84/>
85```
86~
87## 6. Gestionarea erorilor si pagini 404 personalizate
88~
89Creeaza o pagina `not-found.tsx` localizata pentru fiecare limba.
90~
91## 7. Instrumente utile
92~
93- **next-sitemap**: sitemap-uri si robots.txt
94- **next-seo**: gestionare avansata a meta tag-urilor
95- **Google Search Console**: monitorizare SEO
96- **Ahrefs Webmaster Tools**: analiza tehnica
97- **Screaming Frog**: crawling avansat
98~
99## 8. Monitorizare si analiza
100~
101Integreaza Google Analytics, Vercel Analytics si monitorizezi Core Web Vitals.
102~
103~
104## Concluzie
105~
106SEO-ul tehnic in Next.js necesita atentie la detalii precum meta tag-uri, performanta, internationalizare si date structurate. Automatizeaza acolo unde este posibil si monitorizeaza constant rezultatele!
107~
108> **Lista finala de verificare:**
109>
110> - [x] Meta tag-uri dinamice
111> - [x] Sitemap multilingv
112> - [x] Date structurate
113> - [x] Performanta optimizata
114> - [x] Monitorizare activa
115~