플랫폼별 가이드

플랫폼별 연동 가이드

사용하는 쇼핑몰/웹사이트 플랫폼에 맞는 캐러셀 적용 방법을 확인하세요

고도몰 연동 가이드

  1. 1

    고도몰 관리자 로그인

    고도몰 관리자 페이지에 접속하여 로그인합니다.

  2. 2

    디자인 설정 메뉴 접속

    좌측 메뉴에서 [디자인설정] → [HTML 편집] → [공통파일 편집]을 클릭합니다.

  3. 3

    header.html 파일 수정

    header.html 파일을 선택하고, </head> 태그 바로 위에 생성된 JSON-LD 코드를 삽입합니다.

    <!-- 기존 헤더 내용 -->

<!-- 네이버 캐러셀 구조화된 데이터 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "인기 상품",
  "itemListElement": [
    // 생성된 캐러셀 데이터
  ]
}
</script>

</head>
  4. 4

    저장 및 확인

    파일을 저장하고 실제 쇼핑몰에서 소스보기로 코드가 정상적으로 삽입되었는지 확인합니다.

팁:

고도몰에서는 상품별 페이지에도 개별적으로 구조화된 데이터를 추가할 수 있습니다. 상품 상세 페이지용 템플릿을 별도로 만들어 활용해보세요.

카페24 연동 가이드

  1. 1

    카페24 관리자 접속

    카페24 관리자 페이지에 로그인합니다.

  2. 2

    쇼핑몰 설정 메뉴

    [쇼핑몰 설정] → [디자인 설정] → [HTML 편집]을 선택합니다.

  3. 3

    레이아웃 파일 편집

    layout.html 또는 index.html 파일을 선택하여 편집합니다.

    <!-- 카페24 헤더 영역 -->
<head>
  <!-- 기존 메타 태그들 -->

  <!-- 네이버 캐러셀 JSON-LD -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "ItemList",
    "name": "추천 상품",
    "itemListElement": [
      // 여기에 생성된 캐러셀 데이터 삽입
    ]
  }
  </script>
</head>
  4. 4

    변경사항 적용

    파일을 저장하고 [디자인 적용]을 클릭하여 변경사항을 쇼핑몰에 반영합니다.

주의:

카페24에서는 일부 HTML 태그가 제한될 수 있습니다. 코드가 정상적으로 저장되지 않는다면 카페24 고객센터에 문의하세요.

워드프레스 연동 가이드

  1. 1

    워드프레스 관리자 로그인

    워드프레스 대시보드에 접속합니다.

  2. 2

    테마 편집 또는 플러그인 사용

    두 가지 방법 중 선택할 수 있습니다:

    방법 1: 테마 직접 편집

    [외모] → [테마 편집기] → header.php 파일을 선택합니다.

    <?php wp_head(); ?>

<!-- 네이버 캐러셀 구조화된 데이터 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "블로그 포스트",
  "itemListElement": [
    // 생성된 캐러셀 데이터
  ]
}
</script>

</head>

    방법 2: functions.php 사용

    // functions.php에 추가
function add_naver_carousel_schema() {
    $schema = '{
        "@context": "https://schema.org",
        "@type": "ItemList",
        "name": "블로그 포스트",
        "itemListElement": [
            // 캐러셀 데이터
        ]
    }';

    echo '<script type="application/ld+json">' . $schema . '</script>';
}
add_action('wp_head', 'add_naver_carousel_schema');
  3. 3

    플러그인 활용

    Schema & Structured Data for WP 같은 플러그인을 사용하여 GUI로 구조화된 데이터를 관리할 수도 있습니다.

Shopify 연동 가이드

  1. 1

    Shopify 관리자 접속

    Shopify 관리자 페이지에 로그인합니다.

  2. 2

    테마 편집

    [Online Store] → [Themes] → [Actions] → [Edit code]를 선택합니다.

  3. 3

    theme.liquid 파일 수정

    Layout 폴더의 theme.liquid 파일을 열고 </head> 태그 위에 코드를 추가합니다.

    <!-- Shopify 기본 헤드 태그들 -->
{{ content_for_header }}

