performance · high priority

SEO for Frontend Developers

Next.js Metadata API, Core Web Vitals, sitemap, JSON-LD

intermediate 난이도5시간토스네이버카카오배민

시작 전

이해도

매우 낮음

학습 개요

탄생 배경

쉬운 설명

복잡한 개념을 실생활 비유로 설명합니다.

“도서관 사서가 책을 올바른 서가에 꽂아주는 작업”

검색 엔진은 도서관 사서다. HTML 시맨틱과 메타 태그는 책 표지와 목차, sitemap은 도서 목록표다. 사서가 책을 빨리 분류할수록 (Core Web Vitals) 더 좋은 자리에 전시된다.

핵심 개념

h1~h6 계층 구조, article/section/nav/main 시맨틱 태그, title/description meta 태그, OG(Open Graph) 태그가 SEO의 기초다.

Next.js App Router — Metadata APItsx

1// app/blog/[slug]/page.tsx
2import type { Metadata } from 'next';
3
4export async function generateMetadata({ params }: Props): Promise<Metadata> {
5  const post = await getPost(params.slug);
6  return {
7    title: post.title,
8    description: post.excerpt,
9    openGraph: {
10      title: post.title,
11      description: post.excerpt,
12      images: [{ url: post.coverImage, width: 1200, height: 630 }],
13      type: 'article',
14      publishedTime: post.publishedAt,
15      authors: [post.author],
16    },
17    alternates: {
18      canonical: `https://example.com/blog/${params.slug}`,
19    },
20  };
21}

중복 title 주의

Next.js 13+에서는 layout.tsx와 page.tsx 모두 title을 설정하면 page가 우선한다. template을 사용해 브랜드 이름을 일관되게 유지하자: title: { template: "%s | MyBrand", default: "MyBrand" }

실무 적용

어떤 상황에서 사용하는가

Next.js 쇼핑몰에서 상품 페이지 SEO를 개선해야 할 때

어떻게 적용하는가

1) generateMetadata로 상품별 동적 메타 생성, 2) Product JSON-LD 스키마 추가, 3) 이미지에 next/image로 LCP 최적화, 4) layout shift 방지를 위해 이미지 width/height 명시

흔한 실수와 안티패턴

모든 페이지에 동일한 title/description 사용 (중복 콘텐츠 페널티)
SPA에서 CSR만 사용해 크롤러가 빈 HTML을 보는 상황
이미지에 alt 속성 누락
canonical URL 미설정으로 중복 URL 문제 발생
모바일 뷰포트 메타 태그 누락

면접 질문

중급토스네이버

답변 방향 힌트

Googlebot의 JS 실행 방식과 렌더링 타이밍 문제

반드시 언급할 키워드

Googlebot은 JS 실행하지만 지연 발생
CSR은 초기 HTML이 비어있음
SSR/SSG로 해결
Next.js App Router 활용

예상 꼬리 질문

Core Web Vitals가 SEO에 어떤 영향을 주나요?
Dynamic Rendering이 무엇인가요?

학습 자료

← Streaming SSR

PRPL Pattern →