1~
2Techniczne SEO jest niezbędne, aby Twoja strona Next.js była łatwo indeksowalna, szybka i konkurencyjna w wynikach wyszukiwania. Ten przewodnik obejmuje strategie, narzędzia i praktyczne fragmenty kodu, aby wynieść Twoje SEO na wyższy poziom, ze szczególnym uwzględnieniem stron wielojęzycznych.
3~
4## 1. Dynamiczne Meta Tags i Open Graph
5~
6Next.js 13+ umożliwia centralne zarządzanie meta tagami za pomocą funkcji `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> **Wskazówka:** Pamiętaj o aktualizacji meta tags dla każdego języka i strony za pomocą dynamicznych tłumaczeń.
28~
29## 2. Automatyczny Sitemap i robots.txt
30~
31Aby generować sitemaps i robots.txt, użyj [next-sitemap](https://www.npmjs.com/package/next-sitemap):
32~
33```bash
34npm install next-sitemap
35```
36~
37Skonfiguruj `next-sitemap.config.js` do obsługi języków:
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> **Dodatkowe narzędzie:** Wypróbuj [next-seo](https://github.com/garmeeh/next-seo) do zaawansowanego zarządzania meta tagami i danymi strukturalnymi.
71~
72## 3. Internacjonalizacja (i18n) i wielojęzyczne SEO
73~
74Next.js obsługuje zlokalizowane trasy. Pamiętaj, aby:
75~
76- Używać tagu `hreflang` dla każdego języka.
77- Generować wielojęzyczne sitemaps.
78- Tłumaczyć meta tags.
79~
80Przykład tagu `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> **Najlepsza praktyka:** Zawsze oferuj widoczny selektor języka i zachowuj spójność URL.
88~
89## 4. Wydajność i Core Web Vitals
90~
91- Używaj `<Image />` z Next.js do zoptymalizowanych obrazów.
92- Włącz lazy loading.
93- Analizuj za pomocą [Lighthouse](https://developers.google.com/web/tools/lighthouse) i [Vercel Analytics](https://vercel.com/analytics).
94- Minimalizuj nieużywany JavaScript i CSS.
95- Wykorzystuj cache i CDN Vercel.
96~
97## 5. Dane strukturalne (JSON-LD)
98~
99Dodaj dane strukturalne, aby poprawić widoczność w rich snippets:
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: 'Technical SEO for Next.js Developers',
109      datePublished: '2025-07-28',
110      author: { '@type': 'Person', name: 'Filippo Spinella' },
111      inLanguage: 'en',
112    }),
113  }}
114/>
115```
116~
117> **Wskazówka:** Uwzględnij również dane strukturalne dla breadcrumbs, artykułów i produktów, jeśli to możliwe.
118~
119## 6. Obsługa błędów i niestandardowe strony 404
120~
121Stwórz zlokalizowaną stronę `not-found.tsx` dla każdego języka. To poprawia doświadczenie użytkownika i SEO.
122~
123> **Wskazówka:** Dostosuj również strony błędów 500 i błędów serwera.
124~
125## 7. Przydatne narzędzia
126~
127- **next-sitemap**: sitemaps i robots.txt
128- **next-seo**: zaawansowane zarządzanie meta tagami
129- **Google Search Console**: monitorowanie SEO
130- **Ahrefs Webmaster Tools**: analiza techniczna
131- **Screaming Frog**: zaawansowane crawling
132- **Mermaid**: do wizualizacji przepływów i architektur SEO
133~
134## 8. Monitorowanie i analiza
135~
136Zintegruj Google Analytics, Vercel Analytics i monitoruj Core Web Vitals.
137~
138- Użyj [Google Tag Manager](https://tagmanager.google.com/) do centralnego zarządzania tagami.
139- Monitoruj logi dostępu i błędy za pomocą narzędzi takich jak Sentry.
140~
141~
142## Podsumowanie
143~
144Techniczne SEO w Next.js wymaga uwagi na szczegóły takie jak meta tags, wydajność, internacjonalizacja i dane strukturalne. Automatyzuj gdzie to możliwe i stale monitoruj wyniki!
145~
146> **Lista kontrolna:**
147>
148> - [x] Dynamiczne meta tags
149> - [x] Wielojęzyczny sitemap
150> - [x] Dane strukturalne
151> - [x] Zoptymalizowana wydajność
152> - [x] Aktywne monitorowanie
153~