SNS를 통해 사이트가 공유될 때, 사이트에 대한 메타정보를 보여주기 위한 태그
오픈그래프(Open Graph) 프로토콜은 HTML 문서내의 **og:**로 시작하는 메타태그를 찾아내여 보여주는 프로토콜(규율,약속)이며 페이스북에서 개발하였습니다.
SNS(카카오톡, 페이스북, 트위터, 인스타그램 등)에서 사이트의 정보를 표시할 떄 사용되는데, 만약 메타태그를 지정안할 경우 직접 크롤링하여 표시하게 됩니다. 그렇게되면 본 사이트의 의도와 다르게 표시될 가능성이 높으니 사이트를 만들때는 넣어주는 것이 좋습니다.
Title, Image 등을 표시하는 오픈그래프 예시
기본(Basic Metadata)
| og:title | 웹사이트 제목 |
|---|---|
| og:type | 웹사이트 종류 |
| og:image | 대표 이미지 |
| og:url | 웹사이트 정식 URL |
| og:description | 오브젝트에 대한 설명 |
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="<https://www.imdb.com/title/tt0117500/>" />
<meta property="og:image" content="<https://ia.media-imdb.com/images/rock.jpg>" />
https://chromewebstore.google.com/detail/gcbnmkhkglonipggglncobhklaegphgn?hl=ko
이거 사용하면 로컬환경에서도 og태그 테스트 가능 → 로컬호스트 페이지에서 확장프로그램 클릭하면 프리뷰 링크가 나온다. (근데 이미지는 안 나오니 텍스트만 테스트 하고 이미지는 직접 배포하며 테스트 하기)