본문 바로가기
IT_Developers/HTML

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

by 고코더 2018. 4. 26.

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


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

SNS나 카카오톡,라인 등
일상을 공유하는 커뮤니티 프로그램에서

링크를 공유하면 자연스럽게 보이는
썸네일, 제목, 설명들이 있습니다.

▼ 고코더 블로그를 카카오톡 으로 공유했을 때
나타나는 og 태그 메타 정보



해당 화면에서 보이는

제목 : "고코더의 IT Express"
설명 : "각종 프로그래밍 강의... " 
이미지: 고코더.jpg

등이 바로 open graph 태그로
노출된 정보 입니다.

▼ 제 블로그의 소스 보기를 보면
아래처럼 og 태그가 입력 되어 있습니다. 


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

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


SNS의 초대형 기업이기에 
페이스북이 지정한 방법은 결국 표준이 되었다고 봐도 무방 합니다.

각 태그의 설명을 드리자면 
og:url 
- URL 입니다. 링크될 URL을 지정하시면 됩니다. 
og:type 
- 타입을 지정합니다. 웹인지 앱인지 등등
og:title 
- 해당 링크의 제목 입니다. 카톡에서 가장 굵고 큰 글자로 보이겠죠
og:description 
- 설명입니다. 제목 아래 설명글씨로 주저리 담깁니다. 
og:image 
- 썸네일 이미지 입니다. http:// 부터 시작하는 절대 주소로 남기셔야 합니다.

▼제 블로그를 기준으로 og 태그를 작성 해보았습니다.
1
2
3
4
5
<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" />
cs



SNS등의 공유버튼으로 생겨난
태그 입니다. 
지금은 필수적인 사이트의 메타 정보가 되었습니다.

만약 해당 OG태그가 없는 사이트는
각 시스템에서 알아서 대표 정보를 찾아서 
나름의 정보를 만들어 미리보기로 보여주게 됩니다.


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


댓글2

  • 질문좀 2018.04.26 08:57

    og 태그 블로그 잘봤습니다
    그런데 메타 내용을 바꿔도
    카톡 링크 내용이 그대로인데
    제가 이해를 잘못하고 있는건지ㅠㅠ

    답글

    • Favicon of https://gocoder.tistory.com 고코더 2018.04.26 23:32 신고

      안녕하세요. 개발자님
      메타 내용을 잘 바꾸셨지만
      카카오톡 링크 썸네일 내용은 그대로군요.
      이런
      그래서 질문자님을 위해
      블로그를 하나 남겼습니다.
      아래 글을 확인해주세요^^

      http://gocoder.tistory.com/317

      결론은 카카오톡 캐시 서버의
      질문자님의 도메인 정보를 지워야 합니다^^