Next.js SEO 최적화를 해보자

SEO? (검색엔진 최적화)

- 검색엔진 최적화는 웹 사이트가 검색엔진 최상위에 노출되도록 최적화 하는것을 말한다. 

- 이를 통해 많은 트래픽을 얻을 수 있다. 

 

Next.js에서 SEO 최적화 

- SSR로 최적화

- MetaTag 적절한 사용

- robotos.txt를 사용 

- sitemap 사용

 

위 4가지를 사용해서 최적화를 해보자 

 

SSR

-  서버 사이드 렌더링은 서버에서 완성된 HTML을 보내는 방식이다. 

- 이를 통해 검색엔진이 JS 실행 없이도 본문을 읽게 해준다. 

- Next.js를 사용한다면 기본 컴포넌트를 서버 컴포넌트로 설정을 하기 때문에 별다른 설정이 없다면, 서버 컴포넌트로 인식한다. 

 

MetaTag

- 매타태그를 잘 설정하는것도 SEO에 꽤 유리하다. 

 

• <title>: 페이지마다 고유하게. 40–60자 권장, 브랜드는 뒤에.
• <meta name="description">: 120–160자 요약(클릭 유도 문장).
• <link rel="canonical">: 동일/유사 페이지 하나로 표준화.
• <meta name="robots">: 색인/링크 추적 제어(index,follow 기본).

 

위 4자리를 필수로 해보자!! 

 

Robots.ts

- app 라우터에 robots.ts를 만들면 서버에서 동적으로 robots.txt를 관리해준다.

- 나의 경우 PWA를 사용하니 manifest.json은 disallow을 사용하면 검색엔진 노출이 되지 않도록 만들수 있다. 

robots.txt? 

- robots.txt는 웹사이트 롤러(검색 엔진 로봇)**에게 “이 웹사이트의 어느 경로를 크롤링(수집)해도 되고, 어디는 하면 안 된다”라는 지침을 주는 텍스트 파일이다. 

 

Sitemap

- 웹사이트의 지도를 담은 파일이다.

- 검색엔진(구글, 네이버, 빙 등)에게 “우리 사이트에 이런 페이지들이 있고, 언제 업데이트되었고, 우선순위는 이 정도야” 라고 알려주는 역할이다. 

- Next.js에서는 sitemap.ts를 만들수가 있다. 

import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://acme.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://acme.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://acme.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ]
}

- url : 반드시 절대 경로여야 하고, 검색엔진에게 이 페이지가 있다는 것을 알려준다. 

- lastModified: 페이지가 마지막으로  수정된 날짜를 알려준다. -> 검색엔진에게 최근 페이지가 업데이트가 되었다고 알려줄 수 있다. 

- changeFrequency : 페이지가 얼마나 자구 업데이트 되는지 알려줄수 있다. 

-  priority : 해당 페이지의 중요도를 알려준다. 

 

정리

• SSR: 서버에서 HTML 생성 → 색인성 강화
• Meta Tag: 제목/설명/표준주소/로봇제어 → 페이지별 메타 최적화
• robots.txt: 크롤링 허용·차단 경로 관리 → 불필요한 페이지 색인 방지
• Sitemap: 사이트 구조 안내 → 검색엔진이 빠르고 정확히 색인

👉 이 4가지를 잘 활용하면 Next.js 프로젝트에서도 SEO 최적화를 체계적으로 할 수 있음.