Open Graph Element

OpenGraph

• Facebook에서 만든 Internet Protocol

• 웹페이지의 컨텐츠를 보여주는 표준화된 메타데이터 양식

• 웹 페이지의 제목, 설명, 썸네일 이미지 등의 컨텐츠를 축약하여 카드 형식에 담아 공유된다.

• 일반 링크 텍스트와 비교해서 더욱 더 사용자의 관심을 끌고 클릭을 유도하게 된다.

기본적인 OG tag

• og:title → 페이지 제목, 일반적으로 title 과 동일한 내용 표시

• og:type → 웹 사이트 유형

• og:image → 컨텐츠를 표시하는 이미지 (썸네일)

• og:url → 현재 페이지 URL

OG type 유형

• https://github.com/niallkennedy/open-graph-protocol-examples

• 웹 사이트는 어떤 컨텐츠를 제공하냐에 따라 여러 유형으로 나뉨 (웹사이트, 아티클, 음악, 영상)

• 각 유형에 맞는 메타태그를 함께 제공하여 웹 사이트가 어떤 컨텐츠를 보여주고자 하는지 정의

부가적인 OG tag

• og:description → 페이지 설명

• og:locale → 태그의 현지화. ko_KR

• og:site_name → 컨텐츠가 존재하는 웹사이트 이름

• og:video → 컨텐츠가 뒷받침하는 영상이 있을 때

twitter:card

• 트위터에서 웹사이트를 표시할 때 사용

• summary

• summary_large_image

• app

• player

Og:image의 문제점

• 종횡비 깨지는 이슈 → og:image:width, og:image:height 을 이용

• 이미지가 정상적으로 그려지지 않는 이슈 → og:image:url, og:image:secure_url 이용

• 일부 SNS는 이미지의 최소 품질(사이즈, 용량)제한이 있다.

• 사전 점검 툴 → twitter, facebook, pinterest, og-preview