구글 블로그 구조화된 데이터 작성 방법 - Open Graph, Twitter Card

구조화된 메타데이터를 추가하면 크롤러가 페이지를 보다 더 효율적으로 인덱싱하고 미리볼 수 있습니다. 예를 들어 Facebook은 Open Graph를, Twitter는 Twitter Card를 사용하여 페이지의 이미지와 특정 데이터를 추출합니다. 사이트 제목, 사이트 설명 등.

위 사진처럼 링크의 미리 보기를 위한 제목, 내용, 이미지를 결정합니다. 어떤 링크에서 방문 전에 미리 보기를 통해 어떤 내용인지 확인하고 방문을 하게 됩니다.

이러한 구조화된 메타데이터 기능을 표시하려면 아래와 같은 코드를 페이지 head에 추가해야 합니다.

Open Graph 작성 방법

<!--[ Open graph ]-->
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>
<b:if cond='data:view.isMultipleItems'>
  <meta content='website' property='og:type'/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
    <b:else/>
    <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' property='og:description'/>
  </b:if>
  <b:else/>
  <meta content='article' property='og:type'/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
    <b:else/>
    <meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' property='og:description'/>
  </b:if>
</b:if>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:image:alt'/>
<meta content='1000' property='og:image:width'/>
<meta content='500' property='og:image:height'/>
<b:if cond='data:blog.postImageUrl'>
  <meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>
  <b:else/>
  <meta content='여기에_이미지_URL_추가' property='og:image'/>
</b:if>

Twitter Card 작성 방법

<!--[ Twitter Card ]-->
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:title'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<b:if cond='data:view.isMultipleItems'>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
    <b:else/>
    <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='twitter:description'/>
  </b:if>
  <b:else/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
    <b:else/>
    <meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='twitter:description'/>
  </b:if>
</b:if>

<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:image:alt'/>
<meta content='1000' property='twitter:image:width'/>
<meta content='500' property='twitter:image:height'/>
<b:if cond='data:blog.postImageUrl'>
  <meta expr:content='resizeImage(data:blog.postImageUrl, 0)' name='twitter:image:src'/>
  <b:else/>
  <meta content='여기에_이미지_URL_추가' name='twitter:image:src'/>
</b:if>