Next.js SEO 최적화

MinJae·2025년 2월 24일

nextjs

목록 보기

1/12

검색 엔진 최적화(SEO)는 웹사이트의 가시성을 높이고 검색 결과에서 더 나은 순위를 얻기 위한 중요한 과정입니다. Next.js는 SEO에 친화적인 기능들을 제공하여 개발자들이 쉽게 최적화를 할 수 있도록 돕습니다. 이 글에서는 Next.js를 사용하여 SEO를 최적화하는 주요 방법들을 살펴보겠습니다.

1. 메타데이터 설정

Next.js 14에서는 metadata 객체를 통해 각 페이지의 메타데이터를 쉽게 설정할 수 있습니다.

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: '페이지 제목',
  description: '페이지 설명',
  keywords: ['키워드1', '키워드2'], // 검색 키워드
  openGraph: {
    title: 'OG 제목',
    description: 'OG 설명',
    images: [{
      url: '/image.jpg',
      width: 1200,
      height: 630,
      alt: '이미지 설명'
    }]
  }
};

메타데이터는 다음과 같은 중요한 SEO 요소들을 포함할 수 있습니다.

기본 메타데이터: title, description, keywords

Open Graph 메타데이터: 소셜 미디어 공유용

Twitter 카드

2. 시맨틱 HTML 마크업

시맨틱 HTML 태그를 사용하면 웹페이지의 구조와 의미를 검색 엔진이 더 잘 이해할 수 있습니다. Next.js에서는 일반적인 HTML5 시맨틱 태그를 모두 사용할 수 있습니다. 예를 들어

<header>
  <nav>
    {/* 네비게이션 내용 */}
  </nav>
</header>
<main>
  <article>
    <h1>메인 제목</h1>
    <p>본문 내용...</p>
  </article>
</main>
<footer>
  {/* 푸터 내용 */}
</footer>

3. 이미지 최적화

Next.js의 Image 컴포넌트를 사용하면 자동으로 이미지를 최적화할 수 있습니다. 이는 페이지 로딩 속도를 개선하고 사용자 경험을 향상시켜 간접적으로 SEO에 도움을 줍니다.

import Image from 'next/image'

<Image
  src="/images/profile.jpg"
  alt="프로필 이미지"
  width={500}
  height={500}
/>

이미지 컴포넌트뿐만 아니라 폰트 최적화를 위해 next/font 사용, 적절한 캐싱 전략 구현, 코드 분할과 지연 로딩 활용을 종합적으로 적용하면 검색 엔진에서 더 높은 순위를 얻을 수 있습니다.

4. Sitemap 설정하기

사이트맵은 웹사이트의 구조를 검색 엔진에 알려주는 중요한 파일입니다. Next.js에서는 정적 또는 동적으로 사이트맵을 생성할 수 있습니다.

정적 사이트맵을 생성하려면 app 디렉토리의 루트에 sitemap.xml 파일을 생성하면 됩니다. 동적 사이트맵을 생성하려면 app 디렉토리에 sitemap.ts 또는 sitemap.js 파일을 만들고 다음과 같이 작성할 수 있습니다.

import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://www.example.com',
      lastModified: new Date(),
    },
    {
      url: 'https://www.example.com/about',
      lastModified: new Date(),
    },
    // 추가 URL들...
  ]
}

5. robots.txt 설정하기

robots.txt 파일은 검색 엔진 크롤러에게 어떤 페이지를 크롤링해야 하는지 알려줍니다. Next.js에서는 정적 파일이나 동적 생성을 통해 robots.txt를 설정할 수 있습니다.

정적 robots.txt 파일을 사용하려면 app 디렉토리의 루트에 파일을 생성하면 됩니다. 동적으로 생성하려면 app 디렉토리에 robots.ts 또는 robots.js 파일을 만들고 다음과 같이 작성할 수 있습니다.

import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/private/',
    },
    sitemap: 'https://www.example.com/sitemap.xml',
  }
}