시작하기
SEO(Search Engine Optimization)란?
웹사이트가 검색 엔진 결과에서 더 잘 보이도록 최적화하는 과정이다.SEO를 적용할 수 있는 사례
1. 블로그 포스트 최적화
2. 이커머스 제품 페이지 최적화
3. 로컬 비즈니스 웹사이트 최적화
4. 뉴스 기사 최적화
SEO의 중요성
1. 유기적 트레픽 증가
검색 결과 상위에 노출되면 더 많은 방문자를 유치할 수 있다.
2. 신뢰도 향상
검색 결과 상위에 있는 웹사이트는 더 신뢰성이 있다고 인식 된다.
3. 비용 효율성
유료 광고에 비해 장기적으로 더 비용 효율적이다.
4. 사용자 경험 개선
SEO 최적화는 종종 웹사이트의 사용성도 함께 개선된다.
React에서 SEO 적용하기
react-helmet은 문서의 head 섹션을 동적으로 관리할 수 있게 해주는 라이브러리다.
import React from 'react'
import { Helmet, HelmetProvider } from 'react-helmet'
import { useLocation } from 'react-router-dom'
const SEO = ({title, description, image}) => {
const { pathname } = useLocation()
const url = `https://examplesite.com${path}`
return (
<HelmetProvider>
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
<meta name="image" content={image} />
{/* Open Graph /Facebook/*/}
<meta property="og:type" content="website" />
<meta property="og:url" content={url}/>
<meta property="og:title" content={title}/>
<meta property="og:description" content={description}/>
<meta property="og:image" content={image}/>
{/* Twitter */}
<meta property="twitter:card" content="summary_large_image" />
<meta property="og:url" content={url}/>
<meta property="og:title" content={title}/>
<meta property="og:description" content={description}/>
<meta property="og:image" content={image}/>
</Helmet>
</HelmetProvider>
)
}
export default SEOprops로 데이터를 받아 메타 태그를 생성한다.
이를 통해 각 페이지마다 고유한 SEO 정보를 설정할 수 있다.
react-router-sitemap을 사용하여 동적으로 사이트맵을 생성할 수 있다.
Next.js에서 동적 메타데이터를 사용한 SEO
Next.js는 SEO에 유리한 여러 기능을 제공한다.
1. 자동 정적 최적화
정적으로 생성할 수 있는 페이지를 자동으로 최적화한다.
2. 서버 사이드 렌더링
동적 콘텐츠에 대해 서버 사이드 렌더링을 제공하여 초기 로드 시 모든 콘텐츠가 HTML에 포함되게 한다.
3. 동적 메타데이터
getServerSideProps또는 getStaticProps를 사용하여 동적으로 메타데이터를 생성할 수 있다.
import Head from 'next/head'
export const getServerSideProps = async (context) => {
const res = await fetch(`https://example.com/ex/${context.id}`)
const product = await res.json()
return {
props: { product }
}
}
const ProductPage = ({ product }) => {
return (
<>
<Head>
<title>{product.name}</title>
<meta name="description" content={product.description} />
<meta name="og:title" content={product.name} />
<meta name="og:description" content={product.description} />
<meta name="og:image" content={product.image} />
</Head>
</>
)
}
export default ProductPagegetServerSideProps를 사용하여 서버 측에서 제품 데이터를 가져오고, 동적 메타데이터를 생성한다.
cononical태그를 추가하여 중복 콘텐츠 문제를 방지한다.
App Router에서의 메타데이터 설정
App Router에서는 메타데이터 처리 방식이 다르다.
더 선언적이고 컴포넌트 기반의 접근 방식이다.
const getProduct = ({ id }) => {
const res = await fetch(`https://api.example.com/products/${id}`)
return res.json()
}
export const generateMetadata = ({ params }) => {
const product = await getProduct(params.id)
return {
title: `${product.name}`,
description: product.description,
openGraph: {
title: product.name,
description: product.description,
images: [{ url: product.image }],
type: 'product'
},
alternates: {
canonical: `https://yourstore.com/products/${product.id}`,
},
}
}
const ProductPage = ({ params }) => {
const product = await getProduct(params.id)
return (
<main>
<p>{product.name}</p>
</main>
)
}generateMetadata함수는 동적으로 메타데이터를 생성하고 params를 통해 동적 라우트 파라미터에 접근할 수 있다.
또 비동기 함수로, 데이터 페칭을 직접 수행 가능하다.
Metadata
Next.js에서 제공하는 타입으로, 메타데이터 구조를 정의한다.
SEO 관련필드로는
title,description은 기본 메타데이터이고,
openGraph는 소셜 미디어 공유를 위한 Open Graph 메타데이터이고,
alternates.canonical은 표준 URL지정(중복 콘텐츠 방지) 이다.
getProduct 함수를 사용하여 서버 사이드에서 제품데이터를 가져오고 이 데이터는 메타데이터 생성과 페이지 렌더링 모두에 사용된다.
비동기 컴포넌트로 정의되어있어, 직접 데이터 페칭이 가능하다.
App Router에서는 Head 컴포넌트를 사용하지 않고, 대신 generateMetadata함수나 메타데이터 객체를 사용하여 SEO 관련 정보를 제공한다.
더 선언적이고 서버 컴포넌트와 잘 통합된다.
또, App Router는 자동으로 정적 생성(Static Site Generation, SSG)과 서버 사이드 렌더링(Server-Side Rendering, SSR)을 처리한다,
generateMetadata함수는 빌드 시 실행되어 정적 메타데이터를 생성하거나, 요청 시 실행되어 동적 메타데이터를 생성할 수 있다.