<!-- 네이버 캐러셀 구조화된 데이터 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "인기 상품",
  "itemListElement": [
    {% for product in collections.featured.products limit: 10 %}
    {
      "@type": "Product",
      "name": "{{ product.title | escape }}",
      "url": "{{ shop.url }}{{ product.url }}",
      "image": "{{ product.featured_image | img_url: 'master' }}",
      "description": "{{ product.description | strip_html | truncate: 160 | escape }}",
      "position": {{ forloop.index }}
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
}
</script>

</head>
  4. 4

    저장 및 확인

    변경사항을 저장하고 스토어에서 소스를 확인하여 정상 적용되었는지 확인합니다.

고급 팁:

Shopify Liquid 문법을 활용하면 동적으로 상품 데이터를 캐러셀에 포함시킬 수 있습니다. 위 예시는 featured 컬렉션의 상품들을 자동으로 캐러셀에 추가하는 방법입니다.

아임웹 연동 가이드

  1. 1

    아임웹 관리자 로그인

    아임웹 관리자 페이지에 접속하여 로그인합니다.

  2. 2

    사이트 설정 메뉴

    [사이트 관리] → [사이트 설정] → [SEO 설정] 메뉴로 이동합니다.

  3. 3

    헤드 태그 코드 추가

    SEO 설정 페이지에서 '헤드 태그 코드' 영역에 생성된 JSON-LD 코드를 삽입합니다.

    <!-- 아임웹 헤드 태그 코드 영역에 추가 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "인기 콘텐츠",
  "itemListElement": [
    // 생성된 캐러셀 데이터
  ]
}
</script>
  4. 4

    저장 및 적용

    설정을 저장하고 사이트에 적용되었는지 확인합니다. 변경사항이 반영되기까지 몇 분 정도 소요될 수 있습니다.

팁:

아임웹은 페이지별로 개별 SEO 설정도 가능합니다. 특정 페이지에만 캐러셀을 적용하려면 해당 페이지의 SEO 설정을 이용하세요.

직접 HTML 삽입 가이드

  1. 1

    HTML 파일 준비

    캐러셀을 추가할 HTML 파일을 텍스트 에디터로 엽니다.

  2. 2

    헤드 섹션에 JSON-LD 추가

    <head> 태그 내부, </head> 태그 바로 위에 생성된 코드를 삽입합니다.

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 웹사이트</title>

    <!-- 네이버 캐러셀 구조화된 데이터 -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "name": "추천 콘텐츠",
      "itemListElement": [
        {
          "@type": "Article",
          "name": "첫 번째 글 제목",
          "url": "https://mysite.com/post1",
          "description": "글 요약 내용",
          "image": "https://mysite.com/image1.jpg",
          "position": 1
        },
        {
          "@type": "Article",
          "name": "두 번째 글 제목",
          "url": "https://mysite.com/post2",
          "description": "글 요약 내용",
          "image": "https://mysite.com/image2.jpg",
          "position": 2
        }
      ]
    }
    </script>
</head>
  3. 3

    선택사항: HTML 마크업 추가

    검색엔진 최적화를 위해 실제 HTML 콘텐츠도 추가할 수 있습니다.

    <body>
    <!-- 실제 캐러셀 HTML 마크업 -->
    <section class="carousel-section">
        <h2>추천 콘텐츠</h2>
        <div class="carousel-container">
            <article class="carousel-item">
                <img src="https://mysite.com/image1.jpg" alt="첫 번째 글">
                <h3><a href="https://mysite.com/post1">첫 번째 글 제목</a></h3>
                <p>글 요약 내용</p>
            </article>
            <article class="carousel-item">
                <img src="https://mysite.com/image2.jpg" alt="두 번째 글">
                <h3><a href="https://mysite.com/post2">두 번째 글 제목</a></h3>
                <p>글 요약 내용</p>
            </article>
        </div>
    </section>
</body>
  4. 4

    파일 저장 및 업로드

    수정된 HTML 파일을 저장하고 웹서버에 업로드합니다.

중요:

JSON-LD의 데이터와 실제 HTML 콘텐츠는 일치해야 합니다. 검색엔진이 불일치를 감지하면 구조화된 데이터를 무시할 수 있습니다.