top of page

CSR 대응 SEO 전략 및 사이트맵 전략 (기프티쇼 비즈 사례 공유)

1. CSR 색인 요약

CSR 페이지 색인에서 중요한 것은 랜딩 속도입니다.

  1. 크롤링(Crawling)

  2. 렌더링(Rendering)

  3. 색인(Indexing)

Google은 CSR 페이지를 크롤링하기 위해 2단계 처리 프로세스를 적용합니다

  • 첫 번째 단계에서 기본 HTML을 파싱합니다.

  • 두 번째 단계에서 JavaScript를 실행하여 동적 콘텐츠를 렌더링합니다.



2. 계층적 사이트맵 구조로 변경

2.1. 인덱스 사이트맵(sitemap-index.xml)

*<!-- sitemap-index.xml 예시 -->*
<sitemapindex xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
  <sitemap>
    <loc><https://biz.giftishow.com/sitemap-general.xml></loc>
    <lastmod>2025-05-26</lastmod>
  </sitemap>
  <sitemap>
    <loc><https://biz.giftishow.com/sitemap-panchok.xml></loc>
    <lastmod>2025-05-26</lastmod>
  </sitemap>
  <sitemap>
    <loc><https://biz.giftishow.com/sitemap-ggoods.xml></loc>
    <lastmod>2025-05-26</lastmod>
  </sitemap>
</sitemapindex>


2.2. 사이트 기본 경로 사이트맵 (sitemap-general.xml)

<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
	<url>
		<loc><https://biz.giftishow.com/></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
	<url>
		<loc><https://biz.giftishow.com/bizshop></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
	<url>
		<loc><https://biz.giftishow.com/bizshop?categorySeq=1></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
		... 생략
</urlset>

2.3. 쿠폰 상품 상세페이지 사이트맵(sitemap-panchok-1.xml)

<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
	<url>
		<loc><https://biz.giftishow.com/ggoods/detail?goodsNo=8637&goodsCode=G00000004403></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
	<url>
		<loc><https://biz.giftishow.com/ggoods/detail?goodsNo=57145&goodsCode=G00003361150></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
	<url>
		<loc><https://biz.giftishow.com/ggoods/detail?goodsNo=28103&goodsCode=G00000631139></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
		... 생략
</urlset>

2.4. 판촉 상품 상세페이지 사이트맵(sitemap-ggoods-1.xml)

<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
	<url>
		<loc><https://biz.giftishow.com/panchok/product/86008></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
	<url>
		<loc><https://biz.giftishow.com/panchok/product/71840></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
	<url>
		<loc><https://biz.giftishow.com/panchok/product/106058></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
		... 생략
</urlset>

2.5. 사이트맵 운영 참고

사이트맵에는 상세페이지당 하나의 고유한 URL이 들어가는 것이 가장 좋습니다.

<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
	<url>
		<loc><https://biz.giftishow.com/ggoods/detail?goodsNo=29266></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
	<url>
		<loc><https://biz.giftishow.com/ggoods/detail?goodsNo=29266&goodsCode=G00000640670></loc>
	<lastmod>2025-05-26</lastmod>
	</url>
	<url>
		<loc><https://biz.giftishow.com/ggoods/detail?goodsNo=29266&categorySeq=4&goodsCode=G00000640670></loc>
		<lastmod>2025-05-26</lastmod>
	</url>
</urlset>

⇒ 위 3가지 URL은 모두 동일한 페이지로 이동됩니다. 이 중 가장 고유한 URL을 사이트맵에 등록 해주세요.

 이 부분에 대해서는 KT 측이 어떤 URL이 가장 고유한 URL인지 전달주시면 상세 페이지의 캐노니컬 작업할 때도 사용되게 됩니다.

✅ 스키마 변경사항이 있다면 <lastmod>를 최신화 해주세요.

ex) DB에 update 시간이 있다면 update 컬럼 기준으로 최신화 하는 것도 좋은 방법입니다.

✅ sitemap의 변경 사항이 많다면 스케줄러를 통해 매일 한 번 최신화 하는 것도 좋은 방법입니다.

✅ sitemap-index가 정상으로 색인 되었다면, 구글 서치 콘솔에서 아래와 같은 내용을 볼 수 있습니다.





3. 품절/판매중지 상품 관리

3.1. 품절 상품에 대한 관리

<aside> 💡

일반적으로 품절된 상품 페이지는 계속 유지하고 색인된 상태로 두는 것이 권장됩니다.

