-
meta og 태그에 대한 오픈그래프 알기 : 마이구미오픈 API 2016. 7. 10. 16:45반응형
이번 글에서는 og 태그에 대해 알아볼 것이다.
이 글을 쓰게 된 동기는 어느 날 네이버 지식인에 이런 질문이 올라왔다.
일단 meta 태그란 무엇인가?
HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있습니다
또한 브라우저나 검색 로봇에게 해당 페이지의 정보를 알려주는 기능이 있다.
그리하여 아예 직접적으로 meta 태그를 이용하여 표기해준다.
큰 이유는 기술이 발전해도 웹 문서와 같은 비정형적인 정보를 100% 인식하기가 어렵단다.
이 표기방법 중 페이스북의 오픈그래프 프로토콜을 사용하는 것이 og 태그이다.
오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다.
그 간편함으로 인하여 현재는 그 창시자인 페이스북은 물론이고, 네이버 블로그, 카카오톡 등에서도 널리 사용하고 있습니다.
위의 이미지가 작동하는 흐름이다.
구체적으로 설명한다면.
아래와 같은 소스로 페이지를 만들었다고 가정하자.
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <meta property="og:image" content="이미지"/> <meta property="og:url" content="유알엘"/> <meta property="og:description" content="디스크립션"/> <meta property="og:title" content="타이틀"/> </head> <body> 바보 </body> </html>
네이버 블로그나 페이스북을 통해 해당 URL을 입력하면 아래와 같은 이미지가 나올 것이다.
네이버와 페이스북은 링크를 확인하여 크롤러를 통해
링크 URL로 미리 방문을 하여 og 태그의 정보를 가져와 그 정보들을 통해 위와 같이 생성할 수 있게 해준다.
여기서 조금 더 나아가 한 가지 더 설명하고자 한다.
네이버, 페이스북, 카카오 등 각 크롤러들은 링크의 페이지를 긁어갈 때 정적인 데이터를 긁어간다.
무슨 말인가? 아래 소스를 보자.
<script> $('meta[property=og\\:image]').attr('content', "http://mud-kage.kakao.co.kr/14/dn/btqdB2Lx9YA/KQuWZq9sioJrQmMnuq4I71/o.jpg"); $('meta[property=og\\:title]').attr('content', "바보탱이"); $('meta[property=og\\:url]').attr('content', "http://test.livere.co.kr/BDDtest/junghyun2.html"); $('meta[property=og\\:description]').attr('content', "우키키"); </script>
이와 같이 자바스크립트를 통해 content를 변경하고 싶을 때는 반영되지 않는다.
방법이 있다하여도 네이버,페이스북,카카오 등의 서비스의 캐시를 털어줘야하기 때문에 힘들다.
자세한 이유는 아래 링크를 참고하자.
참고한 자료
http://blog.ab180.co/open-graph-as-a-website-preview/
og 태그 content 변경 이슈
http://stackoverflow.com/questions/7054217/changing-facebook-meta-tag-content-attribute-using-jquery
반응형'오픈 API' 카테고리의 다른 글
SOAP? REST? REST API? 무엇인가? :: 마이구미 (6) 2016.09.02 Daum 맞춤법 API :: 마이구미 (0) 2016.08.07 Daum 블로그 글쓰기 API 업데이트 :: 마이구미 (2) 2016.07.03 글쓰기 API 유입수 늘리기 [openAPI] :: 마이구미 (0) 2016.07.02 카카오 프로필 업데이트 안되는 현상 :: 마이구미 (1) 2016.06.27
