HTML) Meta Tag ... OG(오픈그래프) 설정

카카오톡에 링크를 공유했을 때 나오는 미리보기를 Meta Tag 의 og 를 이용하여 설정할 수 있다.

 

<meta property="og:type" content="website" />
<meta
  property="og:url"
  content="https://parispoly137.github.io/react-crypto_tracker/"
/>
<meta property="og:title" content="Crypto Tracker" />
<meta
  property="og:image"
  content="https://img.sbs.co.kr/newimg/news/20220720/201683995_1280.jpg"
/>
<meta
  property="og:description"
  content="A site that shows a list of coins and shows charts and prices by calling the real-time market price of each coin."
/>
<meta property="og:site_name" content="Crypto Tracker" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

 

 

# 양식

 

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">

<!-- 다음의 태그는 필수는 아니지만, 포함하는 것을 추천함 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

 

 

 

* index.html 의 head 태그 안에 정의한다.

 

---

만약 설정했는데 카카오톡에서 미리보기가 제대로 나오지 않는 경우,

 

https://developers.kakao.com/tool/debugger/sharing

 

위의 kakao developers의 공유 디버거에서 캐시 초기화를 하면 된다.

 

---

참고)

 

- https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

- https://imweb.me/faq?mode=view&category=29&category2=47&idx=70639