OG(Open Graph)태그란?

og (Open Graph) 태그

오픈 그래프 마크업

대부분 콘텐츠는 URL로 Facebook등의 SNS에 공유되는데, Facebook에 콘텐츠가 표시되는 방식을 관리하기 위해 오픈 그래프 태그로 웹 사이트를 마크업하는 것이 중요합니다.
이러한 태그가 없으면 Facebook 크롤러에서 내부의 경험적 접근법을 사용하여 콘텐츠의 제목, 설명, 미리보기 이미지에 대해 가장 현실성 높은 추측을 내립니다.
Facebook에 게시물이 가장 최적화된 품질로 표시될 수 있도록 오픈 그래프 태그를 사용하여 이 정보를 명시적으로 지정합니다.

 

다음은 Facebook에 최적화되어 표시되도록 오픈 그래프 태그로 형식화된 콘텐츠의 예시입니다.

 

og:url

url입니다. 링크될 URL을 지정하시면 됩니다.

 

og:type

타입을 지정합니다. 웹인지 앱인지 등등

 

og:title

해당 링크의 제목입니다. 카톡에서 가장 굵고 큰 글자로 보이겠죠

 

og:description

설명입니다. 제목 아래 설명글씨로 주저리 담깁니다.

 

og:image

썸네일 이미지입니다.- http:// 부터 시작하는 절대 주소로 남기셔야 합니다.

 

ex)

<meta property="og:url" content="http://www.helchang.com"/>
<meta property="og:type" content="website"/>

<meta property="og:title" content="헬창닷컴"/>

<meta property="og:description" content="헬창닷컴 - 헬창베스트, 대회 행사일정, 운동, 영양소, 유머"/>

 

SNS등의 공유버튼으로 생겨난 태그로서 지금은 필수적인 사이트의 메타 정보가 되었습니다.

만약 OG태그가 없는 사이트는 각 시스템에서 알아서 대표 정보를 찾아서

나름의 정보를 만들어 미리보기를 표시합니다.