리치 스니펫 - 사람

New! schema.org를 사용하면 Google, Microsoft 및 Yahoo!에서 모두 인식할 수 있는 용어를 사용하여 페이지에서 훨씬 광범위한 항목 유형을 마크업할 수 있습니다. 자세히 알아보기 (Google은 기존의 리치 스니펫 마크업을 계속 지원합니다.)

연락처 정보

웹페이지 본문에 연락처와 소셜 네트워크 정보를 마크업하면 Google이 검색결과에서 정보를 더 잘 인식하고 표시하는 데 도움이 됩니다.

Google은 검색 정보에 저작권 정보를 표시하는 파일럿 프로그램을 진행 중입니다. 웹에 게시하는 콘텐츠에 Google 프로필을 연결하는 방법은 여기를 참조하세요.
사람을 나타내는 Google 검색 리치 스니펫의 이미지

속성

각 연락처(사람)에는 이름, 직책 및 주소 등 다양한 속성이 포함되어 있을 수 있습니다. 마이크로데이터, 마이크로포맷 또는 RDFa 마크업을 사용하여 이러한 속성에 라벨을 지정할 수 있습니다.

Google은 hCard 마이크로포맷에서 파생된 다음 연락처 속성을 인식합니다. 마이크로데이터/RDFa 속성 이름과 마이크로포맷 속성 이름이 다를 경우 마이크로포맷 속성 이름이 괄호 안에 표시됩니다. Google은 또한 XFN friend, contactacquaintance 속성을 인식하며 이러한 속성은 소셜 관계를 식별하는 데 사용됩니다. 굵게 표시된 속성은 필수 속성입니다. 또한 다음 속성 중 적어도 두 개 이상이 있어야 합니다.

  • title 또는 role
  • affiliation(org)
  • address
속성 설명
name(fn) 이름
nickname 닉네임
photo 이미지 링크
title 직책(예: 재무 관리팀장)
role 직무(예: 회계사)
url 개인 홈페이지 같은 웹페이지로의 링크
affiliation(org) 개인과 연관된 조직의 이름(예: 소속 회사). fnorg의 값이 정확하게 일치할 경우, Google은 이 정보를 사람이 아니라 업체나 조직으로 해석합니다.
friend 설명된 사람과 다른 사람 사이의 소셜 관계를 식별합니다.
contact 설명된 사람과 다른 사람 사이의 소셜 관계를 식별합니다.
acquaintance 설명된 사람과 다른 사람 사이의 소셜 관계를 식별합니다.
address(adr) 개인의 주소. 하위 속성 street-address, locality, region, postal-codecountry-name을 가질 수 있습니다.

콘텐츠 마크업

다음 HTML 코드는 Bob 'Smithy' Smith를 설명합니다.

<div>제 이름은 Bob Smith이지만 사람들은 저를 Smithy라고 부릅니다.개인 홈페이지:
  <a href="http://www.example.com">www.example.com</a>.
거주지는 알버커키, 뉴멕시코주이며, 직업은 엔지니어, 근무 회사는 ACME Corp. 입니다.
내 친구:
<a href="http://darryl-blog.example.com">Darryl</a>,
<a href="http://edna-blog.example.com">Edna</a>
</div>

다음 섹션에서는 마이크로데이터, 마이크로포맷 또는 RDFa를 사용하여 이 콘텐츠를 마크업하는 방법을 설명합니다.

마이크로데이터

다음은 동일한 HTML 코드를 마이크로데이터를 사용하여 마크업한 것입니다.

<div itemscope itemtype="http://data-vocabulary.org/Person">
   제 이름은 <span itemprop="name">Bob Smith</span>이지만, 
  사람들은 저를 <span itemprop="nickname">Smithy</span>라고 부릅니다. 
  제 홈페이지 주소입니다.
  <a href="http://www.example.com" itemprop="url">www.example.com</a>.
  거주지는 
   <span itemprop="address" itemscope 
    itemtype="http://data-vocabulary.org/Address">
    <span itemprop="locality">알버커키</span>, 
    <span itemprop="region">뉴멕시코주</span> 
  </span>

이며, 직업은 <span itemprop="title">엔지니어</span>
  , 근무 회사는 <span itemprop="affiliation">ACME Corp</span>입니다.
  내 친구:
<a href="http://darryl-blog.example.com" rel="friend">Darryl</a>,
   <a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

이 샘플의 기본 원리는 다음과 같습니다.

  • 첫 번째 행에서 <itemscope itemtype="http://www.data-vocabulary.org/Person"><div>에 포함된 HTML이 사람을 나타냄을 의미합니다. itemscope<div>의 콘텐츠가 항목을 설명함을 나타내고 itemtype="http://www.data-vocabulary.org/Person"은 항목이 사람임을 나타냅니다. person은 마이크로포맷 vcard를 나타내는 데 사용할 수 있습니다.
  • 이 샘플은 이름, 닉네임 및 직책 등 사람의 속성을 설명합니다. 사람 속성에 라벨을 지정하기 위해 이러한 속성 중 하나를 포함하는 각 요소(예: <div> 또는 <span>)에는 속성을 나타내는 itemprop 속성이 할당됩니다. <span itemprop="nickname">).
  • 속성은 다른 항목으로 구성될 수 있습니다. 즉, 항목은 다른 항목을 포함할 수 있습니다. 예를 들어, 위의 사람 정보에는 localityregion 속성을 갖는 주소(itemtype="http://www.data-vocabulary.org/Address")가 포함되어 있습니다.
  • XFN rel="friend" 속성은 Darryl, Edna와 Bob의 관계를 식별합니다.
