HTML - og(open graph) 태그 란? / 카톡,sns 미리보기 지정

---

open graph 태그란? / 썸네일, 제목 설명 등의 

---

안녕하세요. 고코더 입니다.

SNS나 카카오톡,라인 등

일상을 공유하는 커뮤니티 프로그램에서

링크를 공유하면 자연스럽게 보이는

썸네일, 제목, 설명들이 있습니다.

▼ 고코더 블로그를 카카오톡 으로 공유했을 때

나타나는 og 태그 메타 정보

해당 화면에서 보이는

제목 : "고코더의 IT Express"

설명 : "각종 프로그래밍 강의... " 

이미지: 고코더.jpg

등이 바로 open graph 태그로

노출된 정보 입니다.

▼ 제 블로그의 소스 보기를 보면

아래처럼 og 태그가 입력 되어 있습니다. 

규약 된 해당 태그를 읽고 카카오톡도 미리보기가 가능한 정보를 노출 해주고 있습니다.

▼이 규약은 페이스북에서 시작 되었습니다.

http://bit.ly/2vKOhP3

SNS의 초대형 기업이기에 

페이스북이 지정한 방법은 결국 표준이 되었다고 봐도 무방 합니다.

각 태그의 설명을 드리자면 

og:url 

- URL 입니다. 링크될 URL을 지정하시면 됩니다. 

og:type 

- 타입을 지정합니다. 웹인지 앱인지 등등

og:title 

- 해당 링크의 제목 입니다. 카톡에서 가장 굵고 큰 글자로 보이겠죠

og:description 

- 설명입니다. 제목 아래 설명글씨로 주저리 담깁니다. 

og:image 

- 썸네일 이미지 입니다. http:// 부터 시작하는 절대 주소로 남기셔야 합니다.

▼제 블로그를 기준으로 og 태그를 작성 해보았습니다.

<meta property="og:url"                content="http://gocoder.tistory.com" />
<meta property="og:type"               content="website" />
<meta property="og:title"              content="고코더의 IT Express" />
<meta property="og:description"        content="모든 IT 정보를 " />
<meta property="og:image"              content="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" />

SNS등의 공유버튼으로 생겨난

태그 입니다. 

지금은 필수적인 사이트의 메타 정보가 되었습니다.

만약 해당 OG태그가 없는 사이트는

각 시스템에서 알아서 대표 정보를 찾아서 

나름의 정보를 만들어 미리보기로 보여주게 됩니다.

---

마무리

---

웹 개발자들이 챙겨야 할게 많아지네요