사용자의 사이트에서 고급 핀 사용하기

고급 핀은 회원님의 웹사이트에서 생성된 핀에 더 많은 정보를 추가합니다. 현재 제품, 기사, 앱 설치, 레시피의 4가지 고급 핀이 있습니다.


회원님의 사이트에 고급 핀을 추가하세요.

  1. 메타 태그나 oEmbed 엔드포인트를 이용해서 사이트를 만들어보세요. 이것은 기술적인 부분이므로 웹사이트 개발자의 도움이 필요할 수 있습니다. 아래에서 고급 핀의 유형별 지침을 간단하게 확인하시기 바랍니다.
  2. 회원님의 고급 핀을 테스트해보세요.
  3. Pinterest에서 고급 핀을 이용하려면 신청하세요.

고급 핀에 관한 모든 개발자용 문서를 확인하려면 Pinterest 개발자용 사이트를 방문하세요.


각각의 핀 종류에 대한 사용 방법을 알아보세요.

고급 핀을 신청할 때, 가장 적절한 핀 유형에 대한 마크업을 웹사이트에 추가해야 합니다. 만약 회원님의 사이트에 요리법이 있다면 기사 핀에 대한 마크업이 아닌 요리 핀에 대한 마크업을 추가하세요.
 

Product Pins Product Pins
제품 핀은 사용자의 웹사이트에서 생성된 핀에 가격, 재고 및 제품 설명을 보여줄 수 있도록 도와줍니다.
 
사용자의 사이트에 제품 핀을 추가하려면

1. 고급 핀을 적용하려고 하는 모든 페이지의 HTM 코드에서 <head> </head> 섹션 사이에 Open Graph 또는  Schema.org 마크업을 추가하세요. Shopify를 사용하는 경우, Shopify 사이트 지침을 아래에서 확인하시기 바랍니다. 각 마크업 유형에 필요한 고급 핀 필드는 다음과 같습니다. 제품에 맞게 하이라이트된 필드를 수정하세요.

Open Graph 마크업:
<meta property="og:title" content="de Young Copper Bookmark" />
<meta property="og:type" content="product" />
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:currency" content="USD" />
 

Schema.org 마크업:

<div itemscope itemtype="https://schema.org/Product">

<meta itemprop="name" content="de Young Copper Bookmark" />
<meta itemprop="url" content="https://shop.famsf.org/do/product/BK5160" />
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="price">.00</span>
<meta itemprop="priceCurrency" content="USD” />
<meta itemprop="availability" itemtype="https://schema.org/ItemAvailability"
</div>
 

2. Pinterest 고급 핀 인증도구를 이용하여 Pinterest가 고급 핀 데이터에 액세스할 수 있는지 확인하세요.

3. 준비가 완료되면 지금 신청하기를 클릭하세요. 신청 시 올바른 마크업 유형을 선택했는지 꼭 확인하시기 바랍니다.

Pinterest는 제품 고급 핀을 해당 제품을 구입할 수 있는 사이트에만 추가하고 있습니다. 이것은 사용자가 해당 제품을 다른 사이트가 아닌 웹사이트에서 직접 구매할 수 있어야 한다는 것을 의미합니다.
 
웹사이트를 다음 업체에서 호스팅하는 경우, Markup을 추가하지 않아도 됩니다.
  1. Shopify: 마크업을 추가하는 대신 Pinterest 고급 핀 인증도구 페이지로 이동하여 회원님의 제품 링크를 붙여넣은 후 '.oembed'를 링크 마지막에 추가하세요. 이렇게 하면 회원님의 제품에 대한 모든 고급 핀 정보를 볼 수 있습니다. 이 페이지에서 고급 핀을 신청하세요. (신청 과정에서 꼭 Shopify를 선택하세요.)
  2. Etsy, Teachers Pay Teachers, eBay: 사이트에서 생성되는 모든 핀에 24시간 내로 제품 정보가 입력됩니다. 

Pinterest 개발자 사이트에서 더 많은 정보를 확인하세요. 

Article Pins Article Pins
기사 핀은 사용자의 기사 혹은 블로그 게시물의 헤드라인 또는 타이틀, 설명 및 작성자를 보여줄 수 있도록 도와줍니다.
 
기사 핀을 사용자의 사이트에 추가하려면

1. 고급 핀을 적용하려고 하는 모든 페이지의 HTM 코드에서 <head> </head> 섹션 사이에 Open Graph 또는  Schema.org 마크업을 추가하세요. 각 마크업 유형에 필요한 고급 핀 필드는 다음과 같습니다. 기사에 맞게 하이라이트된 필드를 수정하세요.

