Next.js 开发者的技术 SEO: 技巧和工具

spinny:~/writing $ less nextjs-technical-seo.md

1 
2技术 SEO 对于确保您的 Next.js 网站易于索引、快速且在搜索结果中具有竞争力至关重要。本指南涵盖了将您的 SEO 提升到新水平的策略、工具和实用代码片段，特别关注多语言网站。
3 
4## 1. 动态 Meta 标签和 Open Graph
5 
6Next.js 13+ 允许通过 `generateMetadata` 函数集中管理 Meta 标签：
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> **提示：** 请记得为每种语言和页面更新 Meta 标签，利用动态翻译。
28 
29## 2. 自动生成 Sitemap 和 robots.txt
30 
31使用 [next-sitemap](https://www.npmjs.com/package/next-sitemap) 生成 Sitemap 和 robots.txt：
32 
33```bash
34npm install next-sitemap
35```
36 
37配置 `next-sitemap.config.js` 以支持多语言：
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> **额外工具：** 尝试 [next-seo](https://github.com/garmeeh/next-seo) 以实现高级 Meta 标签和结构化数据管理。
71 
72## 3. 国际化 (i18n) 和多语言 SEO
73 
74Next.js 支持本地化路由。请记住：
75 
76- 为每种语言使用 `hreflang` 标签。
77- 生成多语言 Sitemap。
78- 翻译 Meta 标签。
79 
80`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> **最佳实践：** 始终提供可见的语言选择器，并保持 URL 一致性。
88 
89## 4. 性能和核心 Web 指标
90 
91- 使用 Next.js 的 `<Image />` 优化图像。
92- 启用延迟加载。
93- 使用 [Lighthouse](https://developers.google.com/web/tools/lighthouse) 和 [Vercel Analytics](https://vercel.com/analytics) 进行分析。
94- 最小化未使用的 JavaScript 和 CSS。
95- 利用 Vercel 的缓存和 CDN。
96 
97## 5. 结构化数据 (JSON-LD)
98 
99添加结构化数据以提高在丰富摘要中的可见性：
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: 'Next.js 开发者的技术 SEO',
109      datePublished: '2025-07-28',
110      author: { '@type': 'Person', name: 'Filippo Spinella' },
111      inLanguage: 'zh',
112    }),
113  }}
114/>
115```
116 
117> **提示：** 如果适用，还可以为面包屑、文章和产品添加结构化数据。
118 
119## 6. 错误处理和自定义 404 页面
120 
121为每种语言创建一个本地化的 `not-found.tsx` 页面。这将改善用户体验和 SEO。
122 
123> **提示：** 还可以自定义 500 页面和服务器错误页面。
124 
125## 7. 实用工具
126 
127- **next-sitemap**：Sitemap 和 robots.txt
128- **next-seo**：高级 Meta 标签管理
129- **Google Search Console**：SEO 监控
130- **Ahrefs Webmaster Tools**：技术分析
131- **Screaming Frog**：高级爬网工具
132- **Mermaid**：用于可视化 SEO 流程和架构
133 
134## 8. 监控和分析
135 
136集成 Google Analytics、Vercel Analytics 并监控核心 Web 指标。
137 
138- 使用 [Google Tag Manager](https://tagmanager.google.com/) 集中管理标签。
139- 使用 Sentry 等工具监控访问日志和错误。
140 
141 
142## 结论
143 
144Next.js 的技术 SEO 需要关注 Meta 标签、性能、国际化和结构化数据等细节。尽可能自动化并持续监控结果！
145 
146> **最终检查清单：**
147>
148> - [x] 动态 Meta 标签
149> - [x] 多语言 Sitemap
150> - [x] 结构化数据
151> - [x] 优化性能
152> - [x] 主动监控
153

:Next.js 开发者的技术 SEO: 技巧和工具lines 1-153 (END) — press q to close

2技术 SEO 对于确保您的 Next.js 网站易于索引、快速且在搜索结果中具有竞争力至关重要。本指南涵盖了将您的 SEO 提升到新水平的策略、工具和实用代码片段，特别关注多语言网站。

4## 1. 动态 Meta 标签和 Open Graph

6Next.js 13+ 允许通过 `generateMetadata` 函数集中管理 Meta 标签：

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```

27> **提示：** 请记得为每种语言和页面更新 Meta 标签，利用动态翻译。

29## 2. 自动生成 Sitemap 和 robots.txt

31使用 [next-sitemap](https://www.npmjs.com/package/next-sitemap) 生成 Sitemap 和 robots.txt：

33```bash

34npm install next-sitemap

35```

37配置 `next-sitemap.config.js` 以支持多语言：

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```

70> **额外工具：** 尝试 [next-seo](https://github.com/garmeeh/next-seo) 以实现高级 Meta 标签和结构化数据管理。

72## 3. 国际化 (i18n) 和多语言 SEO

74Next.js 支持本地化路由。请记住：

76- 为每种语言使用 `hreflang` 标签。

77- 生成多语言 Sitemap。

78- 翻译 Meta 标签。

80`hreflang` 标签示例：

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```

87> **最佳实践：** 始终提供可见的语言选择器，并保持 URL 一致性。

89## 4. 性能和核心 Web 指标

91- 使用 Next.js 的 `<Image />` 优化图像。

92- 启用延迟加载。

93- 使用 [Lighthouse](https://developers.google.com/web/tools/lighthouse) 和 [Vercel Analytics](https://vercel.com/analytics) 进行分析。

94- 最小化未使用的 JavaScript 和 CSS。

95- 利用 Vercel 的缓存和 CDN。

97## 5. 结构化数据 (JSON-LD)

99添加结构化数据以提高在丰富摘要中的可见性：

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: 'Next.js 开发者的技术 SEO',

109 datePublished: '2025-07-28',

110 author: { '@type': 'Person', name: 'Filippo Spinella' },

111 inLanguage: 'zh',

112 }),

113 }}

114/>

115```

116

117> **提示：** 如果适用，还可以为面包屑、文章和产品添加结构化数据。

118

119## 6. 错误处理和自定义 404 页面

120

121为每种语言创建一个本地化的 `not-found.tsx` 页面。这将改善用户体验和 SEO。

122

123> **提示：** 还可以自定义 500 页面和服务器错误页面。

124

125## 7. 实用工具

126

127- **next-sitemap**：Sitemap 和 robots.txt

128- **next-seo**：高级 Meta 标签管理

129- **Google Search Console**：SEO 监控

130- **Ahrefs Webmaster Tools**：技术分析

131- **Screaming Frog**：高级爬网工具

132- **Mermaid**：用于可视化 SEO 流程和架构

133

134## 8. 监控和分析

135

136集成 Google Analytics、Vercel Analytics 并监控核心 Web 指标。

137

138- 使用 [Google Tag Manager](https://tagmanager.google.com/) 集中管理标签。

139- 使用 Sentry 等工具监控访问日志和错误。

140

141

142## 结论

143

144Next.js 的技术 SEO 需要关注 Meta 标签、性能、国际化和结构化数据等细节。尽可能自动化并持续监控结果！

145

146> **最终检查清单：**

147>

148> - [x] 动态 Meta 标签

149> - [x] 多语言 Sitemap

150> - [x] 结构化数据

151> - [x] 优化性能

152> - [x] 主动监控

153