티스토리 뷰

project/NestJS + Prisma로 만드는 웹 애플리케이션 첫걸음 - 쇼핑몰

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js에서 SEO 최적화 적용

octo54 2025. 3. 14. 11:39

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js에서 SEO 최적화 적용

1. SEO(Search Engine Optimization)란?

SEO(검색 엔진 최적화)는 웹사이트가 검색 엔진에서 더 높은 순위에 노출되도록 최적화하는 과정입니다.
쇼핑몰 프로젝트에서는 상품 페이지, 블로그, 주요 카테고리 페이지가 검색 엔진에서 잘 노출되도록 SEO 전략을 적용해야 합니다.

✅ SEO 최적화를 하면:

검색 엔진에서 웹사이트 노출 증가
사용자 트래픽 유입 확대 → 매출 증가
사이트 속도 및 사용자 경험 개선

💡 이 챕터에서는 Next.js에서 적용할 수 있는 SEO 최적화 기법을 다룹니다.

2. Next.js에서 SEO 적용 방법

2.1. SEO 최적화를 위한 핵심 요소

SEO 요소 설명 Next.js 적용 방법

메타 태그	검색 엔진이 페이지 내용을 쉽게 이해하도록 설명 제공	<head> 태그에서 설정
OG(Open Graph) 태그	SNS 공유 시 미리보기 정보 제공	<meta property="og:title">
키워드 최적화	검색 엔진에서 검색될 가능성이 높은 키워드 포함	적절한 제목 및 설명 작성
사이트 속도 최적화	페이지 로딩 속도를 최적화하여 SEO 점수 향상	이미지 최적화, Lazy Loading 적용
정적 페이지(SSG) 활용	검색 엔진이 크롤링하기 쉽도록 정적인 HTML 페이지 제공	getStaticProps() 활용

3. Next.js에서 메타 태그 설정하기

3.1. 기본적인 메타 태그 설정

Next.js에서는 next/head 컴포넌트를 사용하여 페이지별 메타 정보를 설정할 수 있습니다.

💡 홈페이지(pages/index.tsx)에 메타 태그 적용 예제

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>최고의 쇼핑몰 - 최신 트렌드 상품</title>
        <meta name="description" content="최신 트렌드 상품을 쇼핑할 수 있는 최고의 온라인 쇼핑몰입니다." />
        <meta name="keywords" content="쇼핑몰, 최신상품, 전자제품, 패션, 할인" />
        <meta name="author" content="쇼핑몰 팀" />
      </Head>
      <h1>환영합니다! 최고의 쇼핑몰입니다.</h1>
    </>
  );
}

✅ 이제 검색 엔진이 이 페이지를 쉽게 인덱싱할 수 있습니다.

3.2. Open Graph(OG) & Twitter 메타 태그 설정

SNS에서 공유될 때 올바른 제목과 이미지가 표시되도록 Open Graph 태그를 추가해야 합니다.

💡 상품 상세 페이지(pages/products/[id].tsx)에 OG 태그 적용 예제

import Head from 'next/head';

export default function ProductPage({ product }) {
  return (
    <>
        
        
        
        
        https://mystore.com/products/${product.id}`} />

{product.name}

    
  );
}

✅ 이제 상품이 공유될 때 자동으로 썸네일과 설명이 표시됩니다.

4. 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR) 활용

4.1. 정적 사이트 생성(SSG) 적용

검색 엔진은 정적인 HTML을 쉽게 크롤링할 수 있기 때문에, 가능한 한 getStaticProps()를 활용하여 정적 사이트 생성을 적용하는 것이 좋습니다.

💡 상품 목록 페이지에서 SSG 적용 예제 (pages/products.tsx)

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return { props: { products } };
}

export default function ProductsPage({ products }) {
  return (

{products.map((product) => (

{product.name}

))}

  );
}

✅ 이제 빌드 시 상품 목록이 미리 생성되며, SEO에 유리한 구조가 됩니다.

4.2. 서버 사이드 렌더링(SSR) 적용

사용자별 맞춤 데이터를 표시해야 하는 경우 getServerSideProps()를 사용할 수 있습니다.

💡 로그인한 사용자에게 추천 상품을 보여주는 예제 (pages/recommendations.tsx)

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/recommendations?userId=${context.req.user.id}`);
  const recommendations = await res.json();

  return { props: { recommendations } };
}

export default function RecommendationsPage({ recommendations }) {
  return (

추천 상품

{recommendations.map((product) => (

{product.name}

))}

  );
}

✅ 이제 사용자의 정보에 따라 실시간으로 최적화된 페이지를 제공할 수 있습니다.

5. 이미지 최적화 및 로딩 속도 개선

5.1. Next.js next/image 사용

Next.js의 next/image 컴포넌트를 활용하면 자동으로 이미지 최적화 및 Lazy Loading이 적용됩니다.

💡 상품 이미지 최적화 예제 (components/ProductCard.tsx)

import Image from 'next/image';

export default function ProductCard({ product }) {
  return (
    <div>
      <Image src={product.imageUrl} alt={product.name} width={300} height={300} />
      <h2>{product.name}</h2>
    </div>
  );
}

✅ 이제 이미지는 자동으로 최적화되며, 사용자가 스크롤할 때만 로드됩니다.

6. 사이트맵(Sitemap) 및 robots.txt 설정

6.1. 사이트맵 생성 (next-sitemap 활용)

검색 엔진이 웹사이트의 모든 페이지를 쉽게 찾을 수 있도록 사이트맵을 추가해야 합니다.

npm install next-sitemap

💡 next-sitemap.js 설정 파일 생성

module.exports = {
  siteUrl: 'https://mystore.com',
  generateRobotsTxt: true,
};

npx next-sitemap

✅ 이제 sitemap.xml이 자동으로 생성됩니다.

6.2. robots.txt 설정

robots.txt 파일을 추가하여 검색 엔진이 크롤링할 페이지를 지정할 수 있습니다.

💡 public/robots.txt 추가

User-agent: *
Disallow: /admin
Sitemap: https://mystore.com/sitemap.xml

✅ 이제 검색 엔진이 불필요한 페이지를 크롤링하지 않도록 설정되었습니다.

🎯 마무리하며

이번 챕터에서는 Next.js에서 SEO 최적화를 위한 다양한 기법(메타 태그, OG 태그, SSG, 이미지 최적화 등)을 적용하는 방법을 살펴봤습니다.
다음 단계에서는 4.3. Next.js에서 전역 상태 관리 적용하기를 다룰 예정입니다. 🚀

'project > NestJS + Prisma로 만드는 웹 애플리케이션 첫걸음 - 쇼핑몰' 카테고리의 다른 글

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js에서 API 호출 및 데이터 페칭 최적화 (0)	2025.03.16
📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js에서 전역 상태 관리 적용하기 (0)	2025.03.16
📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js 프로젝트 기본 구조 및 핵심 개념 (0)	2025.03.14
📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - API 문서화 및 테스트 (0)	2025.03.13
📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - 인증 및 보안 (0)	2025.03.13

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

글 보관함

TwentyTwentyOne

티스토리 뷰