오픈 그래프(open graph): 링크의 미리보기를 결정하기

 

 

페이스북, 네이버 블로그, 카카오톡에서 링크에 대한 미리보기 제목, 설명, 이미지를 표현할 때 사용한다.

 

HTML 문서의 head와 메타정보

 메타 데이터들은 HTML 태그에 담겨있습니다.  크롤러도 하나의 소프트웨어 프로그램인지라 HTML 문서를 보면 자동으로 무엇이 제목인지, 무엇이 내용에 대한 3줄 요약인지, 무엇이 대표 이미지인지 100% 자동으로 판별하기 아주 어렵습니다. 따라서 웹사이트가 직접 저렇게 적어서 알려줘야 하는 것입니다. (아무리 머신러닝, 딥러닝, 자연어처리 기술이 발전해도 웹문서와 같이 비정형적인 정보에 대한 100% 정확도의 의미 인식은 불가합니다.)

 

 이런 메타 데이터를 표기하는 방법에 대한 기본 방법(기본 HTML5 title, description 태그 등)을 제외한 제 3의 방법 중 비교적 통일되고 인정된 방법으로서 우리가 알아보고자 하는 페이스북의 오픈그래프(Open Graph) 프로토콜이 있고, 이 오픈그래프 프로토콜이 우리가 보는 미리보기 화면의 실체를 구성하는 메타 데이터 표기방법입니다.

 

 

 우리가 미리보기를 통해 보는 제목, 설명, 이미지는 이렇게 HTML 문서의 head에 표기된 오픈그래프 프로토콜에 의해서 나타나고 있습니다. 그 구체적인 작동 원리는 아래와 같습니다.

1. 사용자가 링크를 입력창에 입력합니다.
2. 페이스북, 네이버 블로그, 카카오톡은 입력창의 문자열이 "링크"라는 것을 파악합니다. (흔히 말하는 정규표현식으로 해당 문자열이 링크라는 것을 알아냅니다.)
3. 링크라는 것이 파악되면 페이스북, 네이버 블로그, 카카오톡의 크롤러는 미리 그 웹사이트를 방문해서 HTML head의 오픈그래프(Open Graph) 메타 데이터를 긁어옵니다.
4. 이중에서도 og:title, og:description, og:image가 각각 제목, 설명, 이미지의 정보를 나타냅니다.
5. 그리고 그 정보를 바탕으로 미리보기 화면을 생성해주게 됩니다.

 

개발자는 고쳤다는데, 왜 미리보기가 바뀌지 않았을까?

프로그래밍의 세계에서 캐싱(Caching)은 반복적으로 호출되는 특정한 데이터를 캐시 메모리에 일종의 "임시"로 저장하여 다음 번에 호출될 때 더 빨리 해당 데이터를 공급해주는 것을 말합니다.

구체적으로는 데이터베이스에 저장된 어떤 정보를 한 번 불러온 후 캐시 메모리에 저장해놓거나, 어떤 HTML, CSS, JavaScript로 이뤄진 웹문서 전체 혹은 이미지 전체를 캐싱하기도 합니다. (전자에는 Memcached, Redis와 같은 시스템들이, 후자는 흔히들 "CDN"이라고 부르는 시스템들이 속할 것입니다.)

 

우리가 보는 모든 현대적인 웹서비스들, 앱들에는 이러한 캐싱 시스템이 구축되어 있습니다. 페이스북이나 네이버 블로그, 카카오톡 또한 예외가 아닙니다. 사용자들 입장에서는 더 빨리 웹사이트나 이미지가 로딩되서 좋고, 서비스측에서는 데이터베이스 구동에 들어가는 막대한 서버 자원을 절약할 수 있어서 좋습니다.

 

일반적으로 이런 캐싱에는 TTL(Time-to-Live)라는 소멸시효가 걸려있는데, 이 소멸시효가 지나지 않은 경우 계속적으로 이미 캐싱된 데이터를 참조해서 불러올 수 있습니다. 따라서 실제로 서버에서 내려주는 HTML 웹문서 상의 오픈그래프는 바꼈을지라도, 이미 캐시된 웹문서가 내려지고 있는 상황일 수 있습니다. 즉, 저 TTL이 만료되기 전까지는 아무리 본 서버에서 개발자가 다시 개발해줘도, 미리보기는 바뀌지 않을 것입니다.

 

이 경우 페이스북은 다행히 캐싱을 리로드할 수 있는 버튼을 "Sharing Debugger"를 통해서 지원하고 있습니다.

 

따라서 반드시 아래와 같이 하시길 바랍니다.

1. og:title, og:description, og:image를 HTML의 head에 반드시 넣고, 제대로 반영되었는지를 "Sharing Debugger"를 통해서 확인한다.
2. 실제로 카카오톡, 페이스북, 네이버 블로그 등 사용하고자 하는 마케팅 채널에 링크를 넣고 미리보기 화면을 확인한다. (실제 보여지는 이미지가 사이즈가 각 서비스마다 다르기 때문에 반드시 주의할 것)
3. 가능하다면 A/B 테스팅을 통해서 어떤 문구나 이미지가 가장 좋은 효과를 보이는지 확인한다.

 

 

출처: blog.ab180.co/posts/open-graph-as-a-website-preview