소셜 프리뷰 이미지 수정: 메타 태그 이해, 올바른 경로 설정 및 캐시 버스팅

Source: Dev.to

소셜 미리보기 이미지 작동 방식

메타 태그

누군가 링크를 공유하면 소셜 플랫폼은 이 태그들을 한 번 가져가고 이미지를 다운로드한 뒤 내부적으로 캐시합니다. 따라서 이미지를 교체하거나 삭제하거나 재배포하더라도 캐시된 버전이 계속 표시될 수 있습니다.

올바른 이미지 경로 (/public 폴더에 특히 중요)

예시 구조

/public
    og-image.png
    twitter.png

이 파일들은 사이트 루트에서 제공됩니다:

https://yourdomain.com/og-image.png
https://yourdomain.com/twitter.png

URL에 /public을 포함하지 마세요; /public 내부의 모든 파일은 자동으로 사이트 루트에서 접근 가능합니다.

삭제된 이미지가 여전히 표시되는 이유

이유: 소셜 플랫폼이 미리보기를 적극적으로 캐시함

이 캐시들은 서버‑측이며 브라우저‑측 캐시와는 별개입니다. 브라우저 캐시를 지워도 아무 효과가 없습니다.

해결 방법: 수동 캐시 새로 고침 (플랫폼 도구)

Facebook / LinkedIn / Slack

도구:

1. URL을 입력합니다.
2. Scrape Again을 클릭합니다 (2~3회 반복).

Twitter (X)

도구:

1. URL을 입력합니다.
2. Preview Card를 클릭합니다 – Twitter가 메타 데이터를 자동으로 다시 가져옵니다.

Discord

수동 도구는 제공되지 않습니다. 가장 빠른 방법은:

• 파일 이름을 바꾸거나
• 버전 쿼리 문자열을 추가하는 것(캐시 busting).

캐시 busting: 가장 신뢰할 수 있는 해결책

옵션 A — 파일 이름 변경

이미지 이름을 바꾸세요(예: og-image-v2.png) 그리고 메타 태그를 그에 맞게 업데이트합니다.

옵션 B — 쿼리 문자열 추가 (추천)

또는 URL을 직접 사용합니다:

https://yourdomain.com/og-image.png?v=2

작동 원리: 소셜 플랫폼은 쿼리 문자열이 다른 모든 URL을 완전히 새로운 리소스로 간주하여 새 이미지를 강제로 가져옵니다.

태그가 정상 작동하는지 확인하기

1. 페이지 소스 검사

메타 태그가 원시 HTML에 존재하는지 확인하세요(클라이언트‑사이드 JavaScript가 나중에 생성한 것이 아니라).

2. cURL 또는 fetch 사용

curl -L https://yourdomain.com | grep og:image

3. 소셜 디버거 다시 사용

플랫폼별 디버거 도구에 URL을 입력해 업데이트된 태그가 읽히는지 확인합니다.

앞으로 시간을 절약할 수 있는 모범 사례

• 소셜 이미지에는 버전이 포함된 URL을 항상 사용하세요.
• 소셜 이미지는 /public/meta/와 같은 전용 폴더에 보관하세요.
• 고대비, 최소한의 브랜딩을 선택해 미리보기 크기에서도 이미지가 잘 보이게 하세요.
• 파일 이름 재사용을 피하고 업데이트를 명확히 표시하세요.
• 메타 태그는 서버‑사이드(SSR/HTML)에서 렌더링하고, 클라이언트‑사이드 렌더링에 의존하지 마세요.

결론

소셜 플랫폼이 아직도 오래된 미리보기 이미지를 표시한다면, 문제는 거의 캐시이며 호스팅이 아닙니다. 올바른 경로 사용, 캐시 작동 방식 이해, 그리고 캐시 busting 기법을 적용하면 업데이트된 미리보기 이미지가 모든 곳에 즉시 표시됩니다. 이 워크플로우는 추측에 소요되는 시간을 크게 줄이고, 페이지를 새로 게시하거나 브랜드 자산을 업데이트할 때 자신감을 줍니다.