Next.js 개발자를 위한 기술적 SEO: 팁과 도구

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

1~
2기술적 SEO는 Next.js 사이트가 쉽게 인덱싱되고, 빠르며, 검색 결과에서 경쟁력을 갖추도록 하는 데 필수적입니다. 이 가이드는 SEO를 한 단계 끌어올리기 위한 전략, 도구, 실용적인 코드 스니펫을 다루며, 특히 다국어 사이트에 초점을 맞춥니다.
3~
4## 1. 동적 Meta Tags와 Open Graph
5~
6Next.js 13+에서는 `generateMetadata` 함수를 사용하여 중앙 집중식 meta tag 관리가 가능합니다:
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 tags를 업데이트하는 것을 잊지 마세요.
28~
29## 2. 자동 Sitemap과 robots.txt
30~
31Sitemaps와 robots.txt를 생성하려면 [next-sitemap](https://www.npmjs.com/package/next-sitemap)을 사용하세요:
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> **추가 도구:** 고급 meta tag 및 구조화된 데이터 관리를 위해 [next-seo](https://github.com/garmeeh/next-seo)를 시도해 보세요.
71~
72## 3. 국제화 (i18n)와 다국어 SEO
73~
74Next.js는 지역화된 라우트를 지원합니다. 다음을 기억하세요:
75~
76- 각 언어에 대해 `hreflang` 태그를 사용하세요.
77- 다국어 sitemaps를 생성하세요.
78- Meta tags를 번역하세요.
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. 성능과 Core Web Vitals
90~
91- 최적화된 이미지를 위해 Next.js `<Image />`를 사용하세요.
92- Lazy loading을 활성화하세요.
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: '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> **팁:** 해당되는 경우 브레드크럼, 기사, 제품에 대한 구조화된 데이터도 포함하세요.
118~
119## 6. 오류 처리와 커스텀 404 페이지
120~
121각 언어에 대해 지역화된 `not-found.tsx` 페이지를 만드세요. 이는 사용자 경험과 SEO를 향상시킵니다.
122~
123> **팁:** 500 및 서버 오류 페이지도 커스터마이즈하세요.
124~
125## 7. 유용한 도구
126~
127- **next-sitemap**: sitemaps와 robots.txt
128- **next-seo**: 고급 meta tag 관리
129- **Google Search Console**: SEO 모니터링
130- **Ahrefs Webmaster Tools**: 기술적 분석
131- **Screaming Frog**: 고급 크롤링
132- **Mermaid**: SEO 흐름과 아키텍처 시각화
133~
134## 8. 모니터링과 분석
135~
136Google Analytics, Vercel Analytics를 통합하고 Core Web Vitals를 모니터링하세요.
137~
138- 중앙 집중식 태그 관리를 위해 [Google Tag Manager](https://tagmanager.google.com/)를 사용하세요.
139- Sentry와 같은 도구로 접근 로그와 오류를 모니터링하세요.
140~
141~
142## 결론
143~
144Next.js에서의 기술적 SEO는 meta tags, 성능, 국제화, 구조화된 데이터와 같은 세부 사항에 주의를 기울여야 합니다. 가능한 곳에서 자동화하고 지속적으로 결과를 모니터링하세요!
145~
146> **최종 체크리스트:**
147>
148> - [x] 동적 meta tags
149> - [x] 다국어 sitemap
150> - [x] 구조화된 데이터
151> - [x] 최적화된 성능
152> - [x] 활성 모니터링
153~

NORMAL · nextjs-technical-seo.md [readonly]153 lines · :q to close

2기술적 SEO는 Next.js 사이트가 쉽게 인덱싱되고, 빠르며, 검색 결과에서 경쟁력을 갖추도록 하는 데 필수적입니다. 이 가이드는 SEO를 한 단계 끌어올리기 위한 전략, 도구, 실용적인 코드 스니펫을 다루며, 특히 다국어 사이트에 초점을 맞춥니다.

4## 1. 동적 Meta Tags와 Open Graph

6Next.js 13+에서는 `generateMetadata` 함수를 사용하여 중앙 집중식 meta tag 관리가 가능합니다:

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 tags를 업데이트하는 것을 잊지 마세요.

28~

29## 2. 자동 Sitemap과 robots.txt

30~

31Sitemaps와 robots.txt를 생성하려면 [next-sitemap](https://www.npmjs.com/package/next-sitemap)을 사용하세요:

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> **추가 도구:** 고급 meta tag 및 구조화된 데이터 관리를 위해 [next-seo](https://github.com/garmeeh/next-seo)를 시도해 보세요.

71~

72## 3. 국제화 (i18n)와 다국어 SEO

73~

74Next.js는 지역화된 라우트를 지원합니다. 다음을 기억하세요:

75~

76- 각 언어에 대해 `hreflang` 태그를 사용하세요.

77- 다국어 sitemaps를 생성하세요.

78- Meta tags를 번역하세요.

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. 성능과 Core Web Vitals

90~

91- 최적화된 이미지를 위해 Next.js `<Image />`를 사용하세요.

92- Lazy loading을 활성화하세요.

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: '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> **팁:** 해당되는 경우 브레드크럼, 기사, 제품에 대한 구조화된 데이터도 포함하세요.

118~

119## 6. 오류 처리와 커스텀 404 페이지

120~

121각 언어에 대해 지역화된 `not-found.tsx` 페이지를 만드세요. 이는 사용자 경험과 SEO를 향상시킵니다.

122~

123> **팁:** 500 및 서버 오류 페이지도 커스터마이즈하세요.

124~

125## 7. 유용한 도구

126~

127- **next-sitemap**: sitemaps와 robots.txt

128- **next-seo**: 고급 meta tag 관리

129- **Google Search Console**: SEO 모니터링

130- **Ahrefs Webmaster Tools**: 기술적 분석

131- **Screaming Frog**: 고급 크롤링

132- **Mermaid**: SEO 흐름과 아키텍처 시각화

133~

134## 8. 모니터링과 분석

135~

136Google Analytics, Vercel Analytics를 통합하고 Core Web Vitals를 모니터링하세요.

137~

138- 중앙 집중식 태그 관리를 위해 [Google Tag Manager](https://tagmanager.google.com/)를 사용하세요.

139- Sentry와 같은 도구로 접근 로그와 오류를 모니터링하세요.

140~

141~

142## 결론

143~

144Next.js에서의 기술적 SEO는 meta tags, 성능, 국제화, 구조화된 데이터와 같은 세부 사항에 주의를 기울여야 합니다. 가능한 곳에서 자동화하고 지속적으로 결과를 모니터링하세요!

145~

146> **최종 체크리스트:**

147>

148> - [x] 동적 meta tags

149> - [x] 다국어 sitemap

150> - [x] 구조화된 데이터

151> - [x] 최적화된 성능

152> - [x] 활성 모니터링

153~