[ Next.js ] SEO 최적화: 봇과 사용자 구분하기

Next.js 14 App router

사이트를 검색했을 때 노출 결과를 사이트의 특성에 맞게 자세하게 노출되게 하고, 사이트의 브라우저 탭에는 간결하게 사이트 이름을 보여주고 싶었다. 방법은 사이트 방문자가 일반 사용자인지 크롤러 봇인지 구분해서 metadata를 주면 된다.

import { headers } from 'next/headers';
import { userAgent } from 'next/server';

export async function generateMetadata({}) {
  const { isBot } = userAgent({ headers: headers() });
  const title = isBot ? 'KEYNUT - 커스텀 키보드등 다양한 전자기기 중고거래는 키넛' : 'KEYNUT | 키넛';

  return {
    title,
    ...
  };
}

next.js에서 제공하는 headers, userAgent를 사용하면 쉽게 구현할 수 있다.

headers - Web Headers API를 기반으로 하여, 추가적인 기능이나 확장을 제공하는 API

userAgent - Web Request API를 확장하여 요청에서 전달된 User-Agent 객체와 상호작용할 수 있는 추가적인 속성과 메서드를 제공하는 Next.js의 유틸리티 함수

 

그리고 isBot을 통해 크롤러 봇인지 아닌지 확인을 한 후 크롤러 봇에게는 상세한 title을 주고 사용자에겐 간단한 title을 준다

이러한 방식으로 크롤러 봇에게는 SEO에 최적화된 메타데이터를 제공하고, 실제로 사용자가 사이트를 방문할 때는 더 간결한 정보를 보여줄 수 있다.

결과:

• 크롤러 봇은 검색 결과에 상세한 타이틀을 노출시켜 사이트의 특성을 정확하게 반영.
• 일반 사용자는 사이트를 방문했을 때 브라우저 탭에 간단한 타이틀만을 보게 된다.