Techniczne SEO dla programistów Next.js: wskazówki i narzędzia

Techniczne 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.

1. Dynamiczne Meta Tags i Open Graph

Next.js 13+ umożliwia centralne zarządzanie meta tagami za pomocą funkcji generateMetadata:

export async function generateMetadata({ params }) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'common' });
  return {
    title: t('title'),
    description: t('description'),
    openGraph: {
      title: t('title'),
      description: t('description'),
      images: ['/public/placeholder.svg'],
    },
    icons: {
      icon: '/favicon.ico',
    },
  };
}

Wskazówka: Pamiętaj o aktualizacji meta tags dla każdego języka i strony za pomocą dynamicznych tłumaczeń.

2. Automatyczny Sitemap i robots.txt

Aby generować sitemaps i robots.txt, użyj next-sitemap:

npm install next-sitemap

Skonfiguruj next-sitemap.config.js do obsługi języków:

module.exports = {
  siteUrl: 'https://spinny.dev',
  generateRobotsTxt: true,
  i18n: {
    locales: [
      'it',
      'en',
      'fr',
      'de',
      'es',
      'ar',
      'hi',
      'ja',
      'zh',
      'pt',
      'bn',
      'ru',
      'id',
      'ur',
      'ko',
      'tr',
      'vi',
      'th',
      'pl',
    ],
    defaultLocale: 'it',
  },
};

Dodatkowe narzędzie: Wypróbuj next-seo do zaawansowanego zarządzania meta tagami i danymi strukturalnymi.

3. Internacjonalizacja (i18n) i wielojęzyczne SEO

Next.js obsługuje zlokalizowane trasy. Pamiętaj, aby:

• Używać tagu hreflang dla każdego języka.
• Generować wielojęzyczne sitemaps.
• Tłumaczyć meta tags.

Przykład tagu hreflang:

<link rel="alternate" href="https://spinny.dev/it" hreflang="it" />
<link rel="alternate" href="https://spinny.dev/en" hreflang="en" />

Najlepsza praktyka: Zawsze oferuj widoczny selektor języka i zachowuj spójność URL.

4. Wydajność i Core Web Vitals

• Używaj <Image /> z Next.js do zoptymalizowanych obrazów.
• Włącz lazy loading.
• Analizuj za pomocą Lighthouse i Vercel Analytics.
• Minimalizuj nieużywany JavaScript i CSS.
• Wykorzystuj cache i CDN Vercel.

5. Dane strukturalne (JSON-LD)

Dodaj dane strukturalne, aby poprawić widoczność w rich snippets:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'BlogPosting',
      headline: 'Technical SEO for Next.js Developers',
      datePublished: '2025-07-28',
      author: { '@type': 'Person', name: 'Filippo Spinella' },
      inLanguage: 'en',
    }),
  }}
/>

Wskazówka: Uwzględnij również dane strukturalne dla breadcrumbs, artykułów i produktów, jeśli to możliwe.

6. Obsługa błędów i niestandardowe strony 404

Stwórz zlokalizowaną stronę not-found.tsx dla każdego języka. To poprawia doświadczenie użytkownika i SEO.

Wskazówka: Dostosuj również strony błędów 500 i błędów serwera.

7. Przydatne narzędzia

• next-sitemap: sitemaps i robots.txt
• next-seo: zaawansowane zarządzanie meta tagami
• Google Search Console: monitorowanie SEO
• Ahrefs Webmaster Tools: analiza techniczna
• Screaming Frog: zaawansowane crawling
• Mermaid: do wizualizacji przepływów i architektur SEO

8. Monitorowanie i analiza

Zintegruj Google Analytics, Vercel Analytics i monitoruj Core Web Vitals.

• Użyj Google Tag Manager do centralnego zarządzania tagami.
• Monitoruj logi dostępu i błędy za pomocą narzędzi takich jak Sentry.

Podsumowanie

Techniczne 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!

Lista kontrolna:

• [x] Dynamiczne meta tags
• [x] Wielojęzyczny sitemap
• [x] Dane strukturalne
• [x] Zoptymalizowana wydajność
• [x] Aktywne monitorowanie