turin.blog
← 전체 글로 돌아가기

웹 개발

SNS 공유 미리보기가 깨질 때

웹 페이지를 SNS에 공유할 때 제목, 설명, 이미지가 제대로 표시되지 않을 때 수정하는 방법.

·2분 읽기

Link를 공유했을 때 Facebook이나 Twitter에서 미리보기가 아무것도 안 나타나거나 이상하게 보인다면, 메타데이터를 확인해야 한다.

Open Graph 메타데이터 확인

가장 먼저 페이지의 원본 HTML을 본다:

curl -s https://example.com/ | grep -i 'og:'

Open Graph 메타 태그가 있는가?

<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

이들이 없거나 빈 값이면 미리보기가 안 나온다.

이미지 URL 확인

og:image의 URL이 절대 경로인가?

<!-- 잘못됨 (상대 경로) -->
<meta property="og:image" content="/images/preview.jpg">

<!-- 올바름 (절대 경로) -->
<meta property="og:image" content="https://example.com/images/preview.jpg">

SNS 크롤러는 상대 경로를 해석하지 못할 수 있다. 항상 전체 URL을 사용한다.

또한 이미지 파일이 실제로 존재하는가?

curl -I https://example.com/images/preview.jpg
# 200 OK여야 함
# 404라면 이미지가 없는 것

이미지 사이즈

SNS마다 권장 사이즈가 있다.

Facebook: 1200x630px (1.91:1 비율) Twitter: 1024x512px (2:1 비율) LinkedIn: 1200x627px

권장 사이즈에 맞지 않으면 썸네일이 잘리거나 왜곡될 수 있다.

동적 페이지 확인

상품이나 포스트 같은 동적 페이지라면, 각 페이지마다 다른 메타데이터를 생성해야 한다.

// Next.js 예시
export async function getStaticProps({ params }) {
  const post = await getPost(params.id);

  return {
    props: { post },
    revalidate: 3600
  };
}

// 그리고 head에
<meta property="og:title" content={post.title}>
<meta property="og:image" content={post.thumbnailUrl}>

각 URL마다 고유한 메타데이터가 있어야 한다.

SNS 검증 도구 사용

Facebook의 Sharing Debugger에서 직접 테스트한다: https://developers.facebook.com/tools/debug/sharing/

URL을 입력하면 Facebook이 어떻게 보는지 확인할 수 있다. 만약 메타데이터가 부족하다면 "Missing required property" 경고가 나타난다.

또한 "Scrape Again" 버튼으로 새로 고침 후 변경 사항이 반영되었는지 확인한다.

Twitter Card

Twitter는 og 태그도 읽지만, 전용 태그도 있다:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="설명">
<meta name="twitter:image" content="https://example.com/image.jpg">

Twitter Card Validator에서 테스트한다: https://cards-dev.twitter.com/validator

캐시 문제

SNS 서비스는 메타데이터를 캐시한다. 메타데이터를 수정한 후에도 미리보기가 안 바뀔 수 있다.

이 경우 SNS의 캐시 갱신 도구를 사용한다:

또는 canonical 태그를 확인한다. 다른 URL로 리다이렉트되고 있지는 않나?

<link rel="canonical" href="https://example.com/correct-url">

canonical이 잘못 설정되면 SNS가 다른 페이지의 메타데이터를 가져올 수 있다.