카카오톡 URL 공유시 미리보기 meta 정보 등록하기 // 카카오톡 OG(Open Graph) 캐시 삭제하기 / 초기화 하기

티스토리 뷰

Html,Css

카카오톡 URL 공유시 미리보기 meta 정보 등록하기 // 카카오톡 OG(Open Graph) 캐시 삭제하기 / 초기화 하기

YG - 96년생 , 강아지 있음, 개발자 희망 2022. 3. 16. 18:55

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

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

'Html,Css' 카테고리의 다른 글

앞으로 10일 간 틈틈히 도전해 볼 심리테스트 사이트 ! (0)	2021.06.03

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

티스토리 뷰