1~
2Технічне SEO є важливим для забезпечення легкого індексування, швидкості та конкурентоспроможності вашого сайту Next.js у результатах пошуку.
3~
4## 1. Динамічні Мета-теги та Open Graph
5~
6```tsx
7export async function generateMetadata({ params }) {
8  const { locale } = await params;
9  const t = await getTranslations({ locale, namespace: 'common' });
10  return {
11    title: t('title'),
12    description: t('description'),
13    openGraph: {
14      title: t('title'),
15      description: t('description'),
16      images: ['/public/placeholder.svg'],
17    },
18    icons: {
19      icon: '/favicon.ico',
20    },
21  };
22}
23```
24~
25> **Порада:** Не забувайте оновлювати мета-теги для кожної мови та сторінки.
26~
27## 2. Автоматична Sitemap та robots.txt
28~
29```bash
30npm install next-sitemap
31```
32~
33```js
34module.exports = {
35  siteUrl: 'https://spinny.dev',
36  generateRobotsTxt: true,
37  i18n: {
38    locales: [
39      'it', 'en', 'fr', 'de', 'es', 'ar', 'hi', 'ja', 'zh', 'pt',
40      'bn', 'ru', 'id', 'ur', 'ko', 'tr', 'vi', 'th', 'pl',
41    ],
42    defaultLocale: 'it',
43  },
44};
45```
46~
47## 3. Інтернаціоналізація (i18n) та Мультимовне SEO
48~
49```tsx
50<link rel="alternate" href="https://spinny.dev/it" hreflang="it" />
51<link rel="alternate" href="https://spinny.dev/en" hreflang="en" />
52```
53~
54> **Найкраща практика:** Завжди надавайте видимий перемикач мов та зберігайте консистентність URL.
55~
56## 4. Продуктивність та Core Web Vitals
57~
58- Використовуйте Next.js `<Image />` для оптимізованих зображень.
59- Увімкніть lazy loading.
60- Аналізуйте за допомогою [Lighthouse](https://developers.google.com/web/tools/lighthouse) та [Vercel Analytics](https://vercel.com/analytics).
61~
62## 5. Структуровані Дані (JSON-LD)
63~
64```tsx
65<script
66  type="application/ld+json"
67  dangerouslySetInnerHTML={{
68    __html: JSON.stringify({
69      '@context': 'https://schema.org',
70      '@type': 'BlogPosting',
71      headline: 'Technical SEO for Next.js Developers',
72      datePublished: '2025-07-28',
73      author: { '@type': 'Person', name: 'Filippo Spinella' },
74      inLanguage: 'en',
75    }),
76  }}
77/>
78```
79~
80## 6. Обробка Помилок та Власні 404-сторінки
81~
82Створіть локалізовану `not-found.tsx` для кожної мови.
83~
84## 7. Корисні Інструменти
85~
86- **next-sitemap**, **next-seo**, **Google Search Console**, **Ahrefs Webmaster Tools**, **Screaming Frog**, **Mermaid**
87~
88## 8. Моніторинг та Аналіз
89~
90Інтегруйте Google Analytics, Vercel Analytics та відстежуйте Core Web Vitals.
91~
92~
93## Висновок
94~
95Технічне SEO у Next.js вимагає уваги до деталей: мета-теги, продуктивність, інтернаціоналізація та структуровані дані. Автоматизуйте де можливо та постійно моніторте результати!
96~
97> **Фінальний Чек-лист:**
98>
99> - [x] Динамічні мета-теги
100> - [x] Мультимовна sitemap
101> - [x] Структуровані дані
102> - [x] Оптимізована продуктивність
103> - [x] Активний моніторинг
104~