사이트 링크(url) 공유시 보여지는 섬네일 적용 방법

카톡, 메신저 등을 통하여 사이트에 대한 링크(url)를 보내게 되면 위와 같이 사이트에 대한 간략한 정보 문구와 함께 섬네일이 뜨게 된다. 여기서 보여지는 섬네일을 수정하는 방법이 있는데, 방법은 간단하다.

html 태그 상에 head 안에 있는 meta 태그를 활용하면 되는 것이다.

예컨데 아래와 같은 태그를 활용하면 되는데 사이트 주소, 제목, 섬네일 경로, 간단한 설명 등이 있다.

<meta property="og:url" content=" 사이트 주소 ">
<meta property="og:title" content="제목">
<meta property="og:type" content="website">
<meta property="og:image" content=" 섬네일 이미지 경로">
<meta property="og:description" content=" 간단설명">

위 태그를 본인 티스토리 기준으로 예시를 적용하자면

 

<meta property="og:url" content="https://blind513.tistory.com">
<meta property="og:title" content="빅범의 감성 공간">
<meta property="og:type" content="website">
<meta property="og:image" content="../img/common/thumnail.jpg">
<meta property="og:description" content="사진을 찍고, 그림을 즐기는 공간">

이러한 형태로 사용할 수 있다. 여기서 카톡, 메신저 등 url 링크 공유시 보여지는 섬네일은 og:image의 경로가 해당된다. 또한 제목과, 간단 설명도 링크시 보여지는 설명글이기 때문에 꼼꼼히 작성하길 바란다.

---

본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :) 
"당신의 하루가 별보다 빛나길"