캐러셀 사용방법

네이버 캐러셀 만들기 사용방법

네이버 캐러셀 만들기의 상세한 사용법과 적용 방법을 알아보세요

STEP 1

웹 인터페이스 사용하기

  1. 1

    캐러셀 타입 선택

    일반 아이템, 상품, 레시피, 교육/강좌, 영화 중에서 콘텐츠에 맞는 타입을 선택합니다.

  2. 2

    캐러셀 이름 입력

    캐러셀 전체를 대표하는 이름을 입력합니다. 예: "인기 상품 목록", "추천 레시피"

  3. 3

    항목 추가

    "항목 추가" 버튼을 클릭하여 캐러셀에 포함할 콘텐츠들을 추가합니다.

  4. 4

    정보 입력

    각 항목의 제목, 설명, URL, 이미지 등의 정보를 입력합니다.

  5. 5

    코드 생성

    "코드 생성" 버튼을 클릭하면 JSON-LD 및 임베드 코드가 생성됩니다.

STEP 2

생성된 코드 적용 방법

방법 1: JSON-LD 직접 삽입

생성된 JSON-LD 코드를 웹페이지의 <head> 태그 내에 붙여넣는 방법입니다.

HTML head 태그 예시 
<head>
    <!-- 기존 head 내용 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "ItemList",
        "name": "인기 상품 목록",
        "itemListElement": [
            {
                "@type": "Product",
                "name": "상품명",
                "url": "https://example.com/product1",
                "position": 1,
                "image": "https://example.com/image1.jpg",
                "description": "상품 설명"
            }
        ]
    }
    </script>
</head>

추천

이 방법이 가장 안정적이고 SEO에 효과적입니다.

방법 2: 임베드 JavaScript 사용

생성된 임베드 코드를 <body> 태그 끝부분에 붙여넣는 방법입니다.

임베드 스크립트 예시 
<body>
    <!-- 페이지 내용 -->

    <!-- 네이버 캐러셀 임베드 코드 -->
    <script>
    (function() {
        var carouselData = {
            "@context": "https://schema.org",
            "@type": "ItemList",
            "name": "추천 상품",
            "itemListElement": [/* 생성된 데이터 */]
        };

        // JSON-LD 자동 생성
        var script = document.createElement('script');
        script.type = 'application/ld+json';
        script.textContent = JSON.stringify(carouselData);
        document.head.appendChild(script);
    })();
    </script>
</body>

STEP 3

외부 스크립트 사용법

기본 사용법

기본 임베드 방법 
<script src="https://yourdomain.com/naver-carousel-embed.js"
        data-carousel-type="ItemList"
        data-carousel-name="인기 상품 목록"
        data-items='[{"name":"상품1","url":"https://example.com/1","description":"설명1"}]'>
</script>

HTML 구조도 함께 생성하기

HTML 포함 생성 
<script src="https://yourdomain.com/naver-carousel-embed.js"
        data-carousel-type="Product"
        data-carousel-name="추천 상품"
        data-items='[{"name":"상품1","url":"https://example.com/1"}]'
        data-create-html="true">
</script>

프로그래매틱 사용법

JavaScript API 
// JavaScript에서 동적으로 캐러셀 생성
NaverCarousel.create({
    type: 'Product',
    name: '베스트 상품',
    items: [
        {
            name: '상품 1',
            url: 'https://example.com/product1',
            description: '최고의 상품',
            image: 'https://example.com/image1.jpg',
            price: '29,900원'
        }
    ]
});

STEP 4

캐러셀 타입별 필드

일반 아이템 (ItemList)

필수 필드:

  • 제목
  • URL

선택 필드:

  • 설명
  • 이미지 URL

상품 (Product)

필수 필드:

  • 제목
  • URL

선택 필드:

  • 설명
  • 이미지 URL
  • 가격
  • 브랜드

레시피 (Recipe)

필수 필드:

  • 제목
  • URL

선택 필드:

  • 설명
  • 이미지 URL
  • 조리 시간
  • 주요 재료

교육/강좌 (Course)

필수 필드:

  • 제목
  • URL

선택 필드:

  • 설명
  • 이미지 URL
  • 강좌 기간
  • 강사명

영화 (Movie)

필수 필드:

  • 제목
  • URL

선택 필드:

  • 설명
  • 이미지 URL
  • 감독
  • 개봉일

STEP 5

최적화 팁

메인 페이지 노출 개선

JSON-LD와 함께 HTML 구조도 추가하면 메인 페이지에서의 노출이 개선될 수 있습니다.

이미지 최적화

캐러셀에 사용할 이미지는 적절한 크기(최소 696x392px)와 포맷을 사용하세요.

설명 작성

각 항목의 설명은 간결하고 명확하게 작성하여 사용자의 관심을 끌 수 있도록 합니다.

URL 구조

깔끔하고 의미 있는 URL 구조를 사용하세요.

주의사항

  • 노출 보장 없음: 네이버가 캐러셀을 표시하는 것은 보장되지 않습니다. 구조화된 데이터는 검색 엔진이 콘텐츠를 이해하는 데 도움을 줄 뿐입니다.
  • 정확한 정보: 정확하고 최신의 정보를 제공해야 합니다.
  • 스팸 금지: 스팸성 콘텐츠나 오해의 소지가 있는 정보는 피해야 합니다.

STEP 6

문제 해결

캐러셀이 표시되지 않는 경우

  1. 1

    구조화된 데이터 검증: Google의 구조화된 데이터 테스트 도구로 JSON-LD가 올바른지 확인

  2. 2

    사이트 등록 확인: 네이버 서치어드바이저에서 사이트가 등록되어 있는지 확인

  3. 3

    콘텐츠 품질: 콘텐츠의 품질과 검색어와의 관련성 확인

  4. 4

    시간 대기: 구조화된 데이터 적용 후 며칠간 기다려보기

데이터가 제대로 파싱되지 않는 경우

  1. 1

    JSON 문법 확인: JSON 문법 오류가 없는지 검증

  2. 2

    필수 필드 확인: 각 타입별 필수 필드가 모두 포함되어 있는지 확인

  3. 3

    특수 문자 처리: 특수 문자나 한글이 올바르게 이스케이프 처리되었는지 확인

  4. 4

    URL 유효성: 모든 URL이 유효하고 접근 가능한지 확인

지금 바로 캐러셀을 만들어보세요!

상세한 사용법을 확인했다면 이제 직접 캐러셀을 생성해보세요

캐러셀 생성하기 캐러셀이란?