인터넷 링크복사 시 "이미지와 설명" - OpenGraph

👀 개발자라고 IT정보를 많이 아는 것은 아니다. 

내 직업이 개발자라는 이유로 알지도 못하는 "분야"의 질문을 받을 때가 종종있다. 특히 인터넷 서핑하다가 궁금한 웹환경을 물어보는 사람들이 있는데, 그건 웹개발자들(frontend)의 영역이지 System이나 Framework,  Embedded를 개발하다 Mobile App으로 전향해 먹고사는 사람에게 질문할 내용은 아니다. 지인중 누군가 "카카오톡에 링크걸었더니 그림나오던데 이것 어캐해?"라고 물어보았다. 답변을 1.756432 sec만에 "니 눈에는 내가 알 것 같이 보이냐?"라고 했다.

---

 

"정말 모른다"
관심도 없었다. 
그런데 갑자기 관심을 가지게 되었다. 
그래서 "구글님께 기도를 드렸다"

 

그랬더니 "OpenGraph"라고 계시를 해주셨다. OpenGraph는 Facebook에서 시작된 규격으로...

 

"HTML"의 해더영역에 meta 태그를 입력하면 
링크를 표시하는 곳에서 meta 태그내용을 분석하여

"미리보여주기"를 제공하는 것

이라고 보면된다. 

Open Graph protocol

---

예로 header의 meta tag를 다음과 같이하면 된다. 

이 주소를 가지고 카카오톡에 링크를 걸면 다음과 같은 미리보기 화면을 볼 수 있다. 

 

OpenGraph를 적용한 페이지는 다음과 같다. 

crazy moringcall