카카오 og 이미지 - kakao og imiji

Question

카카오톡으로 이미지, 사이트 제목 , 설명등을 공유하고 싶을 때가 있는데 방법을 소개해드리려고 합니다

목차 Show

1. OG(Open Graph), 오픈그래프
2. 프로젝트에 적용해보기
오픈그래프(Open Graph)란?
오픈그래프 설정 방법
카카오톡에서 반영이 안되는 경우

1. OG(Open Graph), 오픈그래프

- 오픈그래프는 페이스북이 기존의 메타 데이터 표기방법을 참조하여 만들었습니다.

- 어떠한 HTML 파일의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 이미지 등 다양한 요소들을 통일해서 사용할 수 있도록 정의해놓은 프로토콜 입니다.

오픈그래프 기본 태그
- og:title - 사이트의 제목
- og:type - 사이트의 종류 예) website
- og:image - 사이트를 나타낼 대표 이미지(미리보기 이미지)
- og:url - 사이트의 대표 url

2. 프로젝트에 적용해보기

- 오픈그래프를 적용하기 위해서는 웹 서비스가 필요하다.(즉, 로컬개발에서는 확인이 어렵다.)

- 웹서비스에서 등록된 html 파일에서 <head></head> 태그 안에 아래와 같이 meta 정보를 추가한다.

- 리액트의 경우 index.html 에 추가해주면 된다. helmet으로는 안됨.

<head>
  <!-- meta -->
  <meta property="og:url" content="공유시 이동 url">
  <meta property="og:title" content="공유시 보여질 제목">
  <meta property="og:type" content="website">
  <meta property="og:image" content="공유시 보여질 이미지 경로">
  <meta property="og:description" content="공유시 보여질 설명">
</head>

  <title>월드컵 프로젝트</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap"
      rel="stylesheet"
    />
    <meta property="og:url" content="https://project-worldcup.netlify.app/" />
    <meta property="og:title" content="월드컵 프로젝트!!" />
    <meta property="og:type" content="website" />
    <meta
      property="og:image"
      content="https://user-images.githubusercontent.com/80146176/158144798-1619f8e7-d408-4c6e-8afc-f1372a38a074.png"
    />
    <meta property="og:description" content="다양한 월드컵에 참여해주세요" />
  </head>

3. 먼저 meta를 동록하기 전 카카오톡에 미리 테스트해보았을 때 메타를 다시 등록하고 배포하여도 카톡에 공유시 이미지나 기타 정보가 변경이 안되었다면, 이는 카카오 서버에 페이지의 정보가 아직 캐싱되지 못한 것입니다. (카카오에서는 빠르면 1시간 이내 최대 24시간 이내에 적용 시간이 걸린다고 합니다.)

카카오 개발 사이트에서 직접 초기화를 할 수 있습니다. 해당되는 사이트를 입력해 초기화 하시면 됩니다

https://developers.kakao.com/tool/clear/og

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

참고 사이트

https://dev-jwblog.tistory.com/48

[HTML] 카카오톡 URL 공유시 미리보기 meta 정보 등록하기

카카오톡을 통해서 어떠한 정보를 공유하기 위해서 URL을 공유하는 일이 많이 있다. 카카오톡에 URL을 공유하게 되면 위의 그림과 같이 썸네일 이미지와 제목, 내용 등을 보여주게 되는데, 이는

dev-jwblog.tistory.com

카카오톡에서 링크를 공유할 때 등장하는 이미지를 보통 메타태그 og:image를 통해서 변경하는데 새로운 이미지를 적용하고 난 후 이전 캐쉬에 저장된 정보를 삭제해줘야 변경된 이미지가 적용되어 나온다.

https://developers.kakao.com/tool/clear/og

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

카카오톡 개발자 홈페이지에서 이전 캐쉬를 삭제하는 간단한 기능을 제공한다.

원하는 URL을 입력하고 요청을 누르면 캐쉬를 자동 삭제시켜준다.

오픈그래프(Open Graph)란?

오픈 그래프 프로토콜은 특정 HTML 문서의 정보(제목, 설명, 문서 타입, 대표 URL 등)를 통일해서 사용할 수 있도록 페이스북이 개발한 프로토콜이다.

아래와 같이 SNS에서 링크를 공유할 때 뜨는 이미지와 제목 및 설명 등을 오픈그래프를 통해 설정할 수 있다.

오픈그래프 설정 방법

기본적으로 많이 쓰이는 오픈 그래프 요소

// 사이트 제목
<meta property="og:title" content="기록하는 삶📚" />

// Type
<meta property="og:type" content="website" />

// 대표 url 
<meta property="og:url" content="https://jiineeee.tistory.com/" />

// 이미지. 이미지 사이즈는 410x200px 을 권장한다.
<meta property="og:image" content="https://i1.daumcdn.net/thumb/C264x200/?fname=https://tistory2.daumcdn.net/tistory/3454287/skinCover/199033df9674456f9121c367ba463d76" />

추가적인 요소들에 대해 알아보고 싶은 경우, 아래 사이트를 확인해보면 된다.
https://ogp.me/#optional

Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

ogp.me