Open Graph 설정하기 (카카오톡 공유 설정)

조뮁·2023년 1월 31일

React

목록 보기
34/34

1. 카카오톡 공유 시 썸네일, 제목, 설명 영역 설정하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="나만의 감정일기장"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
	<!-- 썸네일 설정 -->
    <meta property="og:image" content="%PUBLIC_URL%/thumbnail.png"/>
    <!-- 제목 설정 -->
    <meta property="og:site_name" content="감정 일기장" />
    <!-- 설명 설정 -->
    <meta property="og:description" content="나만의 작은 감정 일기장" />
    ...
  </head>
</html>

2. 카카오 Open Graph 캐시 초기화

https://developers.kakao.com/

  • 여기서부터는 강의 내용과 조금 달라서 검색해서 따로 진행

도구>디버거 도구>공유 디버거

  • URL 입력칸에 내 도메인 주소 입력 후 디버그 선택
  • 현재 적용되어있는 캐시 정보가 나옴
  • 캐시 정보 확인 후 캐시 초기화 선택
  • 캐시 초기화 및 새 정보 반영 확인

profile
조뮁
이전 포스트

프로젝트 배포 (firebase)

0개의 댓글