새 페이지를 공유했는데 미리보기에 예전 제목, 잘린 로고, 회색 상자가 보입니다. 사람들은 클릭하기 전에 그 카드로 링크를 판단하므로, 미리보기가 깨져 있으면 공유될 때마다 방문을 놓치게 됩니다.
미리보기는 몇 가지 단순한 규칙을 따릅니다. 앱이 찾는 정보를 페이지가 제대로 주면 대개 그 뒤로는 문제가 다시 생기지 않습니다.
미리보기는 어디서 오는가
누군가 링크를 붙여 넣으면 앱의 크롤러가 페이지를 가져와 HTML 헤드에 있는 몇 가지 태그를 읽습니다. 가장 중요한 표준은Open Graph 프로토콜로, og:title, og:type, og:image, og:url을 정의합니다. 대부분의 앱은 og:description도 읽고, X는 자체 twitter:card 태그를 읽은 뒤 나머지는 Open Graph를 참고합니다.
크롤러는 사람처럼 스크롤하거나 클릭하거나 기다리지 않습니다. 서버가 처음 보내는 내용만 읽습니다. 나중에 JavaScript로 추가되는 내용은 보지 못하는 경우가 많습니다.
잘못 보이는 이유
태그가 없어서 앱이 찾은 글과 이미지로 추측합니다.
태그가 페이지 로드 후 JavaScript로 추가되어 크롤러가 끝내 보지 못합니다.
og:image가 전체 https URL이 아니라 상대 경로나 http 주소로 되어 있습니다.
이미지가 너무 크거나 작거나 비율이 맞지 않거나, 방화벽, 봇 차단, 로그인 때문에 막혀 있습니다.
모든 페이지가 같은 일반 제목과 이미지를 써서 어떤 링크든 똑같아 보입니다.
앱이 예전 버전의 페이지를 캐시해 두고 계속 보여 줍니다.
어디서나 잘 보이는 이미지
1200 × 630 픽셀의 가로형 이미지를 JPEG나 PNG로, 적당한 용량으로 저장해 쓰세요. 일부 앱은 정사각형이나 더 좁은 모양으로 잘라 보여 주므로 중요한 글자와 로고는 가장자리에서 떨어뜨려 두세요. 로그인 없이 누구나 열 수 있는 전체 https URL로 제공하세요.
og:image:width, og:image:height, og:image:alt도 함께 넣으세요. 이미지가 내려받아지기 전에 앱이 카드 배치를 잡는 데 도움이 되고, 화면 낭독기를 쓰는 사람에게 이미지를 설명해 줍니다.
캐시된 미리보기 새로 고치기
앱은 미리보기를 저장해 두며, 며칠씩 유지하기도 합니다. 태그를 고친 뒤에는 앱에 페이지를 다시 읽어 달라고 요청해야 할 수 있습니다. Facebook의 Sharing Debugger와 LinkedIn의 Post Inspector에는 URL을 다시 가져오는 버튼이 있습니다. 다른 앱에서는 ?v=2처럼 영향 없는 매개변수를 붙여 공유하면 새 미리보기가 만들어집니다.
공유하기 전에 테스트하기
제가 무료로 제공하는링크 미리보기 테스트는 미리보기 크롤러와 같은 방식으로 페이지를 가져와 Open Graph와 X 카드 태그를 읽고, 이미지를 실제로 내려받아 제대로 열리는지 확인하고 크기와 용량을 잽니다. 그다음 X, LinkedIn, Facebook, WhatsApp, Slack, Discord에서 카드가 어떻게 보일지 수정 목록과 함께 보여 줍니다.
앱마다 규칙이 있고 가끔 바뀌므로, 미리보기는 픽셀 단위로 똑같은 결과가 아니라 가까운 참고 자료로 보세요.
자동으로 만들기
페이지가 많은 사이트라면 미리보기는 콘텐츠 자체에서 만들어져야 합니다. 상품명, 글 제목, 행사 날짜와 함께 페이지마다 생성하거나 고른 이미지를 쓰는 식입니다. Next.js 같은 프레임워크는 이런 태그와 이미지를 서버에서 만들 수 있습니다. 모든 페이지가 같은 일반 카드를 쓰고 있다면사이트에 대해 알려 주세요. 새 페이지를 만들 때마다 따로 손대지 않아도 제대로 된 미리보기가 붙도록 설정해 드리겠습니다.