개요
카카오톡, 페이스북 등 sns에 링크를 공유했을 때, 위 그림과 같은 미리보기가 나올려면 HTML 파일에 따로 작업이 필요하다.
HTML에 og태그를 추가해 미리보기에 사용되는 사진, 제목, 설명을 지정한다.
og(open graph) 태그
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="현재 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />위 태그를 HTML의 <head>~</head>사이에 위 태그를 추가한다.
주의점
og태그를 수정해도 미리보기가 수정되지 않고, 이전에 작성한 og태그가 적용되는 경우가 발생한다.
이는 sns에서 이미 공유된 링크들의 og태그들을 저장해 놓고, 저장해 놓은 정보들을 보여주기 때문에 업데이트가 되지 않은 것이다.
따라서 og태그를 업데이트하기 위해서는 우리가 따로 아래 sns사이트에서 og태그를 초기화 해줘야한다.
페이스북: https://developers.facebook.com/tools/debug/
카카오톡: https://developers.kakao.com/tool/clear/og
Source
'Language > HTML & CSS' 카테고리의 다른 글
| [CSS] 구글 웹 폰트 적용하기 (0) | 2022.07.01 |
|---|---|
| [HTML & CSS] [스파르타코딩클럽 웹] HTML & CSS 기초 (0) | 2022.07.01 |