1~
2Technical SEO is essential to ensure your Next.js site is easily indexable, fast, and competitive in search results. This guide covers strategies, tools, and practical snippets to take your SEO to the next level, with a special focus on multilingual sites.
3~
4## 1. Dynamic Meta Tags and Open Graph
5~
6Next.js 13+ allows centralized meta tag management using the `generateMetadata` function:
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> **Tip:** Remember to update meta tags for each language and page using dynamic translations.
28~
29## 2. Automatic Sitemap and robots.txt
30~
31To generate sitemaps and robots.txt, use [next-sitemap](https://www.npmjs.com/package/next-sitemap):
32~
33```bash
34npm install next-sitemap
35```
36~
37Configure `next-sitemap.config.js` to support languages:
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> **Extra Tool:** Try [next-seo](https://github.com/garmeeh/next-seo) for advanced meta tag and structured data management.
71~
72## 3. Internationalization (i18n) and Multilingual SEO
73~
74Next.js supports localized routes. Remember to:
75~
76- Use the `hreflang` tag for each language.
77- Generate multilingual sitemaps.
78- Translate meta tags.
79~
80Example of `hreflang` tag:
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> **Best Practice:** Always offer a visible language selector and maintain URL consistency.
88~
89## 4. Performance and Core Web Vitals
90~
91- Use Next.js `<Image />` for optimized images.
92- Enable lazy loading.
93- Analyze with [Lighthouse](https://developers.google.com/web/tools/lighthouse) and [Vercel Analytics](https://vercel.com/analytics).
94- Minimize unused JavaScript and CSS.
95- Leverage Vercel's cache and CDN.
96~
97## 5. Structured Data (JSON-LD)
98~
99Add structured data to improve visibility in 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> **Tip:** Also include structured data for breadcrumbs, articles, and products if applicable.
118~
119## 6. Error Handling and Custom 404 Pages
120~
121Create a localized `not-found.tsx` page for each language. This improves user experience and SEO.
122~
123> **Tip:** Customize 500 and server error pages as well.
124~
125## 7. Useful Tools
126~
127- **next-sitemap**: sitemaps and robots.txt
128- **next-seo**: advanced meta tag management
129- **Google Search Console**: SEO monitoring
130- **Ahrefs Webmaster Tools**: technical analysis
131- **Screaming Frog**: advanced crawling
132- **Mermaid**: for visualizing SEO flows and architectures
133~
134## 8. Monitoring and Analysis
135~
136Integrate Google Analytics, Vercel Analytics, and monitor Core Web Vitals.
137~
138- Use [Google Tag Manager](https://tagmanager.google.com/) for centralized tag management.
139- Monitor access logs and errors with tools like Sentry.
140~
141~
142## Conclusion
143~
144Technical SEO in Next.js requires attention to details like meta tags, performance, internationalization, and structured data. Automate where possible and constantly monitor results!
145~
146> **Final Checklist:**
147>
148> - [x] Dynamic meta tags
149> - [x] Multilingual sitemap
150> - [x] Structured data
151> - [x] Optimized performance
152> - [x] Active monitoring
153~