Open Graph 마크업:
<meta property="og:title" content="기사 제목"/>
<meta property="og:description" content="기사 설명" />
<meta property="og:type" content="article" />
 
Schema.org 마크업:
<meta property="og:site_name" content="사이트 예시” />
<div itemscope itemtype="https://schema.org/Article">
    <meta itemprop="url" content="https://www.example.com/2013/10/article.html" />
    <span itemprop="name" content="기사 제목” /> by <span itemprop="author" content="홍길동” />
    <span itemprop="description">기사 설명 또는 요약</span>
    </div>
  1. Pinterest 고급 핀 인증도구를 이용하여 Pinterest가 고급 핀 데이터에 액세스할 수 있는지 확인하세요.
  2. 준비가 완료되면 지금 신청하기를 클릭하세요. 신청 과정에서 HTML 태그를 선택했는지 꼭 확인하세요.
'기사'는 뉴스 기사나 블로그 포스팅과 같이 텍스트를 포함한 페이지를 의미합니다. Pinterest는 이미지 위주로 구성된 페이지 또는 리스트를 '기사'로 간주하지 않습니다.
 
Pinterest 개발자 사이트에서 더 많은 정보를 확인하세요.
 

App Install Pins App Install Pins
앱 핀에는 iOS 사용자가 App Store에서 앱을 다운로드할 수 있도록 안내하는 설치 버튼 기능이 있습니다.
 
앱 핀을 만들려면 다음 단계를 따르세요.
  1. 보드 화면에서핀 추가를 선택한 후, 컴퓨터나 기기에서 핀 이미지를 업로드하세요.
  2. 앱의 고화질 이미지를 업로드하세요.
  3. 핀을 수정하여 웹사이트를 App Store 페이지로 변경합니다.
앱 핀의 예시를 확인하려면 Pinterest에서 App Store를 참고하세요. 현재는 미국에서 만든 앱만 앱 핀에 적용할 수 있습니다. 현재 앱 핀은 미국에서 만든 앱에만 적용되며 iOS 기기에서만 지원됩니다.

Recipe Pins Recipe Pins
요리법 핀을 활용하면 요리법 제목, 조리 양, 조리 시간, 평점 및 재료 목록을 추가할 수 있습니다. 해당 요리법이 팔레오식, 채식, 완전채식, 글루텐 프리 식단인지도 알 수 있습니다.
 
요리법 핀을 사용자의 사이트에 추가하려면

1. 레시피 고급 핀을 적용하려고 하는 모든 페이지의 HTML 코드에서 <head> </head> 섹션 사이에 Schema.org 또는 hrecipe 마크업을 추가하세요. 각 마크업 유형에 필요한 고급 핀 필드는 다음과 같습니다. 레시피에 따라 강조 표시된 필드를 수정하세요. 평점은 오직 Schema.org 마크업을 사용할 때에만 지원되며 현재 iOS, Android 기기에만 표시됩니다.

Schema.org 마크업:
<div itemscope itemtype="https://schema.org/Recipe">
    <span itemprop="name">
    오렌지-파인애플-당근 스무디</span>
   <span itemprop="description">
    요리법 설명</span>
  <span itemprop="aggregateRating">
    총 평점은 여기에 표시됩니다.</span>
    <meta itemprop="url"
    <span itemprop="recipeYield">Serves 1</span>
    재료:
        <span itemprop="ingredients">재료 1</span>,
        <span itemprop="ingredients">재료 2</span>,
        <span itemprop="ingredients">재료 3</span>,
        <span itemprop="ingredients">
    재료 태그를 필요한 만큼 추가하세요.</span>.
    조리법:
    <span itemprop="recipeInstructions">
    파인애플, 얼음, 오렌지 주스, 당근,
    바나나를 블렌더에 넣고 스무디가 될 때까지 돌려 주세요.</span>
</div>
 
hrecipe 태그:
<article class="h-recipe">
  <h1 class="p-name">베이글</h1>
  <ul>
    <li class="p-ingredient">밀가루</li>
    <li class="p-ingredient">설탕</li>
    <li class="p-ingredient">이스트</li>
  </ul>
  <p>Takes <time class="dt-duration" datetime="1H">1시간</time>,
     용량 <data class="p-yield" value="4">4인분</data>.</p>
  <div class="e-instructions">
    <ol>
      <li>모든 재료를 섞어 줍니다.</li>
    </ol>
  </div>
</article>
 

