웹사이트 링크 프리뷰 Open Graph Protocol
페이스북에서 링크를 공유하면 나오는 이미지 와 텍스트는 어떻게해서 나오는건지 알아보고자 합니다.
들어가기전에
- 링크 미리보기는 무엇인가?
- Open Graph이란?
- 테스트해보고 싶다면?
- 써서 발생되는 이점은 무엇인가
- 조금더 생각해볼점
1. 링크 미리보기는 무엇인가?
Medium 사이트를 페이스북이나 카톡같은 다른 공간에서 링크 공유하려고 합니다. 이때 링크 정보만을 표현해 준다면 해당 내용을 알기 어려우므로 이미지와 제목 그리고 설명 등을 함께 표현하면 사용자가 조금 더 쉽게 사이트 정보를 알 수 있어 사이트에 접근하기 쉽게 해줄 수 있습니다.
2. Open Graph Protocol이란?
페이스북에서 최초로 정의한 메타 태그 규약입니다. 웹페이지의 정보를 찾을때 점점 더 복잡해서 정보를 얻기 어려워집니다. 특정정보를 웹사이트에서 미리 간략하게 정리하여 정리해두면 일관된 정보를 전달할 수 있다는 장점이 있습니다. 물론 해당 데이터 외에도 각 업체의 알고리즘에 따라더 많은 정보를 수집하는 경우도 있습니다. http://ogp.me
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.
Metadata를 <head> 영역에 추가하면 페이스북 bot이 해당 Metadata를 읽어서 내용을 표시할 수 있습니다. 기본적인 Metadata는 아래와 같습니다.
- og:title : 전달할 제목
- og:type : 전달할 데이터의 video나 image website등의 타입
- og:image : 전달할이미지의 주소
- og:url : 전달할사이트 주소
실제 코드는 아래와 같이 입력합니다.
<head>
<meta property=”og:title” content=”제목” />
<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”http://주소" />
<meta property=”og:image” content=”http://이미지.jpg" />
</head>
3. 테스트해보고 싶다면?
og:meta 태그는 서버에게 전달하는 정보이지 직접적으로 웹페이지에서 사용되는 정보는 아닙니다. 때문에 og:meta 태그는 따로 정의하여야하며, 이미 사용중인 title이나 img들을 사용해도 무관합니다. 만약 meta 태그를 적용하였고 해당 내용을 확인해보고 싶다면, 페이스북에서 친절하게 디버그 사이트를 만들어 두었으므로 직접 해당내역을 확인해볼 수 있습니다.
개발자 도구 : https://developers.facebook.com/tools/debug/
해당 내역을 사용해보려면 페이스북에 가입되어있는 id가 필요합니다.
4. 써서 발생되는 이점은 무엇인가
앞서 말한것처럼 링크 프리뷰에 알맞는 이미지와 제목을 부여해 줄 수 있는것이 큰장점이 됩니다. 서버에서 매우 작은 이미지를 가져가 미리보기시 이미지가 변형되는 문제들이 많이 없어지며, 사용자가 궁금해할만한 임의의 제목을 부여하여 사이트의 접속률을 높힐수 있다는 장점이 있습니다.
특히 마케팅으로 유용하게 쓰일수 있으며, 링크가 아무리 복잡하게 되어있어도 정확한 정보를 전달할 수 있다는 장점이 있습니다. 특히 앱 다운로드 링크를 공유할때 매우 유용해 보입니다.
5. 더 생각해볼점
Html에서 공식적으로 지원하는 기능은 아닌만큼 각 업체별로 조금씩 다를수 있습니다. 특히 트위터에서는 해당 기능에 내용을 더 추가한 프로토콜을 사용합니다. 만약 다른 기업의 링크 프리뷰를 지원해야한다면 해당내역에 맞게 정보를 추가하여야합니다. 하지만 Open Graph Protocol의 사용률이 점점 더 늘어나는 만큼 지원하는 기업들이 더 늘어날것으로 보입니다.
실제로 링크를 공유받는 사이트나 앱에서 해당 기능을 지원 혹은 개발 해야 볼 수 있다는 점에서 추후 꼭 표준으로 등록되었으면 하는 바람입니다.
