카톡으로 홈페이지 링크를 보낼 때 뜨는 미리보기, 직접 정하는 방법

홈페이지 주소를 카카오톡이나 문자로 보내면 제목과 설명, 이미지가 담긴 미리보기 카드가 함께 뜹니다. 이 카드가 엉뚱한 사진이거나 비어 있으면, 받은 사람은 누르기 전부터 '제대로 된 곳인가' 하고 망설입니다. 이 미리보기는 홈페이지 안에 넣어 두는 정보로 직접 정할 수 있습니다.

미리보기를 정하는 세 가지 정보

미리보기는 '오픈그래프(Open Graph)'라는 약속된 형식으로 페이지에 적어 둔 정보를 카카오톡·페이스북·문자 앱 등이 읽어서 만듭니다. 핵심은 세 가지입니다.

1. 제목(og:title): 업체 이름과 하는 일이 함께 들어가면 좋습니다. 너무 길면 뒷부분이 잘립니다
2. 설명(og:description): 한 문장으로 '무엇을 해 주는 곳인지'를 적습니다
3. 이미지(og:image): 미리보기 카드에서 가장 눈에 띄는 부분입니다

이미지는 1200×630으로, 글자는 가운데에

• 가로 1200, 세로 630픽셀(약 1.91:1)이 가장 널리 쓰이는 크기입니다
• 앱마다 가장자리를 조금씩 잘라 보여 주므로 로고와 문구는 가운데 쪽에 둡니다
• 휴대폰의 작은 카드에서도 읽히도록 글자는 크게, 한두 줄만 넣습니다
• 가게 사진을 쓴다면 어두운 실내 사진보다 밝고 단순한 사진이 작은 카드에서 잘 보입니다

코드블루는 이 이미지를 사이트를 만들 때 함께 생성해 로고와 핵심 문구만 크게 넣었습니다. 또 페이지마다 제목을 따로 정해 두어서, 가이드 글을 공유하면 그 글의 제목이, 홈을 공유하면 업체 소개가 미리보기에 뜹니다.

바꿨는데 카톡에서는 예전 미리보기가 뜰 때

카카오톡은 한 번 읽어 간 미리보기를 한동안 저장해 두고 다시 씁니다. 그래서 이미지를 바꿨는데도 예전 카드가 계속 뜰 수 있습니다. 이럴 때는 카카오 개발자 사이트의 공유 디버거에 주소를 넣고 저장된 정보를 초기화하면 새 정보를 다시 읽어 갑니다. 페이스북도 같은 역할의 공유 디버거를 제공합니다.

미리보기가 아예 안 뜬다면

• 이미지 주소가 https로 시작하고, 그 주소를 브라우저에 넣었을 때 실제로 열리는지 확인하세요
• 이미지가 지나치게 무거우면 늦게 뜨거나 빠질 수 있으니 용량을 가볍게 줄여 두세요
• 로그인해야 보이는 페이지는 앱이 내용을 읽지 못해 미리보기가 비어 나옵니다