게시하기 전에 공유 카드를 확인하세요
마지막 업데이트:
공유 카드는 누군가 당신의 페이지로 연결되는 링크를 붙여넣을 때 소셜 네트워크나 채팅 앱이 만드는 작은 미리보기 — 제목, 설명, 이미지 — 입니다. 그 페이지를 접하는 대부분의 사람에게 카드는 그들이 보게 될 유일한 모습입니다. 스크롤 도중에 그것을 만나고, 약 1초 만에 판단하고, 그 너머의 페이지가 탭할 가치가 있는지를 결정합니다. 불편한 점은 카드의 실패가 조용하다는 것입니다. 카드는 화면에서 보는 것으로 만들어지는 것이 아니라, 페이지의 head에 있는 한 줌의 meta 태그로, 당신이 본 적 없는 스크레이퍼가 한 번 가져와 만들기 때문에, 자신의 브라우저에서는 페이지가 완벽해 보여도 카드에는 이미지가 없거나, 지난달의 헤드라인이 실리거나, 설명이 단어 중간에 잘릴 수 있습니다. 그러니 공유하려는 것을 게시하기 전에, 초안 URL을 Open Graph 검사기에 통과시켜, 독자들이 볼 모습 — 네 장의 작은 카드 — 으로 페이지를 보세요.
링크가 곧 광고다
링크가 소셜 피드나 채팅 스레드에 붙여넣어질 때, 어떤 인간도 먼저 당신의 페이지를 방문하지 않습니다. 플랫폼은 스크레이퍼 — 작고 조급한 크롤러 — 를 보내고, 그것은 페이지를 한 번 가져와 head에서 찾은 meta 태그로 카드를 만듭니다. 그 사슬에 있는 누구도 당신의 레이아웃, 타이포그래피, 공들여 조정한 히어로 섹션, 접힌 부분 위에 올려둔 스크린샷을 보지 못합니다. 그들이 보는 것은 정확히 세 개의 필드와 이미지 한 장입니다. og:title, og:description, og:image. 이 세 가지가 틀렸거나, 빠져 있거나, 낡았다면, 청중에게 당신의 페이지는 바로 틀렸고, 빠져 있고, 낡은 것입니다 — 카드 너머의 아름다운 페이지가 그 인상을 바로잡을 기회를 결코 얻지 못합니다.
카드는 고집도 셉니다. 플랫폼은 그 수집 결과를, 보통 정확한 URL에 묶어 캐시에 저장하므로, 스크레이퍼가 처음 만든 버전이 페이지를 편집한 한참 뒤까지 몇 주, 몇 달 동안 계속 공유되는 버전이 되는 경우가 많습니다. 그래서 공유 카드는 광고 소재와 같은 존중을 받을 자격이 있습니다. 공유되는 것 자체가 목적인 게시물에게 링크는 곧 광고이고, meta 태그는 카피입니다. 그것들을 뒷전 생각으로 쓰거나 — 사이트 생성기가 가까이에 우연히 있는 텍스트로 채우게 두는 것은 — 아무도 검토하지 않은 소재로 캠페인을 돌리는 것과 같습니다.
각 플랫폼이 실제로 읽는 것
기반부터 시작하세요. Facebook과 LinkedIn은 Open Graph를 읽습니다. Open Graph 프로토콜이 정의하는 og:title, og:description, og:image, og:url, og:type입니다. 이 다섯 가지가 있고 온전하다면, 가장 큰 두 개의 전문가용 공유 표면이 커버됩니다. X는 먼저 자체 Twitter Card 태그 — twitter:card, twitter:title, twitter:description, twitter:image — 를 읽고, Twitter 태그가 없으면 Open Graph의 동등한 태그로 폴백합니다. Slack은 Open Graph를 먼저 읽고, Twitter Card 태그를 폴백으로 삼습니다. 말하자면 플랫폼들은 재료에는 동의하고, 어느 선반에 먼저 손을 뻗을지에서 약간 의견이 다릅니다.
어디서나 마지막 수단은 같습니다. Open Graph도 Twitter 태그도 없을 때 평범한 <title> 요소와 meta 설명이 불려 나옵니다. 이 폴백은 저희 것을 포함해 모든 검사기를 읽는 방식에 중요합니다. 도구가 카드 제목을 보여줄 때, 정직한 질문은 그 값이 어디서 왔는가 — 목적으로 쓴 전용 태그에서인가, 아니면 검색 결과 페이지용으로 쓰여 당신의 카드와 공유되지 않는 문자 예산을 가진 title 요소에서 구해낸 폴백인가 — 입니다. 폴백을 조용히 대입하고 그것을 태그처럼 제시하는 검사기는 누락으로 거짓말을 하는 것입니다. 그래서 Open Graph 검사기는 태그가 존재하는 척하지 않고 모든 폴백을 폴백이라고 표시합니다.
카드를 망가져 보이게 하는 실패들
고전은 상대 경로 og:image입니다. 태그는 content="/images/share.png" — URL이 아니라 경로 — 라고 말하고 있고, 브라우저는 자신이 어느 사이트에 있는지 알기 때문에 당신의 브라우저에서는 작동합니다. 스크레이퍼는 그것을 해석하지 않습니다. 스크레이퍼가 원하는 것은 https://로 시작하는 완전한 절대 URL이며, 그것을 얻지 못하면 이미지가 없는 카드를 만들 뿐이고, 독자들은 자신이 무엇을 놓쳤는지 결코 알지 못한 채 지나쳐 갑니다. 그 바로 뒤에는 존재하지만 맞지 않는 이미지가 있습니다. 플랫폼이 권장하는 1200×630 픽셀보다 훨씬 작거나, 가운데 자르기로 엉망이 되는 비율인 경우입니다. 1200×630을 그것이 무엇인 그대로 대하세요 — 널리 공개된 플랫폼 지침이지, 누구도 비준한 표준은 아닙니다 — 그래도 무시된 지침은 헤드라인이 이미지 밖으로 잘린 카드를 뜻합니다.
나머지는 더 조용합니다. twitter:card 태그가 빠져 있으면, 크고 아름다운 이미지를 제공하고 전체 너비의 summary_large_image 대우를 기대했더라도 X는 작은 요약 카드 — 텍스트 옆의 썸네일 — 로 폴백합니다. 빈 태그 값은 빠진 태그보다 나쁩니다. content=""인 og:title은 폴백을 발동시키지 않고 그것을 무(無)로 덮어씁니다. 그리고 잘못된 og:url — 복사한 템플릿이 흔히 하듯 스테이징 도메인, 홈페이지, 지난주 기사를 가리키는 것 — 은 모든 플랫폼에 표준 페이지가 다른 곳에 있다고 말해, 공유와 카운트와 캐시 항목을 당신이 실제로 게시한 페이지에서 떼어놓습니다.
태그를 고쳐도 오래된 카드가 계속 나타나는 이유
태그를 고치고, 재배포하고, 링크를 다시 붙여넣었는데 — 오래된 제목이 여전히 거기서 당신에게 미소 짓고 있습니다. 아무것도 망가지지 않았습니다. 각 플랫폼은 당신의 URL에 대해 만든 카드를 캐시에 저장하고, 그 캐시는 당신의 사이트 변화를 감시하지 않습니다. 플랫폼의 관점에서, 당신의 페이지가 어떤 모습인지는 이미 알고 있고, 공유할 때마다 모든 URL을 다시 가져오는 것은 아주 작은 이익을 위한 엄청난 양의 크롤링이기 때문입니다. 낡은 카드는 당신의 수정이 실패했다는 증거가 아닙니다. 캐시에 다시 보러 가라고 아직 말하지 않았다는 증거입니다 — 그리고 말할 때까지, 링크를 공유하는 모든 동료와 독자는 오래된 수집을 다시 내놓습니다.
그러니 말해 주세요. 주요 플랫폼마다 단일 URL의 새 수집을 강제하는 방법을 제공합니다. Facebook의 공유 디버거와 LinkedIn의 포스트 인스펙터는 모두 페이지를 다시 가져와 재구축한 카드를 보여줍니다 — X는 역사적으로 같은 일을 위한 카드 유효성 검사기를 제공했습니다. 태그를 수정한 뒤에는 해당 도구에 URL을 통과시키고, 게시물을 알리기 전에 새 카드를 확인하세요. 재수집 도구가 없는 곳에서는 URL을 바꾸면 캐시 키가 바뀝니다. ?v=2 같은 쿼리 문자열을 붙이면 플랫폼은 그 링크를 한 번도 본 적 없는 것으로 취급하는데, 이는 일회성 공유에 아주 훌륭한 방법입니다. 그리고 약간의 인내심을 남겨 두세요 — 재수집 뒤에도 캐시가 놓아주는 데 시간이 걸릴 수 있으니, 이미 올바랐던 태그를 편집하기 전에 확인하고, 기다리고, 한 번 더 확인하세요.
2분짜리 게시 전 루틴
조사가 아니라 루틴으로 만드세요. 하나: 초안 URL을 Open Graph 검사기에 붙여넣으세요 — 스크레이퍼가 가져올 페이지인 한, 스테이징이나 미리보기 URL이면 됩니다. 둘: 네 장의 카드 — Facebook, X, LinkedIn, Slack — 가 모두 의도한 제목, 설명, 이미지를 보여주는지 확인하고, 폴백이라고 표시된 것에 주목하세요. 스스로 선택한 폴백은 괜찮고, 걸려 넘어져 빠진 폴백은 쓰이기를 기다리는 태그이기 때문입니다. 셋: 이미지 URL이 절대 URL이고 이미지 자체가 최소 1200×630인지 확인하세요. 넷: X에서 큰 형식을 원하는 곳에서는 twitter:card가 summary_large_image인지, 그리고 og:url이 지금 게시하려는 표준 페이지를 가리키는지 확인하세요.
다섯: 게시하세요 — 그리고 아직 보고 있는 동안 첫 수집을 강제하기 위해, 링크를 어딘가에 한 번 직접 붙여넣고, 돌아오는 카드를 보세요. 낡았거나 틀렸다면, 당황해서 편집하지 말고 플랫폼 자체 도구로 다시 수집하세요. 2분, 다섯 단계면, 대부분의 사람이 보게 될 당신의 페이지의 모습이 당신이 실제로 승인한 모습이 됩니다. 더 넓은 게시 전 점검 — TLS, 보안 헤더, 리다이렉션, 페이지가 출발 전에 받을 자격이 있는 나머지 루틴 확인 — 에 대해서는 나란히 웹사이트 상태 검사를 실행하세요. 카드는 현관문이지만 집 전체는 아닙니다.