소셜 공유: 링크가 카드로 바뀌는 순간을 점검하기

소셜 공유는 이 페이지의 링크를 누군가 메신저나 SNS에 붙여 넣었을 때, 어떤 카드가 펼쳐지는가를 확인하는 카테고리입니다. 카카오톡, X, 슬랙, 페이스북, 링크드인, 디스코드 같은 플랫폼은 대체로 링크를 받으면 페이지의 초기 HTML을 가져와 og: 또는 twitter: 로 시작하는 메타 태그를 읽고, 그 값으로 제목·설명·이미지가 붙은 미리보기 카드를 만듭니다. 다만 크롤러의 동작은 플랫폼마다 다르고 시기에 따라 바뀔 수 있습니다. 이 카드가 비어 있거나 엉뚱한 이미지를 보여 주면, 독자는 링크를 누르기 전에 이미 흥미를 잃습니다.

SEO 100점 중 8점을 배정한 이유는 분명합니다. 이 카테고리의 항목은 어느 하나도 Google 색인이나 순위의 직접 조건이 아닙니다. Open Graph 태그가 하나도 없어도 페이지는 색인되고 검색결과에 나옵니다. 그래서 검색 접근성(20점)이나 콘텐츠 품질처럼 검색 노출 자체를 좌우하는 카테고리보다 배점이 낮습니다. 그렇다고 0점으로 둘 수는 없었습니다. 한국어 웹에서 트래픽의 상당 부분은 검색이 아니라 카카오톡 대화방과 커뮤니티 게시판을 통해 들어오고, 그 경로에서 페이지의 첫인상을 결정하는 것이 바로 이 메타 태그이기 때문입니다. 8점은 “검색에는 간접적이지만 유입에는 직접적”이라는 위치를 숫자로 옮긴 결과입니다.

카테고리 안의 배점도 같은 기준으로 나눴습니다. 카드가 아예 만들어지지 않게 하는 문제(핵심 속성 누락, 이미지 URL 형식 오류)에 5점을, 카드가 만들어지긴 하지만 덜 좋게 보이는 문제(텍스트 길이·주제 불일치, Twitter Card 세부 선언)에 3점을 두었습니다. “얼마나 자주 틀리는가”가 아니라 **“틀렸을 때 카드가 얼마나 망가지는가”**가 기준입니다.

세 묶음으로 읽는 5개 항목

검사기는 항목을 심각도 순으로 정렬해 보여 주지만, 실무에서 점검하는 순서는 조금 다릅니다. 먼저 카드가 만들어질 최소 조건을 갖췄는지, 다음으로 그 카드의 내용이 페이지를 제대로 대표하는지, 마지막으로 X처럼 별도 규격을 요구하는 플랫폼까지 대응했는지 순서로 보는 편이 수정 작업이 적게 듭니다.

1묶음: 카드가 만들어질 최소 조건

Open Graph 핵심 속성(3점)은 Open Graph 프로토콜 명세가 “모든 페이지에 있어야 한다”고 정한 네 속성, og:title·og:type·og:image·og:url이 초기 HTML에 있는지 봅니다. 이 카테고리에서 배점이 가장 높은 이유는 네 개가 모두 없을 때 결과가 가장 나쁘기 때문입니다. 플랫폼은 이 경우 <title>과 본문 첫 문단, 페이지에서 처음 발견한 <img>를 임의로 골라 카드를 채웁니다. 로고 대신 광고 배너가, 제목 대신 내비게이션 문구가 카드에 올라가는 사고가 여기서 생깁니다.

판정은 세 단계입니다. 네 개가 모두 없으면 critical, 일부만 없으면 warning, 모두 있으면 pass입니다. 실무에서 가장 자주 빠지는 것은 og:type과 og:url입니다. 두 속성은 카드에 직접 그려지지 않아 “없어도 카드는 잘 나오던데”라는 반응이 많습니다. 실제로 대부분의 플랫폼은 이 둘이 없어도 카드를 만듭니다. 그럼에도 검사기가 warning으로 잡는 이유가 있습니다. og:url은 같은 글이 ?utm_source=가 붙은 URL, http://와 https://, www 유무로 여러 번 공유될 때 플랫폼이 이를 한 페이지로 묶는 기준이 됩니다. 이것이 빠지면 페이스북의 공유 수나 링크 미리보기 캐시가 URL 변형마다 따로 쌓입니다. og:type은 article인지 website인지에 따라 일부 플랫폼이 카드 형태와 발행일 표시를 다르게 처리합니다.

