[용어정리] OG(Open Graph)의 개념과 쓰임

카카오톡이나 인스타그램으로 특정 링크를 공유할 때가 있다.

아래와 같이 네이버 날씨를 공유했을 때, 링크에 대한 일종의 미리보기 화면이 생성된다.

 

이를 OG(open graph) 라고 한다. 오픈 그래프란 무엇이며 이는 어떻게 설정할 수 있고 왜 사용하는지 알아보자.

 

 

💡 OG(open graph)란

메타정보에 해당하는 제목, 설명, 이미지 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이다.

OG태그를 통해 웹사이트를 마크업하여 콘텐츠가 표시되는 방식을 관리할 수 있고 마케팅 효과를 불러올 수 있다.

 

OG데이터는 메타데이터(meta태그)에 오픈그래프(OG)로 지정되어 있는 제목, 설명, 이미지 등의 정보를 긁어와 표시한다.

작동원리의 이해를 돕기 위해 브라우저에 네이버 날씨를 띄운채로 개발자 도구에 들어가보자.

 

 

우측에 마킹해둔 부분과 같이 HTML에 meta태그로 설정되어 있는 것을 확인할 수 있다.

 

💡 더 알아보기

1. meta태그(meta데이터)란 무엇인가요?

브라우저나 검색로봇 등이 이해할 수 있도록 가공되어 있는 정보가 메타 데이터라고 생각하면 됩니다.

콘텐츠의 위치와 내용, 작성자에 관한 정보, 권리 조건, 이용 조건, 이용 내력 등을 기록할 수 있습니다. 이를 이용하여 사용자는 자기가 원하는 특정 데이터(정보)를 검색엔진 등으로 쉽게 찾아낼 수 있습니다. 어떠한 키워드로 특정 데이터를 추출하거나 그 자료들을 편집할 수 있는 것도 메타데이터의 기능입니다.

우리가 익히 쓰고 있는 HTML도 meta데이터를 사용합니다.

 

2. OG 속성을 수정했는데 반영이 되지 않습니다.

이유는, 캐싱(Cashing) 때문입니다.

캐싱(Caching)이란 반복적으로 호출되는 특정한 데이터를 캐시 메모리에 임시로 저장하여 다음 호출 때 더 빨리 해당 데이터를 공급해주는 기능입니다.

캐싱에는 소멸시효가 걸려 있는데, 소멸 전까지는 계속해서 이미 캐싱된 데이터를 갖고 오기 때문에 발생하는 현상입니다.

페이스북이나 카카오톡에서는 이를 강제로 리로드 할 수 있는 링크를 공유하고 있습니다.

• 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
• 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og