🐳 Golden Whale
development

Next.js 14 App Router에서 SEO 최적화를 위해 반드시 해야 할 5가지 설정

작성일: 2026-07-22•글쓴이: goldenwhale
Advertisement

Next.js 14 SEO 최적화

구글이나 네이버 같은 검색엔진에서 유기적 트래픽을 얻는 것(SEO)은 대다수의 웹 서비스와 블로그에 있어 생존과 직결된 문제입니다. 리액트(React) 기반의 프레임워크 중 Next.js가 전 세계적인 선택을 받은 결정적인 이유 역시 강력한 서버 사이드 렌더링(SSR)을 통한 탁월한 SEO 지원 때문이었습니다.

하지만 단순히 Next.js를 쓴다고 해서 검색 노출이 저절로 보장되는 것은 아닙니다. 특히 App Router로 완전히 패러다임이 바뀐 Next.js 14 환경에서는 새로운 빌트인 API 구조에 맞게 최적화 설정을 해주어야 합니다.

Next.js 14 기반 웹사이트를 배포할 때 검색 노출을 극대화하기 위해 반드시 완료해야 하는 5가지 핵심 SEO 설정을 정리해 드립니다.

1. Metadata API를 이용한 정적/동적 메타 태그 설정

Next.js 14 App Router에서는 기존의 <Head> 태그를 사용하지 않고, 서버 컴포넌트 파일 내에 metadata 객체나 generateMetadata 함수를 정의하여 손쉽게 메타 데이터를 제어할 수 있습니다.

  • 공통 메타 정보 (app/layout.tsx):
    import { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    default: '골든웨일 블로그',
    template: '%s | 골든웨일 블로그',
  },
  description: '1인 창업, AI 생산성, 영어 공부 및 최신 개발 기술을 다루는 블로그',
  openGraph: {
    title: '골든웨일 블로그',
    description: '1인 창업과 성장을 위한 지식 창고',
    url: 'https://goldenwhale-blog.vercel.app',
    siteName: '골든웨일 블로그',
    locale: 'ko_KR',
    type: 'website',
  },
};
  • 동적 페이지 메타 정보 (app/posts/[slug]/page.tsx):
    데이터베이스나 콘텐츠 파일로부터 제목과 요약을 읽어와 페이지마다 유니크한 메타 정보를 부여합니다.
    export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = await getPostBySlug(params.slug);
  return {
    title: post.title,
    description: post.summary,
  };
}

2. 동적 Open Graph(OG) 이미지 생성 (opengraph-image)

소셜 미디어(카카오톡, 슬랙, X 등)에 링크를 공유할 때 나타나는 풍부한 요약 이미지는 클릭률(CTR)에 지대한 영향을 미칩니다. Next.js 14는 @vercel/og 기반의 ImageResponse API를 사용하여 HTML/CSS로 동적 OG 이미지를 생성할 수 있습니다.

  • 구현 방법:
    app/posts/[slug]/ 디렉토리 하위에 opengraph-image.tsx 파일을 만들어 두면, 해당 포스트 주소의 OG 이미지 호출 시 자동으로 아래 컴포넌트가 렌더링된 이미지를 반환합니다.
    import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export default async function Image({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  
  return new ImageResponse(
    (
      <div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', backgroundColor: '#0f172a', padding: 40, color: 'white' }}>
        <span style={{ fontSize: 24, color: '#38bdf8' }}>골든웨일 포스트</span>
        <h1 style={{ fontSize: 48, marginTop: 40 }}>{post.title}</h1>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

3. sitemap.ts와 robots.ts 자동 생성

검색 엔진 로봇이 웹사이트에 방문해 어떤 경로로 돌아다녀야 하는지 길을 알려주는 지도를 제공해야 합니다.

  • app/sitemap.ts:
    웹사이트 내 모든 URL 목록과 최종 수정일을 동적으로 로드해 XML 사이트맵을 자동 빌드해 줍니다.
    import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();
  const postUrls = posts.map((post) => ({
    url: `https://goldenwhale-blog.vercel.app/posts/${post.slug}`,
    lastModified: new Date(post.date),
  }));

  return [
    { url: 'https://goldenwhale-blog.vercel.app', lastModified: new Date() },
    ...postUrls,
  ];
}
  • app/robots.txt: (검색 크롤러 접근 허용 설정)
    sitemap.ts가 존재하면 Next.js가 /sitemap.xml 경로에 가상 파일을 매핑해 주므로 이를 robots.txt에 링크해 줍니다.
    import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
    },
    sitemap: 'https://goldenwhale-blog.vercel.app/sitemap.xml',
  };
}

4. 구조화된 데이터 (JSON-LD) 적용

구글 검색 결과창에서 내 글 밑에 별점, 날짜, 작가 프로필, FAQ 등이 예쁘게 표현(리치 스니펫)되도록 구조화된 데이터를 제공하는 스키마 마크업을 심어야 합니다.

  • 포스트 상세 페이지 컴포넌트 내에 주입:
    const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'BlogPosting',
  'headline': post.title,
  'image': post.coverImage,
  'datePublished': post.date,
  'author': {
    '@type': 'Person',
    'name': 'GoldenWhale',
  },
};

return (
  <section>
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
    {/* 본문 레이아웃 */}
  </section>
);

5. Next.js 빌트인 최적화 컴포넌트 필수 준수

아무리 메타 데이터를 잘 입력해도 페이지 로딩 속도가 느리면 검색 엔진 랭킹에서 밀리게 됩니다. Next.js가 기본으로 제공하는 최적화 모듈을 반드시 이용하세요.

  • <Link> 컴포넌트 사용:
    일반 <a> 태그는 전체 브라우저 새로고침을 일으키는 반면, <Link> 컴포넌트는 사용자의 뷰포트에 들어오는 링크의 코드를 백그라운드에서 미리 로드(Prefetching)하여 즉각적인 페이지 이동을 구현합니다.
  • <Image> 컴포넌트 사용:
    이미지 크기(Width, Height)를 미리 지정하여 브라우저 렌더링 시 레이아웃 흔들림(CLS)을 제거하고, 자동 WebP 포맷 변환 및 지연 로딩(Lazy Loading)을 강제하여 LCP 속도를 최상으로 끌어올립니다.

✍️ 글을 마치며

최적의 SEO는 기술적인 발판을 완벽히 다져 놓은 뒤, 독자들에게 진짜 도움을 주는 양질의 텍스트 콘텐츠를 채울 때 완성됩니다.

오늘 소개한 Next.js 14의 5가지 기술적 SEO 구성을 프로젝트에 적용하여, 검색 엔진 크롤러들이 여러분의 훌륭한 콘텐츠를 더 자주 수집하고 높게 평가할 수 있도록 조치해 보세요!