<a class="zippy">마이크로포맷</a>

다음은 동일한 HTML 콘텐츠를 hCard 마이크로포맷을 사용하여 마크업한 것입니다.

<div class="vcard">
   제 이름은
   <span class="fn">Bob Smith</span>이지만,
   사람들은 저를
   <span class="nickname">Smithy</span>라고 부릅니다.
   개인 홈페이지:
  <a href="http://www.example.com" class="url">www.example.com</a>.
   거주지는 
   <span class="adr">
      <span class="locality">알버커키</span>,
      <span class="region">뉴멕시코주</span>
   </span>

이며, 직업은
   <span class="title">엔지니어</span>, 근무 회사는
   <span class="org">ACME Corp</span>입니다.
      내 친구:
<a href="http://darryl-blog.example.com" rel="friend">Darryl</a>,
   <a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

샘플의 기본 원리는 다음과 같습니다.

  • 첫 번째 행에서 class="vcard"<div> 안에 있는 HTML이 연락처 정보를 설명하고 있음을 나타냅니다(이 경우 사람의 연락처 정보).

    연락처 정보를 설명하는 데 사용한 마이크로포맷은 hCard라고 하며 HTML에서는 vcard로 표시됩니다. 이는 오타가 아닙니다.

  • 이 샘플은 사진, 이름, 직책, 조직 및 주소 등 사람 항목의 속성을 설명합니다. vcard에서 설명한 사람에 대한 속성에 라벨을 지정하기 위해 이러한 속성 중 하나를 포함하는 각 요소(예: <span> 또는 <div>)에 속성을 나타내는 class 속성이 할당됩니다. vcard는 Bob의 이름(fn), 직책(title) 및 근무하는 조직(org)에 대해 설명합니다.
  • 속성에는 다른 속성이 포함될 수 있습니다. 위 예에서 adr 속성은 사람의 주소를 설명하며 하위 속성 localityregion)을 포함합니다.
  • XFN rel="friend" 속성은 Darryl, Edna와 Bob의 관계를 식별합니다.
RDFa

다음은 동일한 HTML 콘텐츠를 RDFa를 사용하여 마크업한 것입니다.

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
  제 이름은 <span property="v:name">Bob Smith</span>이지만, 
  사람들은 저를 <span property="v:nickname">Smithy</span>라고 부릅니다.
  개인 홈페이지: 
  <a href="http://www.example.com" rel="v:url">www.example.com</a>.
  거주지는 
         <span rel="v:address">
        <span typeof="v:Address">
         <span property="v:locality">알버커키</span>,
<span property="v:region">뉴멕시코주</span>
      </span>

</span>

이며, 직업은 <span property="v:title">엔지니어</span>
   , 근무 회사는 <span property="v:affiliation">ACME Corp</span>입니다.
   내 친구:
<a href="http://darryl-blog.example.com" rel="v:friend">Darryl</a>,
   <a href="http://edna-blog.example.com" rel="v:friend">Edna</a>
</div>

샘플의 기본 원리는 다음과 같습니다.

  • 이 예제는 xmlns를 사용하는 네임스페이스 선언으로 시작됩니다. 이는 용어(항목과 해당 구성요소 목록)가 지정된 네임스페이스를 나타냅니다. 사람, 리뷰 또는 장소 데이터에 대한 페이지를 마크업할 때마다 xmlns:v="http://rdf.data-vocabulary.org/#" 네임스페이스 선언을 사용할 수 있습니다. 맨 뒤에 슬래시와 #(xmlns:v="http://rdf.data-vocabulary.org/#")을 사용해야 합니다.
  • 또한 첫 번째 행에서 typeof="v:Person" 은 마크업된 콘텐츠가 사람을 나타냄을 의미합니다.
  • 사람의 각 속성(예: 이름 또는 닉네임)은 property를 사용하여 라벨이 지정됩니다. 속성 이름은 v: (<span property="v:nickname">)으로 시작됩니다.
  • typeof="v:Person" 항목에 Bob의 주소 정보(typeof="v:Address")를 포함할 수 있습니다. 여기에서 property 대신 rel 을 사용하여 Bob(항목 v:Person)과 이 주소(항목 v:Address) 간의 관계를 표시합니다. 그런 다음 실제 주소 항목을 포함하기 위해 <span typeof="v:Address">를 삽입합니다.
  • XFN rel="friend" 속성은 Darryl, Edna와 Bob의 관계를 식별합니다.