개발 slecs

게임 서비스 SNS 공유 메타태그 접근성과 크롤러 최적화 보완

목차

index.html 하나 파일에 메타태그 몇 줄 추가했다. 그런데 이게 생각보다 좀 더 챙겨야 할 맥락이 있어서 짧게 정리해둔다.

왜 이게 지금 필요했냐

게임 서비스에서 SNS 공유를 할 때 og:image는 이미 붙어 있었다. 링크 미리보기 자체는 됐고, 썸네일 이미지도 나왔다. 근데 몇 가지가 빠져 있었다.

  • og:image:alt — 이미지에 대한 텍스트 설명. 스크린리더 사용자나 이미지가 로드 안 됐을 때를 위한 값
  • og:image:width / og:image:height — 크롤러가 이미지를 prefetch할 때 사이즈를 미리 알면 레이아웃 계산을 빠르게 할 수 있음
  • twitter:image:alt — Twitter/X 카드 전용 alt. og:image:alt가 있어도 Twitter는 별도로 읽어감

이 중 alt 계열이 특히 접근성(a11y) 관점에서 챙겨야 하는 항목이다. SEO 도구에서 경고 항목으로 잡히기도 하고, 실제로 접근성 감사 기준에서 "이미지 메타에도 alt가 있어야 한다"는 점검 항목이 있다.

메타태그 구조 정리

태그 역할 없으면 어떻게 되나
og:image 공유 시 썸네일 이미지 URL 이미지 미리보기 없음
og:image:width / height 크롤러에 이미지 사이즈 힌트 제공 크롤러가 이미지 다운 후 파싱해야 함, 느려질 수 있음
og:image:alt 이미지 대체 텍스트 (OGP 스펙) 접근성 항목 누락, 일부 감사 도구 경고
twitter:image:alt Twitter 카드 전용 alt Twitter가 og:image:alt 를 fallback으로 안 쓰는 경우 누락

이번 커밋에서 추가한 게 이 표의 아래 세 개다.

<meta property="og:image:alt" content="[게임 서비스 이름] 대표 이미지" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image:alt" content="[게임 서비스 이름] 대표 이미지" />

width/height는 OGP 권장 사이즈인 1200×630을 기준으로. Twitter 카드도 동일 비율을 권장하기 때문에 이미지 자체는 공용으로 쓰는 구조.

팀 입장에서 이런 작업을 어떻게 보냐

솔직히 이런 메타태그 보완 작업은 우선순위 싸움에서 밀리기 쉽다. 기능이 눈에 보이게 달라지는 것도 아니고, 사용자가 바로 체감하는 변화도 아니다. 그래서 백로그에 쌓여 있다가 특정 시점에 몰아서 처리하게 되는 패턴이 반복된다.

근데 이 누락이 어디서 문제가 되냐면, 게임 서비스는 특히 커뮤니티 공유가 중요한 채널인 경우가 많다. Discord, Twitter/X, KakaoTalk 등 링크 미리보기가 예쁘게 나오냐 안 나오냐가 공유 유도에 직접 영향을 준다. 그리고 접근성 항목은 내버려 두면 나중에 기술 부채로 쌓여서 한번에 처리하는 비용이 커진다.

내가 팀에서 이런 작업에 대해 갖고 있는 원칙이 하나 있다면, "작지만 언제가 됐든 한 번은 해야 하는 작업은 다른 배포에 묻어서라도 처리한다" 는 것. 이번처럼 index.html 수정 타이밍이 생겼을 때 같이 끼워넣는 식으로.

코드리뷰에서도 이런 메타 관련 항목은 리뷰어가 놓치기 쉽다. HTML 한두 줄짜리 diff는 그냥 approve 누르고 넘어가게 되는데, 사실 이 시점에 "width/height 값이 실제 이미지 사이즈와 맞냐", "alt 텍스트가 의미 있게 작성됐냐" 같은 것도 짚어줄 수 있으면 좋다. 작업자 혼자 챙기기엔 신경 써야 할 포인트가 은근히 있다.

체크리스트로 남겨두는 og/twitter 메타 기본 세트

다음 서비스에서 초기 세팅할 때 쓰려고 메모해둔다.

  • [ ] og:title
  • [ ] og:description
  • [ ] og:image (절대 URL)
  • [ ] og:image:width / og:image:height
  • [ ] og:image:alt
  • [ ] og:url
  • [ ] og:type
  • [ ] twitter:card
  • [ ] twitter:title
  • [ ] twitter:description
  • [ ] twitter:image
  • [ ] twitter:image:alt

이 중 alt 계열 두 개(og:image:alt, twitter:image:alt)가 자주 빠지는 항목이다. 초기 세팅 PR 템플릿에 체크리스트로 넣어두면 실수를 줄일 수 있음.

작은 커밋이지만 접근성이랑 크롤러 최적화 두 마리를 잡은 작업이었다. 끝.

🛒 이 글과 어울리는 추천 상품

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.

이어보기

댓글 0

첫 댓글 달아줘.