흔한 오해 하나를 짚어 둡니다. 이 항목은 값의 존재만 봅니다. og:title에 “홈”이라고만 적혀 있어도 pass입니다. 내용의 적절성은 다음 묶음의 항목이 따로 판정하며, 두 항목을 분리한 이유는 “없음”과 “있지만 나쁨”이 수정 방법과 긴급도가 다르기 때문입니다.

Open Graph 이미지 URL(2점)은 og:image가 선언돼 있을 때 그 값이 https://로 시작하는 절대 URL인지 확인합니다. 선언 자체가 없으면 이 항목은 판정하지 않고 핵심 속성 항목에만 맡깁니다. 같은 누락을 두 항목에서 이중으로 감점하지 않기 위해서입니다.

배점이 2점인 이유는 이 문제의 결과가 “이미지 없는 카드”이기 때문입니다. 텍스트만 있는 카드는 카카오톡과 X에서 눈에 띄게 작게 그려지고, 클릭률 차이가 큽니다. 실무에서 틀리는 방식은 두 가지로 나뉩니다. 첫째는 /images/og.png 같은 상대 경로입니다. 브라우저는 현재 페이지 기준으로 해석하지만, 플랫폼의 링크 크롤러는 그렇게 해석해 주리라 기대할 수 없습니다. 검사기는 이 경우 warning을 내고, 현재 URL 기준으로 해석했을 때 어디를 가리키게 되는지 증거로 같이 보여 줍니다. 둘째는 http://로 시작하는 절대 URL입니다. 사이트 전체를 HTTPS로 옮겼는데 CMS 템플릿에 오래전 하드코딩된 이미지 도메인이 남아 있는 경우가 대부분입니다. 플랫폼에 따라 HTTP 이미지를 가져오지 못하는 경우가 있어, 브라우저에서는 멀쩡히 보이는 이미지가 카드에서만 사라질 수 있습니다. Open Graph 명세도 HTTPS가 필요한 페이지에는 og:image:secure_url을 따로 두도록 안내합니다.

값이 비어 있거나 URL로 해석조차 안 되는 문자열이면 critical입니다. 템플릿 변수가 치환되지 않아 {{ og_image }} 같은 문자열이 그대로 출력되는 사례가 여기에 걸립니다. 반대로 pass 판정을 받았더라도 검사기는 그 이미지가 실제로 응답하는지, 크기가 플랫폼 요구 조건에 맞는지는 확인하지 않습니다. 이 점은 판정 문구에도 그대로 적혀 있습니다.

2묶음: 카드가 페이지를 제대로 대표하는가

Open Graph 텍스트 품질(1점)은 og:title과 og:description이 둘 다 있을 때만 판정합니다. 하나라도 없으면 not-applicable로 두고 핵심 속성 항목에 판정을 넘깁니다. 확인하는 것은 네 가지입니다. og:title이 95자를 넘는지, og:description이 50~200자 범위에 있는지, 그리고 각각이 페이지의 <title>·meta description과 주제 단어를 하나라도 공유하는지 봅니다.

숫자의 근거를 밝혀 둡니다. 95자와 200자는 특정 플랫폼의 공식 한도가 아닙니다. 플랫폼마다 잘라내는 지점이 다르고, 공개하지 않는 곳도 많으며, 같은 플랫폼 안에서도 기기 폭에 따라 달라집니다. 검사기의 기준은 “이 길이를 넘으면 어떤 플랫폼에서든 잘릴 가능성이 높다”는 보수적인 상한선입니다. 하한선 50자는 반대로 “환영합니다”처럼 페이지 내용을 전혀 담지 못하는 설명을 걸러 내기 위한 값입니다. 글자 수는 자모 단위가 아니라 화면에 보이는 글자(grapheme) 단위로 세므로, 한글과 이모지가 섞여도 눈으로 세는 수와 같습니다.

