유리의 개발새발
[Next] 10. SEO 본문
반응형
import Head from "next/head";
export default function HomePage() {
return (
<>
<Head>
<title>이곳은 제목입니다</title>
<meta name="description" content="이 페이지에 방문해보세요~" />
<meta property="og:title" content="나의 웹 서비스" />
<meta property="og:description" content="추천 콘텐츠를 확인해보세요." />
<meta property="og:image" content="/thumbnail.png" />
<meta property="og:type" content="website" />
</Head>
{/* 실제 페이지 내용 */}
<div>...</div>
</>
);
}Search Engine Optimization
검색 엔진 최적화를 위해 각 페이지마다 title, description, OG 태그를 다르게 넣고 싶을 때가 많죠.
✅ 그럴 때 쓰는 게 next/head
Next.js에서는 next/head를 이용해서
JSX 안에서 페이지마다 커스텀 <head> 태그를 삽입할 수 있습니다.
이러면 끝인가? ㄴㄴ
어떤 방식으로 렌더링이 되고있죠?
❌ next/head만으로는 SEO가 완성되지 않는 이유
1. CSR(Client-Side Rendering)이라면?
- Next.js가 CSR 방식으로 실행되면
- HTML에는 아무런 콘텐츠도 없음
- <head>만 있고 <body>는 비어 있음
❗검색 엔진 입장: “어? 내용이 없는데?” → SEO 점수 박살
2. 초기 HTML이 빈 상태 (SPA처럼 작동)
크롤러는 자바스크립트를 제대로 실행 못 하거나,
너무 느리면 타임아웃 걸려서 내용 없는 페이지로 인식함.
3. 구조화 데이터 없음
- robots.txt, sitemap.xml, JSON-LD 같은 메타 정보도 없음
- 크롤러는 "뭘 읽고, 뭘 무시할지" 기준을 잃음
4. 기타 영향 요소들
- 페이지 로딩 속도 (Core Web Vitals)
- 모바일 최적화
- 접근성 (a11y)
이것들도 검색 순위에 직접 영향을 줌
📌 그래서 요약하면?
next/head는 SEO의 시작일 뿐이다.
진짜 SEO를 하려면 렌더링 방식부터 구조화 데이터까지 다 챙겨야 한다.
특히:
- CSR이면 → 본문이 HTML에 없어서 검색엔진이 내용을 못 본다
- fallback 페이지(getStaticPaths + fallback: true)에서도
→ head 메타 태그 반드시 넣어줘야 함
반응형
'Next' 카테고리의 다른 글
| [Next] 12. Page Router (1) | 2025.07.31 |
|---|---|
| [Next] 11. 배포 (2) | 2025.07.31 |
| [Next] 09. ISR (4) | 2025.07.31 |
| [Next] 08. SSG (3) | 2025.07.31 |
| [Next] 07. 사전 렌더링과 데이터 페칭 (SSR방식으로 조금) (3) | 2025.07.30 |
'Next' Related Articles
more
