여러분들 카카오톡에 링크 공유할 때 공유하는 사이트의 정보가 나오는 거 한 번쯤 보셨죠??
요즘은 친구들과 링크를 공유하는 일이 꽤나 많이 있는 거 같아요~
공유하는 링크의 사이트가 섬네일도 안 뜨고 이상하게 뜨고 그러면... 왠지 사이트의 신뢰가 팍팍 떨어지지 않나요??
그래서 이번에 내가 운영하는 홈페이지의 링크를 카카오톡으로 보냈을 때 나오는 썸네일, 정보를 수정하는 방법을 알려드릴께요!!
생각보다 어렵진 않아요..
다른 SNS과 마찬가지로 카카오톡은 메타 태그 정보를 가져가서 보여주기 때문에 우리는 메타태그를 넣어주면 되요~
매타 태그를 넣어주실 때에는 <head></head>태그 사이에 넣어주시면 됩니다.
<head></head>태그 사이에 넣기 싫으신 분은 안넣으셔도 되지만....반드시 <body>태그 앞에 있어야 합니다.^^
<meta property="og:type" content="website">
<meta property="og:url" content="사이트URL">
<meta property="og:title" content="사이트 제목">
<meta property="og:description" content="간단 설명">
<meta property="og:image" content="이미지 경로">
위와 같은 태그들이 사용되는데요.
많은 메타 태그 중에 오픈그래프가 사용됩니다. 오픈그래프가 뭘까요?
오픈그래프란??
기존의 웹사이트를 소셜네트워크 서비스와 연동하여 사업자와 고객들과의 관계를 강화하고 마케팅 플랫폼으로 활용하는 기법. 신규고객 확보나 차별화된 사용자경험(UX)을 고객에게 제공할 수 있으며 외부 유입 트래픽을 증대하거나, 입소문(구전) 효과, 마케팅 홍보 채널의 활용, 고객과의 관계 강화나 신뢰도 증가, 고객에게 차별화된 쇼핑경험을 제공할 수 있는 기법이다.
[네이버 지식백과] 오픈 그래프 [Open Graph] (IT용어사전, 한국정보통신기술협회)
굉장히 중요한 태그들 같지 않나요? 오픈 그래프를 설정해주면 페이스북이나 다른 소셜들에도 사용이 되어요~
그렇다면 어떻게 사용해야 할까요? 제가 이미지에 사용한 디벨로드 사이트의 경우를 예로 아래와 같이 적용을 해주었어요~~
<meta property="og:type" content="website">
<meta property="og:url" content="http://deveroad.kr">
<meta property="og:title" content="디벨로드">
<meta property="og:description" content="Road to Development">
<meta property="og:image" content="http://deveroad.kr/img/kakao_logo_deveroad.png">
대충 느낌이 오시나요?ㅎㅎ
각 태그가 어디에 사용되는지 이미지에 표시를 해본다면...아래와 같아요~
위에 표시한 것처럼 각각 위치에 해당 태그들의 값이 사용되어요~
5개 중에 3개만 사용되지만 메타태그는 쓸수 있는건 최대한 많이 써주는게 좋아요
메타태그는 검색엔진에도 중요한 역활을 하기 때문이에요~
자!~ 그럼 카카오톡 링크 이미지 표시하는 방법에 대한 설명이 끝났으니 끝이 아니죠...ㅎㅎ
과연 이미지 사이즈는 어떻게 해야하는가??
사실 이미지 사이즈가 굉장히 중요합니다.
힘들게 메타태그 추가해서 설정을 해준다 해도 사이즈가 맞지 않으면 정말 안이쁘게 나오거든요...
이미지에 보시는건 사이즈가 틀린건 아니고 메타태그 자체를 설정 안해준건데요.
메타태그 설정을 안해주다보니 카카오톡이 사이트에 있는 이미지를 맘대로 가져와서 보여주는 거에요
사이즈가 안맞다보니 이미지가 잘려서 보여요.
그러니 이왕 설정해줄꺼라면 이미지 사이즈도 제대로 맞춰서 해주자구요~~~
카카오톡에 표시되는 이미지의 사이즈는~~~~~~~
가로 : 400px, 세로 : 210px 입니다.
사이즈를 반드시 참고하셔서 이미지 이쁘게 올려주시면 될 것 같습니다.^^
이번에 카카오톡 링크 공유할 때 표시되는 미리보기 화면 설정하는 방법을 알아보았습니다.
맘에 드셨다면 좋아요!! 댓글!! 한번씩만 해주시면 너무 감사드릴께요!~~
다음 포스팅에는 더 알찬 꿀팁으로 찾아뵙도록 하겠습니다.^^
*썸네일 : 웹에서 한눈에 알아볼수 있도록 작게 줄여 화면에 띄운 이미지
*메타태그 : HTML문서에 대한 색인정보 즉, 키워드와 약간의 정리된 내용(콘텐츠)을 표현하는 HTML 태그
'Web > HTML' 카테고리의 다른 글
| 파비콘(ico 파일) 홈페이지에 적용하기 | HTML LINK 태그 (4) | 2021.08.23 |
|---|