검색 엔진 최적화 (SEO)
아무리 훌륭한 서비스도 검색되지 않으면 존재하지 않는 것과 같습니다. Next.js 프로젝트에서 반드시 챙겨야 할 SEO 체크리스트 10가지를 정리했습니다.
1. 시맨틱 태그 (Semantic HTML) 활용
div 만 남발하지 마세요. 구글 봇은 태그의 의미를 분석합니다.
- 헤더는 <header>, 푸터는 <footer>
- 네비게이션은 <nav>
- 메인 콘텐츠는 <main>
- 독립된 글은 <article>, 구역은 <section>
이렇게 구조화해야 검색엔진이 문서의 구조를 정확히 파악합니다.
2. 메타데이터 (Metadata) API 설정
Next.js 13+ App Router에서는 layout.js나 page.js에서 메타데이터를 정적으로 내보냅니다.title, description은 필수입니다. 페이지마다 고유한 설명을 적으세요.
3. Open Graph (SNS 공유 최적화)
카카오톡, 슬랙 등에 링크를 보낼 때 나오는 미리보기 카드입니다.og:title, og:description, og:image를 설정하세요.
특히 이미지는 1200x630px 크기의 png/jpg를 public 폴더에 두고 연결하세요.
4. 이미지 최적화 (next/image)
<img> 태그 대신 Next.js의 <Image /> 컴포넌트를 사용하세요.
- 자동으로 WebP 형식 변환 (용량 감소)
- Lazy Loading (속도 향상)
- Layout Shift 방지 (CLS 점수 개선)
그리고 alt 속성은 시각 장애인과 검색엔진을 위해 필수입니다.
5. 적절한 헤딩 (H1~H6) 구조
페이지 당 H1 태그는 단 하나여야 합니다. (보통 페이지 타이틀)
그 아래로 H2, H3가 계층 구조를 이뤄야 합니다. 폰트 크기 때문에 H2 대신 H4를 쓰는 등 순서를 건너뛰지 마세요.
6. sitemap.xml 생성
src/app/sitemap.js 파일을 만들면 Next.js가 자동으로 xml을 생성해줍니다.
구글 서치 콘솔에 이 맵을 제출해야 크롤링 봇이 내 사이트 구석구석을 방문합니다.
7. robots.txt 설정
검색 로봇에게 "여기 여기는 들어와도 돼"라고 허락해주는 문지기입니다.src/app/robots.js로 생성 가능하며, sitemap.xml의 위치를 명시해주는 것이 좋습니다.
8. Canonical URL (대표 주소)
www.site.com과 site.com이 같은 내용을 보여준다면 검색엔진은 중복 콘텐츠로 간주해 점수를 깎습니다.
Canonical URL을 설정하여 "이게 원본 주소야"라고 알려주세요. (metadataBase 설정으로 해결 가능)
9. JSON-LD (구조화된 데이터)
검색 결과에 별점, 리뷰, 상품 가격 등이 나오게 하려면 JSON-LD 형식의 데이터를 심어야 합니다.
구글에게 "이 페이지는 제품 페이지고, 가격은 얼마야"라고 직접적인 데이터를 떠먹여주는 것입니다.
10. 성능 최적화 (Core Web Vitals)
구글은 사이트 속도를 랭킹 요소로 봅니다.
- LCP (가장 큰 콘텐츠가 뜨는 시간)
- CLS (화면이 덜컥거리는 정도)
불필요한 JS를 줄이고 폰트와 이미지를 최적화하여 쾌적한 경험을 제공하세요.
🎯 SEO의 본질
위의 기술적인 체크리스트를 모두 완료했다고 해서 검색 1위가 되는 것은 아닙니다.
SEO 최적화는 기술적으로도 중요하지만, 최종적으로 포털(구글, 네이버)이 이 사이트를 '신뢰'하는 것이 핵심입니다.
검색엔진은 사용자가 오래 머무르고, 다시 방문하며, 공유하는 사이트를 높게 평가합니다. 따라서 사용자를 사로잡는 양질의 콘텐츠로 승부하세요. 기술은 그 콘텐츠를 잘 전달하기 위한 토대일 뿐입니다.