주제 단어 비교는 이 항목에서 오탐이 가장 자주 나오는 부분이라 설명이 필요합니다. 검사기는 두 문자열을 토큰으로 나눠 겹치는 단어가 있는지만 봅니다. 의미를 이해하는 것이 아닙니다. 그래서 <title>에는 “가격 안내”라고 쓰고 og:title에는 “요금표”라고 쓴 경우처럼 사람에게는 같은 주제여도 검사기는 “주제 단어를 공유하지 않는다”고 판정할 수 있습니다. 이런 결과를 받았다면 실제로 두 문구가 다른 페이지를 가리키는지 먼저 확인하고, 같은 페이지라면 핵심 단어 하나를 양쪽에 맞추는 정도로 충분합니다. 이 검사가 잡으려는 진짜 사고는 따로 있습니다. 모든 페이지에 사이트 이름만 og:title로 박아 둔 템플릿, 그리고 첫 게시글의 설명이 사이트 전체 기본값으로 굳어 버린 CMS입니다.

배점이 1점인 이유는 이 항목이 틀려도 카드는 만들어지기 때문입니다. 잘리거나 어색할 뿐입니다. 그리고 텍스트 길이의 정답은 페이지 성격에 따라 달라서 일률적인 기준으로 큰 점수를 깎는 것이 공정하지 않다고 판단했습니다.

3묶음: X 전용 규격까지 챙겼는가

Twitter Card 유형(1점)은 twitter:card의 값이 X가 인정하는 네 가지, summary·summary_large_image·app·player 중 하나인지 봅니다. 선언이 아예 없으면 warning, 선언은 있는데 값이 비었거나 목록에 없으면 critical, 목록에 있으면 pass입니다. “없음”보다 “틀림”을 더 심각하게 보는 점이 다른 항목과 다릅니다. X는 twitter:card가 없으면 Open Graph 태그로 대체해 카드를 그리려 시도하지만, 값이 있는데 알 수 없는 값이면 카드 마크업 전체를 무시합니다. 없는 편이 틀린 것보다 낫다는 뜻입니다.

실무에서 틀리는 방식은 거의 하나로 모입니다. summary_large_image를 summary-large-image나 large_image, summary_large로 잘못 적는 경우입니다. 검사기는 대소문자만 무시하고 나머지는 정확히 대조합니다. 또 하나는 <meta property="twitter:card">처럼 name 대신 property 속성을 쓰는 경우인데, X 문서는 name을 쓰도록 안내하고 있고 실제 처리 여부는 플랫폼이 결정합니다.

이 항목의 영향 문구가 “표시 자체는 플랫폼이 결정합니다”로 끝나는 이유를 덧붙입니다. X는 2023년 이후 링크 카드에서 제목 텍스트를 빼고 이미지만 보여 주는 등 카드 형태를 여러 번 바꿨습니다. 마크업이 완벽해도 어떤 카드가 그려질지는 그 시점의 X 정책에 달려 있습니다. 검사기는 “X가 읽을 수 있는 형식인가”까지만 판정합니다.

Twitter Card 콘텐츠(1점)는 twitter:card가 선언된 경우에만 판정하며, 카드에 넣을 제목과 이미지가 있는지 봅니다. 여기서 중요한 것은 og:title·og:image를 대체값으로 인정한다는 점입니다. twitter:title이 없어도 og:title이 있으면 제목이 있는 것으로 칩니다. 이는 X의 공식 문서가 밝힌 대체 규칙을 따른 것이며, 같은 값을 og:와 twitter:로 두 번 적으라고 요구하지 않기 위해서입니다.

그런데 영향 문구는 “플랫폼이 OG 로 대체할지는 보장되지 않습니다”라고 적혀 있어 앞뒤가 안 맞는 것처럼 보일 수 있습니다. 둘 다 사실입니다. X는 대체 규칙을 문서로 밝혔지만, 실제 렌더 결과가 문서와 다르게 나오는 시기가 있었고, 카카오톡이나 슬랙처럼 twitter: 태그를 읽는 다른 플랫폼은 각자 규칙이 다릅니다. 검사기는 문서화된 규칙을 기준으로 판정하되, 그 결과를 약속하지 않는다는 뜻으로 영향 문구를 그렇게 썼습니다. 가장 안전한 선택은 og:title·og:image를 제대로 채워 두는 것이며, twitter: 전용 값은 X에서만 다른 이미지 비율을 쓰고 싶을 때처럼 실제로 다른 값이 필요할 때만 추가하는 편이 유지보수에 유리합니다.