</aside>

  • 페이지 유지 및 200 OK 상태 코드 반환: 상품이 일시적으로 품절된 경우, 페이지를 그대로 유지하고 HTTP 200 (OK) 상태 코드를 반환하는 것이 좋습니다

  • 제품 스니펫 구조화 데이터 사용: Schema.org의 Product 스키마 내 availability 속성을 https://schema.org/OutOfStock으로 설정하여 Google에 상품이 현재 재고 없음을 알립니다. 이렇게 하면 Google은 페이지를 계속 색인하고 정기적으로 크롤링하여 재입고 시 빠르게 업데이트할 수 있습니다.

✅ 참고: https://schema.org/ 재고 옵션 참고


3.2. 판매중지 상품에 대한 관리

<aside> 💡

영구적으로 판매가 중단된 상품 페이지의 처리 방법은 해당 페이지가 가진 SEO 가치(예: 외부 백링크, 유입 트래픽)에 따라 달라집니다

</aside>

  • SEO 가치가 없는 경우:

    해당 상품 페이지로 유입되는 트래픽이 거의 없고 중요한 백링크도 없다면, 페이지를 삭제하고 410 (Gone) 상태 코드를 반환하는 것이 좋습니다. 410 코드는 해당 페이지가 영구적으로 삭제되었음을 Google에 명확히 알려주어 404 (Not Found)보다 빠르게 색인에서 제거하도록 유도할 수 있습니다.

  • SEO 가치가 있는 경우

    301 리디렉션: 해당 페이지가 여전히 트래픽을 유도하거나 가치 있는 백링크를 보유하고 있다면, 가장 관련성이 높은 대체 상품이나 상위 카테고리 페이지로 301 영구 리디렉션을 설정하여 SEO 가치를 이전하는 것이 좋습니다

  • 페이지 유지 (수요가 높은 경우): 단종된 상품임에도 불구하고 검색 수요가 여전히 높다면, 페이지를 유지하되 상품이 더 이상 제공되지 않음을 명확히 알리고 관련 대체 상품을 안내하는 방법도 고려할 수 있습니다.

  • (현재 KT의 경우 높은 수요의 상품이 종종 페이지가 없어지는 경우가 있습니다. 이런 경우에 스키마로 품절 처리를 하고 장기적으로는 단기 품절 디자인을 추가하는 것이 SEO 상으로 유리합니다.)

✅ 정리

방법

HTTP 상태 코드

적용 시나리오

301 리디렉션

301

유사 상품이 존재하는 경우

410 Gone

410

영구 삭제 및 백링크 유지 불필요 시

noindex

200 + 메타 태그

기록 보존 필요 시

✅ 상품 상태에 따른 조합 예시

판매중지 30일 전 302 임시 리디렉션

→ 14일 후 301 영구 리디렉션 → 60일 후 410 상태 코드 적용

3.3. 현재 기프티쇼 품절 페이지로 확인

✅ 품절 상품이지만 제품 스니펫이 https://schema.org/InStock(재고 있음)으로 설정되어 있습니다. > 검색 결과 페이지에 여전히 노출되는 원인이라고 볼 수 있습니다. 상세 페이지 작업할때, 상품 재고 상태를 함께 변수로 내려주시면, 함께 적용하도록 하겠습니다.


✅ 품절된 상품을 색인에서 제거하고 싶다면 200 상태코드를 응답하지 않고 404나 410을 응답해야 합니다.


4. 리스트 페이지 <a> 태그 최적화

4.1. 표준 준수 <a> 태그 링크

*<!-- 권장 사례 -->*
<a href="/ggoods/detail?goodsNo=12345" title="한우 스테이크 상세보기">
  <img src="product.jpg" alt="한우 스테이크 제품 이미지">
</a>

*<!-- 피해야 할 패턴 -->*
<span class="fake-link" onclick="navigateToProduct(12345)">
  제품 보기
</span>

4.2 SPA을 사용하는 경우 라우팅 최적화

History API를 활용한 URL 동기화:

*// Vue Router 예시*
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/products/:id', component: ProductDetail }
  ]
})

크롤링 보장을 위한 3원칙:

  1. 모든 상호작용 요소에 href 속성 부여

  2. URL 파라미터는 ?category=food&sort=price 형식으로 직관적 구성

  3. 해시 프래그먼트(#) 사용 시 scrollBehavior 함수로 동기화

 
 
 

댓글

마켓피디아

Tel : 010-3599-6345

​아담 인터네셔널

Email : contact@market-pedia.com

(05717) IT 벤처타워 서관 10층

bottom of page