오픈그래프(open graph) & 트위터카드(Twitter card) 필수 속성 정리

오픈그래프(open graph) & 트위터카드(Twitter card) 필수 속성 정리

 

- 오픈그래프란 사이트가 SNS를 통해 공유될 때 미리보기 형식으로 나올 컨텐츠를 정하는 용도로 메타태그 안에 설정합니다.

카카오톡으로 url을 보냈을 때, 아래의 사진과 같이 사이트의 설명과 썸네일을 포함한 카드가 생기는 것을 많이 보셨을 거에요. 오픈그래프는 바로 이 카드의 내용을 설정할 때 쓰이는 것입니다.

 

- 트위터카드는 트위터에 최적화된 오픈그래프라고 생각하면 됩니다. 보통 둘다 동시에 써주죠.

 

오픈그래프(SNS)	트위터카드(트위터)
카카오톡으로 블로그 공유시 나오는 카드	일론머스크의 트위터

 

 

 

 

오픈그래프 & 트위터카드 기본(basic) 속성

아래는 필수로 들어갈만한 속성들입니다.

속성의 이름을 보면 어떤 쓰임인지 대충 알테니 설명은 스킵하겠습니다.

<-- open graph -->
<meta property="og:title" content="타이틀(이름)" />
<meta property="og:image" content="sample.jpeg" />
<meta property="og:description" content="간단한 설명">
<meta property="og:url" content="https://sample.co.kr/" />
<-- twitter card -->
<meta name="twitter:title" content="타이틀" />
<meta name="twitter:image" content="sample.jpeg" />
<meta name="twitter:description" content="간단한 설명" />
<meta name="twitter:url" content="https://sample.co.kr/" />
<meta name="twitter:card" content="summary" />

 

보면 오픈그래프와 트위터카드는 대부분 겹치는데 다른점이 하나 있습니다.

<meta name="twitter:card" content="summary" />

이 부분은 트위터에서 보여줄 카드의 형식으로 content 안의 값으로는 'summary', 'summary_large_image', 'player' 등이 들어갑니다.

보통은 요약 형식의 카드 타입인 summary로 하시면 됩니다.

 

제가 알기론 오픈그래프와 트위터카드는 보통 head 안에서도 가능한 상단에 작성해 주는 것이 좋습니다. 그 이유는 검색봇이 문서를 위에서부터 아래 방향으로 읽기 때문에 상단부분에 작성해주면 속도에 아주 미세하게나 도움이 된다고 하네요. 

오픈그래프와 트위터카드에 대한 더 자세한 내용을 알고싶다면 아래의 링크를 참조하세요 :D

 

참고 링크

오픈그래프 : https://ogp.me/

트위터카드 : https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards