SEO tehnic pentru dezvoltatori Next.js: Sfaturi si instrumente

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

1. Meta tag-uri dinamice si Open Graph

Next.js 13+ permite gestionarea centralizata a meta tag-urilor folosind functia 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',
    },
  };
}

Sfat: Nu uita sa actualizezi meta tag-urile pentru fiecare limba si pagina.

2. Sitemap automat si robots.txt

npm install next-sitemap

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',
  },
};

3. Internationalizare (i18n) si SEO multilingv

• Foloseste tag-ul hreflang pentru fiecare limba.
• Genereaza sitemap-uri multilingve.
• Traduce meta tag-urile.

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

Buna practica: Ofera intotdeauna un selector de limba vizibil si mentine consistenta URL-urilor.

4. Performanta si Core Web Vitals

• Foloseste Next.js <Image /> pentru imagini optimizate.
• Activeaza lazy loading.
• Analizeaza cu Lighthouse si Vercel Analytics.
• Minimizeaza JavaScript si CSS neutilizat.

5. Date structurate (JSON-LD)

<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',
    }),
  }}
/>

6. Gestionarea erorilor si pagini 404 personalizate

Creeaza o pagina not-found.tsx localizata pentru fiecare limba.

7. Instrumente utile

• next-sitemap: sitemap-uri si robots.txt
• next-seo: gestionare avansata a meta tag-urilor
• Google Search Console: monitorizare SEO
• Ahrefs Webmaster Tools: analiza tehnica
• Screaming Frog: crawling avansat

8. Monitorizare si analiza

Integreaza Google Analytics, Vercel Analytics si monitorizezi Core Web Vitals.

Concluzie

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

Lista finala de verificare:

• Meta tag-uri dinamice
• Sitemap multilingv
• Date structurate
• Performanta optimizata
• Monitorizare activa