/
/

Next.js 프로젝트의 SEO 최적화

Nextjs 프로젝트에서 SEO 최적화를 하는 방법
nextjsSEO검색 엔진 최적화
avatar
Xeros
2025.01.15
·
7 min read

어느정도 개인 홈페이지 작업이 완료되었다고 판단 되었고, 이참에 SEO도 공부해보자는 생각에 최적화를 진행해보면서 어떤 방식으로 진행했는지, 공부하며 얻은 정보에 대한 기록을 남겨봅니다.

SEO란 무엇인가?

검색 엔진 최적화 (Search Engine Optimization 줄여서 SEO)입니다.
쉽게 말해서 내가 만든 사이트가 구글, 네이버 등의 검색결과에 상위 노출될 확률을 증가시켜주는 작업이라고 보면 됩니다.

거두절미하고 실질적인 최적화 작업을 진행해봅시다.

1. 메타 데이터 최적화 작업

먼저 메타데이터를 최적화해야합니다. 이는 검색 엔진에서 페이지의 가시성을 높이고, 클릭률(CTR)을 개선하는 데 중요한 역할을 합니다.

App Routing 방식을 사용중일 경우

13버전 이상부터는 app 디렉토리라는 개념이 생겼고 이를 사용할 경우 각 라우트에서 metadata 옵션을 통해 메타데이터를 설정할 수 있습니다. (layout.tsx에서 설정합니다.)

export const metadata = {
  title: '페이지 제목 - 사이트명',
  description: '이 페이지에 대한 간략한 설명',
  keywords: '키워드1, 키워드2, 키워드3',
  openGraph: {
    title: '페이지 제목',
    description: '오픈 그래프 설명',
    url: 'https://example.com/page-url',
    images: [
      {
        url: 'https://example.com/image.png',
        alt: '이미지 설명',
        width: 1200,
        height: 630,
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: '트위터 카드 제목',
    description: '트위터 카드 설명',
    images: ['https://example.com/twitter-image.png'],
  },
};

Pages Routing 방식을 사용중일 경우

만약 pages 디렉토리를 사용하는 경우, next/head를 사용하여 페이지별로 메타데이터를 설정할 수 있습니다. 보통은 Layout.tsx 에 다음 내용을 삽입하여 모든 페이지에서 메타데이터를 설정하는 방식을 사용합니다.

(App 라우팅 방식을 사용하고 있다고 하더라도 같은 방식을 사용하여 메타데이터 설정이 가능합니다.)

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>페이지 제목 - 사이트명</title>
        <meta name="description" content="이 페이지에 대한 간략한 설명" />
        <meta name="keywords" content="키워드1, 키워드2, 키워드3" />
        <meta property="og:title" content="페이지 제목" />
        <meta property="og:description" content="오픈 그래프 설명" />
        <meta property="og:image" content="https://example.com/image.png" />
        <meta property="og:url" content="https://example.com/page-url" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <main>
        <h1>홈 페이지</h1>
      </main>
    </>
  );
}

요약하자면 App Routing 방식을 사용중일 경우 두가지 방식 모두를 사용할 수 있고, Pages Routing 방식을 사용중일 경우 아래 방식을 사용할 수 있습니다.

각 메타데이터 속성에 대해 간략하게 정리 해보자면 다음과 같습니다.

메타데이터 속성

설명

title

페이지의 제목으로, 브라우저 탭에 표시되고 검색 결과에 표시됩니다.

description

검색 엔진 결과에 표시될 페이지 설명입니다.

keywords

검색 엔진 최적화를 위한 키워드입니다. 현재 대부분의 검색 엔진에서는 중요성이 낮지만, 여전히 일부 SEO 도구에서 요구할 수 있습니다.

openGraph

소셜 미디어 공유 시 표시되는 메타데이터입니다.

twitter

트위터 카드 설정을 위한 메타데이터입니다.

자 이제 메타데이터 설정이 끝났습니다.

2. robots.txt 및 sitemap.xml 생성

sitemap.xml과 robots.txt는 검색 엔진 크롤러가 사이트를 탐색하는 데 중요한 역할을 합니다. next-sitemap 패키지를 사용하면 이를 손쉽게 설정하고 이를 자동화 할 수 있습니다.

next-sitemap 패키지 설치

npm install next-sitemap

next-sitemap 설정

프로젝트 루트에 next-sitemap.config.js 파일을 생성하고 다음과 같이 설정합니다.

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://도메인주소.com',
  generateRobotsTxt: true,
  changefreq: 'daily',
  priority: 0.7,
  sitemapSize: 7000,
  exclude: ['/admin/*'],
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/admin']
      }
    ]
  }
}

빌드 자동화 설정

package.json 파일에 sitemap 생성을 자동화하는 스크립트를 추가합니다.

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

여기까지 완료했다면 이제부터 프로젝트 빌드시 자동으로 sitemap.xml 파일을 업데이트하고 초기 robots.txt 파일이 /public/robots.txt 경로에 생성됩니다. 만약 직접 robots.txt 파일을 수정하고 싶다면, 해당 파일을 열어서 수정하시면 됩니다.

검색엔진 사이트 등록

이제 원하는 검색 엔진 서비스 (Google이나 Naver 등)의 검색 엔진 도구를 찾아 해당 서비스에 등록하면 됩니다. 이 과정은 추후 다시 포스팅 하도록 하겠습니다.

- 컬렉션 아티클