Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 제공하여 SEO 최적화에 매우 유용합니다. 오늘은 Next.js를 활용하여 SEO를 최적화하는 다양한 방법을 살펴보겠습니다.

1. 기본적인 SEO 설정

Next.js에서는 페이지의 메타 정보를 손쉽게 설정할 수 있도록 next/head 모듈을 제공합니다. 이 모듈을 사용하여 각 페이지마다 고유한 메타 태그를 정의할 수 있습니다.

import Head from 'next/head';

const MyPage = () => {
    return (
        <>
            <Head>
                <title>내 페이지 제목</title>
                <meta name="description" content="이 페이지에 대한 설명을 입력하세요." />
                <meta name="keywords" content="키워드1, 키워드2" />
                <meta property="og:title" content="OG 제목" />
                <meta property="og:description" content="OG 설명" />
                <meta property="og:image" content="이미지 URL" />
                <meta property="og:url" content="페이지 URL" />
            </Head>
            <h1>내 페이지 내용</h1>
        </>
    );
};

export default MyPage;

위와 같은 방식으로 페이지마다 적절한 메타 태그를 설정하여 검색 엔진의 크롤러가 페이지의 내용을 잘 이해할 수 있도록 도와줄 수 있습니다.

2. 정적 사이트 생성(SSG)

Next.js의 정적 사이트 생성 기능을 활용하면, 빌드 시점에 HTML 파일이 생성되므로 검색 엔진이 페이지를 쉽게 크롤링할 수 있습니다. getStaticProps와 getStaticPaths를 사용하여 동적 라우팅을 적용할 수 있습니다.

import { useRouter } from 'next/router';

export async function getStaticPaths() {
    const res = await fetch('https://api.example.com/posts');
    const posts = await res.json();
    
    const paths = posts.map(post => ({
        params: { id: post.id.toString() }
    }));
    
    return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
    const res = await fetch(https://api.example.com/posts/${params.id});
    const post = await res.json();
    
    return { props: { post } };
}

const Post = ({ post }) => {
    return (
        <>
            <Head>
                <title>{post.title}</title>
                <meta name="description" content={post.description} />
            </Head>
            <h1>{post.title}</h1>
            <p>{post.content}</p>
        </>
    );
};

export default Post;
getStaticPaths를 사용하여 동적 라우트를 위한 경로를 생성하고, getStaticProps를 사용하여 각 페이지에 필요한 데이터를 가져오는 방식입니다. 이를 통해 SEO 최적화에 유리한 정적 페이지를 생성할 수 있습니다.

3. 서버 사이드 렌더링(SSR)

서버 사이드 렌더링을 통해 페이지를 요청할 때마다 서버에서 HTML을 생성하여 반환할 수 있습니다. 이 방식은 사용자 맞춤형 콘텐츠를 제공하기에 유리합니다. getServerSideProps를 사용하여 데이터 fetching을 수행할 수 있습니다.

export async function getServerSideProps(context) {
    const res = await fetch('https://api.example.com/posts');
    const posts = await res.json();
    
    return { props: { posts } };
}

const Posts = ({ posts }) => {
    return (
        <>
            <Head>
                <title>모든 포스트</title>
                <meta name="description" content="모든 포스트 목록을 보세요." />
            </Head>
            <h1>포스트 목록</h1>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>{post.title}</li>
                ))}
            </ul>
        </>
    );
};

export default Posts;

위 코드에서는 getServerSideProps를 사용하여 서버에서 데이터를 가져오고, 이 데이터를 기반으로 페이지를 렌더링합니다. 이 접근 방식은 사용자에게 항상 최신의 데이터를 제공할 수 있어 검색 엔진 최적화에 도움이 됩니다.

4. 이미지 최적화

Next.js는 next/image 모듈을 통해 이미지를 최적화합니다. 자동으로 크기를 조정하고, 포맷을 변경하며, Lazy Loading을 지원합니다. 이를 통해 페이지 로딩 속도를 개선할 수 있어 SEO에 긍정적인 영향을 미칩니다.

import Image from 'next/image';

const MyComponent = () => {
    return (
        <Image 
            src="/path/to/image.jpg" 
            alt="설명" 
            width={500} 
            height={300} 
            priority // 우선 로딩할 이미지
        />
    );
};

export default MyComponent;

5. Sitemap 생성

SEO를 개선하기 위해 사이트맵을 제공하는 것이 좋습니다. Next.js에서는 next-sitemap 패키지를 사용하여 사이트맵을 쉽게 생성할 수 있습니다.

npm install next-sitemap

설정 파일을 생성하여 다음과 같이 설정할 수 있습니다.

// next-sitemap.config.js
module.exports = {
    siteUrl: 'https://yourwebsite.com',
    generateRobotsTxt: true, // (optional)
}

그리고 next-sitemap을 실행하여 사이트맵을 생성합니다.

npx next-sitemap

사이트맵을 제공하면 검색 엔진이 사이트의 구조를 잘 이해하고, 페이지를 더 쉽게 크롤링할 수 있습니다.

마무리

Next.js는 SEO 최적화를 위한 다양한 기능을 제공하여 웹사이트의 검색 엔진 순위를 향상시킬 수 있습니다. 메타 태그 설정, 정적 사이트 생성, 서버 사이드 렌더링, 이미지 최적화, 사이트맵 생성 등 다양한 방법을 활용하여 SEO를 강화해보세요. 이러한 방법들을 통해 사용자에게 더 나은 경험을 제공하고, 검색 엔진에서의 가시성을 높일 수 있습니다.