Technische SEO is essentieel om ervoor te zorgen dat je Next.js-site gemakkelijk indexeerbaar, snel en concurrerend is in zoekresultaten. Deze gids behandelt strategieën, tools en praktische snippets om je SEO naar het volgende niveau te tillen, met speciale aandacht voor meertalige sites.
1. Dynamische Meta Tags en Open Graph
Next.js 13+ biedt gecentraliseerd meta-tagbeheer met de generateMetadata-functie:
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', }, }; }
Tip: Vergeet niet meta-tags voor elke taal en pagina bij te werken met dynamische vertalingen.
2. Automatische Sitemap en robots.txt
Gebruik next-sitemap:
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. Internationalisatie (i18n) en Meertalige SEO
- Gebruik de
hreflang-tag voor elke taal. - Genereer meertalige sitemaps.
- Vertaal meta-tags.
<link rel="alternate" href="https://spinny.dev/it" hreflang="it" /> <link rel="alternate" href="https://spinny.dev/en" hreflang="en" />
Best Practice: Bied altijd een zichtbare taalkiezer aan en behoud URL-consistentie.
4. Prestaties en Core Web Vitals
- Gebruik Next.js
<Image />voor geoptimaliseerde afbeeldingen. - Schakel lazy loading in.
- Analyseer met Lighthouse en Vercel Analytics.
- Minimaliseer ongebruikte JavaScript en CSS.
5. Gestructureerde Data (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. Foutafhandeling en Aangepaste 404-Pagina's
Maak een gelokaliseerde not-found.tsx-pagina voor elke taal.
7. Nuttige Tools
- next-sitemap, next-seo, Google Search Console, Ahrefs Webmaster Tools, Screaming Frog, Mermaid
8. Monitoring en Analyse
Integreer Google Analytics, Vercel Analytics en monitor Core Web Vitals.
Conclusie
Technische SEO in Next.js vereist aandacht voor details zoals meta-tags, prestaties, internationalisatie en gestructureerde data. Automatiseer waar mogelijk en monitor continu de resultaten!
Laatste Checklist:
- Dynamische meta-tags
- Meertalige sitemap
- Gestructureerde data
- Geoptimaliseerde prestaties
- Actieve monitoring