종종 공유하기 버튼이 들어가는 이벤트 페이지를 개발하면, 클라이언트가 특정 이미지가 공유되길 원할 때가 있다.
그럴 때 수정하는 곳이 og 태그.
<head> 태그 안에 작성해주면 된다 !!
<meta property="og:title" content="제목">
<meta property="og:description" content="간단한설명">
<meta property="og:image" content="이미지URL">
<meta property="og:url" content="공유될URL">
<meta property="og:type" content="웹페이지유형">
예제 ) 내 티스토리 블로그 를 공유했을 때
1. og 태그란
- 오픈그래프 프로토콜을 의미 (창시자는 페이스북이라고 한다)
- 메타태그의 property가 og로 지정되어 있는 정보를 긁어올 수 있다.
즉, 사용자가 페이지에 진입하기 전에 미리보기용 정보를 가져올 수 있게 하는 태그다.
보통 title, image, description, url을 설정한다.
image의 크기는 최소 6060x315px , 1.91:1의 비율, 권장 사이즈는 1200x630px이라고 하는데,,
이미지 크기 관련해서는 https://ogp.me/ <- 이 페이지에서 찾아봤는데 권장사항과 같은 내용은 딱히 나오지 않았다. 구글링한 내용임.
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
위의 페이지를 참조해보면 생각보다 쏠쏠한 내용이 많았당!
og:image를 여러개 설정할 수 있다는 점, image 태그 아래에 이미지 크기를 직접 설정하도록 할 수 있다는 점 등등 제대로 사용하기 위해 한번 쯤 읽어보면 좋을 것 같다.
2. og 태그 갱신 관련
og 태그 내용을 수정해도 실시간으로 반영이 안되는 경우가 있는데, 보통 공유하기 테스트를 카카오톡으로 하기 때문에
나 역시도 카카오로 수정테스트를 해봤는데 수정사항이 반영되지 않았다.
카카오톡의 공유 디버거를 통해 카카오톡 측에서 캐싱하고 있는 og 정보를 초기화 및 확인할 수 있다.
* 공유디버거 내용 참조
https://devtalk.kakao.com/t/topic/113915
오픈 그래프 갱신이 안됩니다
안녕하세요 cafe24를 운영하고 있는관리자 입니다. 최근 메타태그를 활용하여 오픈 그래프 이미지를 수정했는데 다른 사이트에서는 수정된 이미지로 잘 적용되었음에도 불구하고 매번 캐시를 삭
devtalk.kakao.com
'웹개발지식쌓기' 카테고리의 다른 글
| [front] 브라우저 탭 아이콘 적용하기 (favicon) (0) | 2024.02.02 |
|---|---|
| [back] 자바의 직렬화 (Serialzation : implements Serializable) (0) | 2024.02.01 |
| [front] Uncaught TypeError: object.function is not a function (jQuery와 javascript, node 가져오는 방법의 차이) (1) | 2024.01.30 |
| [front] disabled 가 아닌 노드 찾기 (0) | 2024.01.30 |
| [front] $(document).ready(function(){}) 자바스크립트 버전? (0) | 2024.01.30 |
