본문 바로가기
코딩 관련

카톡에서 링크 보낼 때 미리보기 이미지 meta property

by 치버 2021. 2. 1.

링크를 쓰면 미리보기 이미지가 뜨는데 저것 제어.

 

<meta property="og:image" content="http://이미지 주소">

 

이것만 head에 추가해줘도 수정되긴 하는데 변경이 안 된다면

 

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

 

카카오계정 로그인

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

accounts.kakao.com

 

카카오 디벨로퍼스의 og캐시 삭제하면 제대로 수정된 걸 확인할 수 있다.

 

근데 저 사이즈가 궁금해...

어떤 곳에서 200x100이랬는데 안 바뀐다.

800*800이 최적화된 사이즈라고 한다.

(참고: https://devtalk.kakao.com/t/url/30286/4)

찾아보는 중...

 

<meta property="og:title" content="홈페이지 제목">
<meta property="og:image" content="이미지 경로"> 
<meta property="og:image:width" content="800"/>
<meta property="og:image:height" content="800"/> 
<meta property="og:url" content="홈페이지 경로"/> 
<meta property="og:site_name" content="홈페이지 이름"/> 
<meta property="og:type" content="website"/>

확인 중...

 

800*800의 png로 제작할 것. og:image:width와 height로는 제어가 잘 안 되는 듯.

og캐시까지 삭제했는데도 변경되지 않는다면 기기 캐시 문제인 듯.

(참고: https://devtalk.kakao.com/t/og-url/89714)

PC카톡을 계속 확인해도 안 바뀌던데 모바일로 확인하니 변경된 걸 확인할 수 있었다.

'코딩 관련' 카테고리의 다른 글

<meta>태그  (0) 2021.02.03
css 효과들(button/nav/image/text/animation)  (0) 2021.01.28
에디트플러스 tpl 파일 색상 적용하려면...  (0) 2021.01.11
미디어쿼리 요약  (0) 2021.01.05
체크박스 만들기  (0) 2020.11.10

댓글