게임 허브 SNS 공유 미리보기가 드디어 뜨게 됐다
목차
게임 허브 페이지에 OG/트위터 카드 메타를 달았다. index.html 한 파일 수정이지만, 이게 SNS 공유 경험 전체를 바꾸는 작업이라 가볍게 보기 어렵다.
왜 지금 이 작업이었나
팀 내에서 "링크 공유하면 미리보기가 안 뜬다"는 얘기가 계속 나왔다. 카카오, 디스코드, 트위터에 링크를 붙여넣으면 그냥 URL 텍스트만 나오는 상황. 게임 허브 특성상 유저 간 공유가 꽤 빈번한 유입 경로인데, 이걸 방치하면 클릭률에 직접 영향이 간다.
SEO 작업은 우선순위에서 자주 밀린다. "기능부터 완성하고" 라는 말이 반복되면서 메타 태그가 비어 있는 채로 배포가 나가는 일이 생기는데, 게임 허브처럼 콘텐츠 공유가 핵심인 서비스에서는 이게 진짜 손실이다. 이번에 OG + 트위터 카드를 같이 묶어서 처리한 건 "한 번 열었을 때 다 잡자"는 판단이었다.
작업 내용
index.html에 추가한 메타 태그는 크게 두 그룹.
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/games-hub" />
<meta property="og:title" content="Games Hub" />
<meta property="og:description" content="..." />
<meta property="og:image" content="https://example.com/og-image.png" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Games Hub" />
<meta name="twitter:description" content="..." />
<meta name="twitter:image" content="https://example.com/og-image.png" />
OG는 페이스북/카카오/디스코드/슬랙 등 대부분의 플랫폼이 파싱하고, 트위터 카드는 별도 네임스페이스(name= vs property=)를 쓰기 때문에 둘 다 챙겨야 한다. 트위터가 og: 태그를 폴백으로 읽기도 하지만, summary_large_image 같은 카드 타입은 명시적으로 선언해야 적용된다.
| 속성 | Open Graph | Twitter Card |
|---|---|---|
| 네임스페이스 | property="og:*" |
name="twitter:*" |
| 이미지 권장 사이즈 | 1200×630 | 1200×628 (large) |
| 파싱 주체 | Facebook, KakaoTalk, Discord, Slack 등 | Twitter/X |
| 폴백 | 없음 (직접 선언 필요) | OG 태그 일부 폴백 가능 |
이미지 하나를 양쪽에서 쓰는 게 일반적이긴 한데, 트위터 summary_large_image는 2:1 비율을 권장하기 때문에 OG 기본 비율(1.91:1)과 살짝 다르다. 엄밀하게 하려면 각각 따로 만들어야 하지만, 실용적으로는 1200×628 하나로 양쪽 다 쓰는 경우가 많다.
SPA / 정적 파일 배포 시 주의점
게임 허브가 SPA 구조라면 index.html 하나가 모든 라우트를 받는 구조다. 이 경우 OG 메타는 정적으로 박혀 있기 때문에, 특정 게임 페이지 URL을 공유했을 때도 허브 전체 OG가 뜨게 된다. 페이지별로 다른 OG가 필요하다면 SSR이나 프리렌더러, 또는 엣지/서버에서 <head>를 동적으로 주입하는 방식이 필요하다.
이번 작업 범위는 허브 전체 대표 이미지/타이틀로 OG를 고정하는 것까지였고, 게임 단위 동적 OG는 다음 단계 이슈로 남겼다. 팀과 얘기할 때 "지금 당장 공유 미리보기가 뜨는 것 vs 게임별 맞춤 이미지" 트레이드오프를 명확히 해두는 게 중요하다. 기술적으로 완벽한 해결을 기다리다 보면 배포가 또 밀리기 때문이다.
회고
이런 작업은 코드 리뷰에서도 "한 줄 수정"처럼 보여서 리뷰어가 가볍게 넘기기 쉽다. 근데 실제로는 이미지 경로가 절대 URL인지, OGP 디버거(페이스북 공유 디버거, Twitter Card Validator)로 실제 파싱 결과를 확인했는지, 이미지 파일이 크롤러 접근 가능한 위치에 있는지 등 체크 포인트가 제법 된다.
리뷰할 때 "OGP 디버거 결과 스크린샷 PR에 붙여달라"고 요청하는 걸 팀 컨벤션으로 가져가는 게 좋다. 메타 태그는 배포 전에 로컬에서 확인이 어렵고, 실제 URL로 파싱해봐야 결과가 나오기 때문이다. 캐시도 문제인데, 각 플랫폼마다 캐시 갱신 주기가 달라서 수정 후 바로 반영이 안 되는 것처럼 보이는 경우가 있다. 페이스북 디버거의 "다시 스크랩" 버튼을 직접 눌러줘야 즉시 반영되는 식이다.
작은 파일 수정이지만, 유저가 링크를 공유하는 순간부터 그 페이지의 첫인상을 만드는 작업이다. 그냥 넘기기엔 아까운 포인트.
다음 단계는 게임별 동적 OG 처리.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.