Next.js에서 검색엔진 최적화(SEO) 구현하기

inguk·2024년 12월 1일

Next.js에서 검색엔진 최적화(SEO) 구현하기

목차

동적 sitemap 생성

메타데이터 최적화

구조화된 데이터 적용

google search 콘솔 설정

1. 개요

Next.js 프로젝트에서 검색엔진 최적화를 구현하여 구글 검색엔진 노출을 향상시키는 방법을 기록합니다

2. 디렉토리 구조

src/
├── app/
│   ├── [locale]/
│   │   └── (view)/
│   │       └── product/
│   │           └── [id]/
│   │               ├── page.tsx       # 상품 상세 페이지
│   │               └── metadata.ts    # 동적 메타데이터
│   ├── sitemap.ts                     # 동적 사이트맵 생성
│   └── layout.tsx                     # 기본 메타데이터
├── types/
│   └── product.ts                     # 타입 정의
└── public/
    └── robots.txt

3. 패키지 설치 및 설정

next.js 13버전 이상부터는 기존의 next-sitemap 등의 추가 라이브러리 설치 없이 내장되어있습니다.

4. 구현 내용

동적 사이트맵 생성

//app/sitemap.ts

import { MetadataRoute } from 'next';
import { IMainProduct, PaginatedProductResponse } from '@/types/product';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const productsResponse = await fetch(
    'https://{도메인명}/api',
    { next: { revalidate: 3600 } }
  ).then(res => res.json()) as PaginatedProductResponse;

  const baseUrl = '도메인명';

  const staticPages = ['', '/ja', '/ko', '/products'].map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date(),
    changeFrequency: 'daily' as const,
    priority: 1,
  }));

  const productPages = productsResponse.products.map((product: IMainProduct) => ({
    url: `${baseUrl}/ja/product/${product.id}`,
    lastModified: new Date(product.createdAt),
    changeFrequency: 'daily' as const,
    priority: 0.8,
  }));

  return [...staticPages, ...productPages];
}

///root layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | MyBrand',
    default: 'MyBrand - Fashion E-commerce',
  },
  description: 'Discover trending fashion items from your favorite celebrities. Shop official merchandise and celebrity-worn items.',
  keywords: [
    'Fashion Store',
    'Celebrity Fashion',
    'Korean Fashion',
    'Brand Clothes',
    'Fashion E-commerce',
    'Style Guide',
    'Trending Fashion',
    'Celebrity Style',
    'Fashion Trends',
    'Online Shopping',
    'Designer Clothes',
    'Fashion Brand',
    'Style Tips',
    'Fashion Collection',
    'Seasonal Fashion',
  ],
  openGraph: {
    title: 'MyBrand - Fashion E-commerce',
    description: 'Discover trending fashion items from your favorite celebrities.',
    url: 'https://example.com',
    siteName: 'MyBrand',
    locale: 'en_US',
    type: 'website',
    images: [
      {
        url: 'https://example.com/images/logo.png',
        width: 1200,
        height: 630,
        alt: 'MyBrand - Fashion E-commerce',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'MyBrand - Fashion E-commerce',
    description: 'Discover trending fashion items from your favorite celebrities.',
    images: ['https://example.com/images/logo.png'],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  verification: {
    google: 'google-site-verification-code',
  },
};

//robot.txt
User-agent: *
Allow: /
Allow: /ja/
Allow: /ko/
Allow: /ja/product/
Allow: /ko/product/

Disallow: /api/
Disallow: /admin/

Sitemap: https://mogotsu.com/sitemap.xml

Crawl-delay: 1

기존 div태그 최상위에 Schema.org 마크업 입력

<>
	<main>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              '@context': 'https://schema.org',
              '@type': 'Organization',
              name: 'MyBrand',
              alternateName: 'MyBrandShop',
              url: 'https://example.com',
              logo: 'https://example.com/images/logo.png',
              sameAs: [
                'https://instagram.com/mybrand',
                'https://twitter.com/mybrand',
              ],
            }),
          }}
        />
</main>
</>