링크를 공유하면 플랫폼은 주소만 표시하지 않습니다. 페이지를 가져와 head에서 태그 몇 개를 읽고 이미지 하나, 제목 하나, 텍스트 한 줄로 된 카드를 만듭니다. 어떤 태그를 읽는지는 링크를 어디에 올렸는지에 따라 다릅니다. X는 자기 태그를 먼저 찾고 없을 때만 Open Graph 태그로 넘어가지만, Facebook과 LinkedIn은 Open Graph만 읽습니다. 태그가 없어도 빈칸이 남지는 않습니다. 플랫폼이 페이지에서 다른 것을 가져오는데, 대개 처음 발견한 텍스트입니다. 아래에 주소를 입력해 페이지의 태그를 읽거나 직접 작성하면, 여섯 플랫폼 각각이 만드는 방식대로 카드가 그려집니다.
플랫폼마다 읽는 태그가 다릅니다
X는 자기 태그를 먼저 확인하고, 없을 때 Open Graph로 넘어갑니다. Facebook과 LinkedIn은 Open Graph만 읽기 때문에 X 태그는 그곳에서 아무 역할도 하지 않습니다. Slack과 Discord는 둘 다 받아들입니다. 그래서 같은 페이지가 서로 맞지 않는 여섯 개의 카드를 만들 수 있고, 분명히 설정한 제목이 그중 절반에서 빠질 수도 있습니다. 여기의 각 미리보기는 해당 플랫폼이 실제로 쓰는 순서를 따릅니다.
Facebook과 LinkedIn은 읽은 내용을 기억합니다
두 곳 모두 페이지를 처음 가져왔을 때 찾은 내용을 사본으로 보관하며, 그 사본을 오래 유지합니다. 태그를 고쳐도 카드가 그대로인데, 올바른 수정이 실패한 것처럼 보이는 가장 흔한 이유가 바로 이것입니다. 플랫폼에 페이지를 다시 읽어 달라고 요청해야 하며, 두 곳 다 그 수단을 제공합니다. Facebook의 Sharing Debugger와 LinkedIn의 Post Inspector입니다. 그 캐시를 대신 비워 줄 수 있는 도구는 없고, 이 도구도 마찬가지입니다. 여기 보이는 것은 지금 태그의 내용이지, Facebook이 아직 보여 주고 있는 내용이 아닙니다.
태그가 없다고 빈칸이 되지는 않습니다
플랫폼은 빈자리를 남기지 않고 다른 것을 채웁니다. 설명 태그가 없으면 페이지에서 한 줄을 가져오는데 대개 처음 마주친 문장이고, 많은 사이트에서 그것은 메뉴 항목이나 쿠키 안내입니다. 이미지가 없으면 카드는 파비콘 옆의 한 줄짜리 텍스트로 줄어듭니다. 미리보기는 이런 대체까지 그대로 보여 줍니다.
크기, 그리고 잘리는 위치
너비가 약 600px 미만이면 대부분의 플랫폼은 큰 이미지 카드를 그만두고 텍스트 옆의 작은 썸네일로 내려가는데, 이는 훨씬 약한 카드입니다. 1200 x 630이 많은 사람이 목표로 삼는 크기입니다. 자르기는 가운데를 기준으로 하므로 위쪽, 아래쪽, 좌우 가장자리에 가까운 것은 사라질 수 있습니다. 사진 아래쪽의 전화번호나 포스터 위쪽의 이름 같은 것들입니다. 이미지는 여기서 브라우저에 불러와 직접 재기 때문에, 보이는 크기는 너비 태그가 주장하는 값이 아니라 실제 값입니다.
같은 태그 한 벌로 여섯 개의 카드. 플랫폼마다 읽는 방식이 다르기 때문입니다.
- 각 플랫폼의 레이아웃으로
- 각 플랫폼이 쓰는 태그 순서로
- 나란히 표시
- 브라우저에서 실제 측정
- 태그가 아닌 실제 픽셀
- 잘릴 그대로 잘라서
- 제목과 설명
- 각각 잘리는 지점
- 각각 어느 태그에서 왔는지
- 거기에 있는 태그 그대로
- 모든 대체 동작까지
- 아무것도 보관하지 않음