사용 방법
example.com/blog/launch처럼 페이지 주소를 입력하고 확인을 누르세요. 페이지가 없다면 예시 중 하나를 시도하세요.- X, Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage의 각 앱이 만드는 카드를 확인하세요. 녹색 점은 카드가 정상임을 뜻하고, 노란색이나 빨간색 점은 카드 아래에 문제를 알려 줍니다.
- 수정 사항 및 태그 표시를 열면 모든 태그를 하나씩 확인할 수 있습니다. 누락된 태그는
<head>에 붙여 넣을 수 있게 준비되어 있습니다. 복사하고 값을 채우고 변경 사항을 게시한 다음 다시 확인하세요.
확인 주소는 브라우저 주소 표시줄에 있으므로 페이지 관리자에게 보낼 수 있습니다.
링크 미리보기의 작동 방식
게시물이나 채팅에 링크를 붙여 넣으면 앱의 크롤러가 페이지를 한 번 가져와 <head>의 태그를 읽습니다. JavaScript 실행, 로그인, 쿠키 배너 수락을 하지 않으므로 페이지 로드 후 스크립트가 추가한 태그는 보이지 않습니다. 검사 도구도 같은 방식으로 페이지를 가져옵니다. 요청 한 번, JavaScript 없음, 크롤러처럼 리디렉션을 따라갑니다.
각 앱은 같은 몇 가지 태그를 읽으며, 각자의 대체 방식이 있습니다.
- Open Graph(
og:title,og:description,og:image,og:url,og:site_name)는 Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage가 읽습니다. - X는
twitter:card,twitter:title,twitter:description,twitter:image를 먼저 읽고, 없으면 Open Graph 태그를 사용합니다.twitter:card가 없으면 이미지가 있어도 작은 요약 카드를 표시합니다. og:title이 없으면 대부분의 앱은<title>을 사용합니다.og:description이 없으면 메타 설명을 사용하는 앱도 있고 텍스트를 표시하지 않는 앱도 있습니다.- Discord는
theme-color로 카드 측면에 색을 입힙니다.
여기의 미리보기는 이 규칙을 따릅니다. 각 앱은 때때로 디자인을 바꾸므로 정확한 모습이 아닌 근사치로 보세요.
미리보기 이미지
이미지 하나로 어디서나 작동합니다: 1200 × 630픽셀(1.91:1), PNG 또는 JPEG, 전체 https:// 주소.
- 너비가 600픽셀 미만이면 Facebook과 LinkedIn은 큰 카드 대신 작은 썸네일을 표시합니다. 200 × 200 미만이면 Facebook은 이미지를 표시하지 않습니다.
- X는 5MB까지, Facebook은 8MB까지 이미지를 받습니다. WhatsApp은 약 600KB가 넘는 이미지를 생략하는 경우가 많으므로 잘 압축된 JPEG가 안전합니다.
- SVG는 어떤 주요 앱에서도 지원되지 않습니다.
/og.png같은 상대 주소는 모든 크롤러에서 작동하지 않습니다. 전체 URL을 작성하세요.- 정사각형 자르기가 흔하므로(WhatsApp, 작은 링크의 iMessage) 이미지의 중요한 부분을 가운데 가까이에 두세요.
검사 도구는 이미지도 가져와 파일 헤더에서 크기를 측정하고 미리보기에 표시합니다.
미리보기가 여전히 이전 모습인 이유
앱은 가져온 내용을 몇 분에서 약 일주일까지 캐시합니다. 태그를 고치면 검사 도구에는 바로 새 버전이 표시되지만, 이미 공유된 링크는 앱이 다시 가져올 때까지 이전 미리보기를 유지합니다. Facebook의 공유 디버거와 LinkedIn의 Post Inspector는 요청 시 페이지를 다시 가져옵니다. Slack에서는 시간이 지난 후 링크를 다시 게시하면 새 미리보기가 나옵니다. ?v=2 같은 쿼리 문자열을 추가하면 어떤 앱이든 새 링크로 처리합니다.
자주 묻는 질문
미리보기에 이미지가 없는 이유는 무엇인가요?
흔한 원인은 순서대로 og:image 태그가 없음, 이미지 주소가 상대 주소이거나 오류를 반환함, 이미지가 너무 작거나 큼, 페이지 로드 후 JavaScript가 태그를 추가함입니다. 각 카드 아래 줄에 해당 원인이 표시됩니다.
최소한 어떤 태그가 필요한가요?
og:title, og:description, 1200 × 630 이미지의 og:image, og:url, 그리고 summary_large_image로 설정한 twitter:card입니다. 메타 태그 생성기가 작성해 줍니다.
로그인이 필요한 페이지를 확인할 수 있나요?
아니요. 크롤러는 로그인하지 않으므로 로그인이 필요한 페이지에는 어디에서도 미리보기가 나오지 않습니다. 검사 도구는 크롤러가 보는 것을 보며 공개 주소만 가져옵니다. 사설 및 내부 네트워크는 거부됩니다.
검사 도구가 가져온 페이지를 저장하나요?
아니요. 확인을 누르면 페이지와 이미지를 가져와 찾은 내용을 보내 줍니다. 결과는 2분 동안 보관되어 같은 주소의 두 번째 확인은 즉시 끝나며, 그 후 삭제됩니다. HTML은 2MB까지, 이미지는 개당 8MB까지 읽으며 8초 후 중단합니다.
브라우저에서는 잘 열리는데 403이라고 나오는 이유는 무엇인가요?
일부 사이트와 방화벽은 브라우저가 아니거나 아는 대형 크롤러가 아닌 요청을 차단합니다. 검사 도구가 403을 받으면 Facebook이나 LinkedIn도 받을 수 있습니다. 방화벽의 봇 설정을 확인하세요.
제한이 있나요?
주소 하나에서 분당 20회 확인까지입니다. 또한 검사 도구 전체에서 각 사이트를 분당 최대 60회만 가져오므로 사이트에 대량 요청을 보내는 데 사용할 수 없습니다. 결과는 2분 동안 보관되므로 같은 주소를 곧바로 다시 확인하면 즉시 돌아옵니다. 보고 있는 페이지에서 확인을 다시 누르면 항상 새로 가져옵니다.