이 항목의 판정에서 자주 나오는 오해가 있습니다. twitter:card를 선언하지 않았는데 이 항목이 not-applicable로 나와 “검사를 안 한 것 아니냐”는 질문입니다. 의도된 동작입니다. 카드 유형을 선언하지 않았으면 X는 Open Graph를 읽게 되고, 그 내용은 이미 1묶음의 항목에서 판정했기 때문에 여기서 다시 감점하면 이중 감점이 됩니다.

점검 순서를 정리하면

1. Open Graph 핵심 속성이 critical이면 다른 항목은 보지 말고 네 속성을 먼저 채웁니다. 대부분의 후속 항목이 이 값에 의존합니다.
2. Open Graph 이미지 URL이 warning이나 critical이면 이미지 경로를 HTTPS 절대 URL로 바꿉니다. 템플릿의 기본 이미지 경로 한 곳만 고치면 사이트 전체가 함께 해결되는 경우가 많습니다.
3. Open Graph 텍스트 품질의 warning은 페이지별 값이 실제로 그 페이지를 설명하는지 확인합니다. 주제 단어 불일치는 오탐일 수 있으니 문구를 직접 읽고 판단합니다.
4. Twitter Card 유형과 Twitter Card 콘텐츠는 X 유입이 있는 사이트만 우선순위를 높입니다. X를 쓰지 않는다면 twitter:card 하나만 summary_large_image로 선언하고 나머지는 Open Graph에 맡겨도 충분합니다.

수정 후에는 각 플랫폼이 제공하는 미리보기 디버거로 캐시를 갱신해야 합니다. 페이스북, 링크드인, X는 한 번 가져온 카드를 상당 기간 캐시하므로, 태그를 고쳐도 다시 긁어 가기 전까지는 예전 카드가 보입니다. 검사기의 pass 판정과 실제 카드 사이에 시차가 있는 가장 흔한 이유가 이것입니다.

이 검사가 확인하지 못하는 것

정직하게 범위를 밝힙니다.

• 단일 페이지 검사입니다. 검사한 URL 하나의 메타 태그만 읽습니다. 사이트의 다른 페이지가 같은 기본 이미지를 공유하는지, 게시글마다 값이 달라지는지는 알 수 없습니다.
• 초기 HTML 기준입니다. JavaScript 실행 후 <head>에 주입되는 메타 태그는 보지 않습니다. 대부분의 소셜 플랫폼 크롤러도 JavaScript를 실행하지 않으므로 이 기준이 실제와 가깝지만, 서버 렌더링으로 전환한 뒤 결과가 달라질 수는 있습니다.
• 이미지를 실제로 가져오지 않습니다. og:image URL 형식만 확인하고, 그 주소가 200으로 응답하는지, 파일 크기와 가로세로 비율이 플랫폼 권장 조건에 맞는지, 이미지 안에 글자가 너무 작지는 않은지는 확인하지 않습니다.
• 플랫폼별 렌더 결과를 재현하지 않습니다. 카카오톡, X, 슬랙, 페이스북이 각자 어떤 카드를 그릴지는 각 플랫폼의 그 시점 정책에 달려 있습니다. 검사기는 “플랫폼이 읽을 수 있는 형식인가”까지만 판정합니다.
• 주제 일치 판정은 단어 겹침입니다. 의미를 이해하지 않으므로 동의어를 쓴 경우 불일치로 나올 수 있습니다.
• og:locale, og:site_name, article:published_time 같은 선택 속성은 보지 않습니다. 검사 범위는 카드 생성에 직접 필요한 속성으로 제한했습니다.
• 판정은 애드브랜치의 우선순위입니다. 배점과 심각도는 이 검사기가 정한 기준이며, Google의 색인·순위 판정이나 AI 검색엔진의 판정 그 자체가 아닙니다. 이 카테고리를 만점으로 만들어도 검색 순위가 오른다고 말할 수 없으며, 얻는 것은 링크가 공유될 때 페이지를 제대로 대표하는 카드입니다.

이어서 읽기

항목별 수정 방법과 코드 예시는 옆의 표에 정리돼 있습니다. Open Graph를 포함한 SEO 점검 항목 전체의 맥락은 SEO 체크리스트에서, og:title·og:description과 페이지 제목·설명을 함께 다듬는 방법은 제목 태그와 메타 설명 작성법에서 이어서 읽어 보세요.