OG 이미지가 카카오톡에서만 예전 것으로 보였던 이유

화면은 바뀌었는데 공유 이미지는 그대로였다

블로그 글 대표 이미지를 바꾼 뒤 브라우저에서는 새 이미지가 잘 보였다. 그런데 카카오톡에 링크를 붙여 넣으면 이전 OG 이미지가 계속 나왔다. 처음에는 배포가 안 된 줄 알았지만, 실제 HTML을 확인해 보니 메타 태그는 이미 새 주소였다.

curl -L https://example.com/posts/sample | grep -i "og:image"

이때 배운 점은 "페이지에서 보이는 이미지"와 "공유 미리보기 크롤러가 읽는 이미지"를 따로 봐야 한다는 것이다.

확인 순서

나는 아래 순서로 문제를 나눴다.

1. 응답 HTML에 og:image가 들어 있는지
2. 이미지 URL이 절대 경로인지
3. 이미지 URL을 비로그인 상태로 열 수 있는지
4. CDN이나 브라우저 캐시가 예전 HTML을 주는지
5. 메신저 쪽 미리보기 캐시가 남아 있는지

특히 상대 경로는 크롤러에 따라 다르게 처리될 수 있어서 절대 URL을 쓰는 쪽으로 기준을 바꿨다.

<meta property="og:image" content="https://example.com/images/post-cover.png" />

Next.js에서 헷갈렸던 부분

App Router에서 metadata를 수정했는데도 기대한 값이 안 나올 때가 있었다. 동적 페이지라면 slug별 값이 실제로 들어가는지 확인해야 했다.

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)

  return {
    title: post.title,
    openGraph: {
      title: post.title,
      images: [post.coverImage],
    },
  }
}

한 번은 coverImage가 빈 문자열일 때 기본 이미지로 대체하는 로직이 서버 렌더링 쪽에만 없어서 미리보기가 깨졌다. 화면 컴포넌트에서만 fallback을 넣어 둔 것이 원인이었다.

캐시를 의심할 때 본 것

배포 후에는 HTML 응답 헤더도 같이 봤다.

curl -I https://example.com/posts/sample
curl -I https://example.com/images/post-cover.png

HTML은 짧게 캐시하고, 해시가 붙은 정적 이미지는 길게 캐시하는 식으로 나누는 게 관리하기 쉬웠다. 이미지 파일 이름을 그대로 두고 내용만 바꾸면 미리보기 캐시가 더 오래 헷갈릴 수 있다.

정리

OG 문제는 코드가 틀린 경우도 있지만, 이미 고친 뒤의 캐시 때문에 오래 붙잡히기도 한다. 지금은 메타 태그 원본 확인, 이미지 직접 접근, 캐시 확인을 한 묶음으로 보고 나서 메신저 캐시를 의심한다.