2. Pinterest 고급 핀 인증도구를 이용하여 Pinterest가 고급 핀 데이터에 액세스할 수 있는지 확인하세요.

3. 준비가 완료되면 지금 신청하기를 클릭하세요. 신청 시 HTML 태그를 선택했는지 꼭 확인하시기 바랍니다.

Pinterest 개발자 사이트에서 더 많은 정보를 확인하세요. 


Shopify 스토어에 고급 핀을 추가하세요.

  1. Shopify 사이트에 있는 특정 제품 페이지(“Buy” 또는 “add to bag” 버튼이 있는 페이지)로 이동하세요.
  2. 제품 페이지의 URL을 복사하여 고급 핀 인증 도구에 붙여넣은 후 제품 페이지 URL 끝에 .oembed를 입력하세요.
  3. 인증 버튼을 클릭하세요.
  4. 미리보기 화면이 나타나면 적용하기를 클릭하세요. 웹사이트에서 한 개의 제품 페이지 URL만 적용하면 됩니다.
  5. 24시간 내에 고급 제품 핀이 적용된 것을 확인하실 수 있습니다.

자주 묻는 질문

내 사이트의 고급 핀을 비활성화할 수 있나요?
모든 페이지에 Markup을 추가해야 하나요?
웹사이트의 각 페이지를 따로 신청해야 하나요?
언제 내 핀이 고급 핀으로 표시되나요?
고급 핀을 신청할 때 오류 메시지가 나타납니다.
내 요리법이 고급 핀으로 표시되지 않는 이유는 무엇인가요?

회원님의 웹사이트의 핀에 고급 정보를 포함하고 싶지 않다면, 아래의 태그를 회원님의 페이지 HTML 헤드 섹션에 추가하세요.

<meta name="pinterest-rich-pin" content="false" />

네, Pinterest상에서 고급 핀을 적용하고자 하는 모든 페이지에 고급 핀 메타태그를 추가해야 합니다. 고급 핀은 오직 특정 제품 세부정보, 기사, 요리법 페이지에만 적용할 수 있습니다. 홈페이지나 카테고리 페이지 등에는 markup을 추가하지 않아야 합니다. 마크업이 정확하게 적용된 페이지 하나만 인증을 받으면 웹사이트에서 메타태그가 있는 모든 페이지에 고급 핀을 적용할 수 있습니다.


아니요, 사이트에 있는 한 페이지에서만 신청하면 됩니다. 신청이 승인되면 회원님의 사이트에서 생성되는 모든 핀에 대해 고급 핀을 이용할 수 있습니다. 

고급 핀이 승인되면, 회원님의 웹사이트에서 생성되는 새 핀들은 올바른 제품, 기사 또는 레시피 태그가 있는 경우 고급 핀으로 나타나게 됩니다.
 
기존 핀의 경우 고급 핀으로 나타나는 데 몇 주가 걸릴 수도 있습니다. 

URL에서 아무 데이터도 다시 불러오지 못했습니다라는 내용의 메시지가 표시되는 경우, 회원님의 사이트에서 핀을 만들기 전에 Pinterest 접속 시간이 초과되었을 수 있습니다. 안타깝지만 이런 문제는 Pinterest에서 해결할 수 있는 문제가 아니며, 주로 사이트 속도가 느릴 때 이런 일이 발생합니다. 회원님의 사이트에서 Amazon Web Services (AWS) 요청을 차단하는 경우에도 이런 오류가 나타납니다. 고급 핀을 신청하기 전에 이러한 차단을 해제해야 합니다.

URL에 필수 정보가 빠진 것 같습니다라는 메시지가 표시되면 한 개 이상의 필수 고급 핀 태그가 빠진 것입니다. Pinterest 개발자 사이트를 방문하여 어느 태그를 추가해야 할지 알아보시기 바랍니다.

Pinterest는 최근 hrecipe microformat v1 지원을 중단했으며, 현재는 요리법 고급 핀에 대해 microformat v2만 지원합니다. 새로 지원하는 microformat에 대한 자세한 내용은 다음 링크를 참조하세요. http://microformats.org/wiki/h-recipe
 
Pinterest에서 사이트에 있는 요리법 고급 핀을 지원할 수 있도록 microformate v2 또는 schema.org 태그로 마이그레이션하시기 바랍니다.


참고: 2017년 1월부로 장소 및 영화 고급 핀은 더 이상 지원되지 않습니다. 모든 기존 장소 또는 영화 핀은 Pinterest에 계속 정상적으로 표시됩니다.