7단계: SEO 설정과 siteMetadata 커스터마이징

SEO 설정과 siteMetadata 커스터마이징

Pliny는 SEO 최적화를 위해 별도의 설정 없이도 메타 태그가 자동으로 렌더링되며, 전역 설정은 siteMetadata.ts에서 관리합니다.

7-1. siteMetadata란?

/data/siteMetadata.ts 파일에서 다음과 같은 사이트 기본 정보를 관리합니다.

const siteMetadata = {
  title: '포텐 블로그',
  author: 'H.Y',
  headerTitle: 'POTENTIAL',
  description: '콘텐츠 자동화 기반 기술 블로그',
  language: 'ko-KR',
  siteUrl: 'https://www.poten.co.kr',
  email: 'lhythis@naver.com',
  github: 'https://github.com/...',
  linkedin: '',
  locale: 'ko-KR',
}

모든 SEO 컴포넌트, RSS, sitemap에서 자동 참조됨

7-2. SEO 컴포넌트 종류

PageSEO: 정적 페이지용 (About 등)
BlogSEO: 블로그 글 전용

<PageSEO
  title={`About - ${siteMetadata.author}`}
  description={siteMetadata.description}
/>

<BlogSEO
  url={`${siteMetadata.siteUrl}/blog/${slug}`}
  authorDetails={authorDetails}
  title={title}
  summary={summary}
  date={publishedAt}
  images={images}
/>

7-3. 커스터마이징 가능한 필드

필드	설명
`title`	페이지 제목
`description`	SEO 설명 및 OG 설명
`canonicalUrl`	중복 방지용 정규화 주소
`og:image`	OG 및 SNS 공유 시 이미지
`twitter:card`	Twitter 공유 시 카드 유형 설정

7-4. 다국어 및 언어 설정

language, locale → <html lang="ko-KR">에 자동 적용됨
다국어 콘텐츠 분리는 직접 구현 필요 (i18n 구조)

7-5. SEO 메타 태그 확인

브라우저 개발자 도구에서 <head> 태그 확인:

<meta name="description" ... >
<meta property="og:title" ... >
<meta property="og:image" ... >
<meta name="twitter:card" ... >

이 설정은 Google, Facebook, Kakao 등에서 공유 시 미리보기 형성에 영향

요약

SEO 메타 정보는 siteMetadata와 SEO 컴포넌트로 자동 구성됩니다.
블로그 글은 BlogSEO, 정적 페이지는 PageSEO를 통해 메타 태그 생성
타이틀, 설명, 이미지, URL, 언어 설정이 모두 포함됩니다.
sitemap.xml, RSS.xml 생성 시에도 자동 활용됩니다.

심화학습

Q1. SEO를 글마다 커스터마이징할 때 가장 우선순위가 높은 메타 필드는 무엇일까?

A: title, description, og:image가 가장 중요하며, 이 3개가 SNS 공유 시 미리보기에 가장 큰 영향을 미칩니다.

Q2. 카카오톡/페이스북 미리보기 이미지가 안 나올 때 siteMetadata나 BlogSEO에서 어떤 설정을 점검해야 할까?

A: og:image 경로가 절대 URL인지, HTTPS를 사용하는지, 1200x630 사이즈 이상인지 확인해야 합니다.

Q3. SEO 외에도 schema.org 마크업(JSON-LD)을 적용하고 싶다면 어떤 방식으로 SEO 컴포넌트를 확장할 수 있을까?

A: PageSEO나 BlogSEO 내부에서 <script type="application/ld+json">으로 JSON-LD 마크업을 삽입하면 됩니다. 동적 값은 JSON.stringify({...})로 처리합니다.