앱의 아이콘과 메타데이터가 제대로 안 나타날 때

앱을 배포한 후 소셜 미디어에 공유했는데 아이콘이나 제목이 이상하게 나타나는 경우가 있다.

Open Graph 태그 확인

웹 페이지의 head 태그에 og:image, og:title, og:description이 제대로 들어가 있는지 본다.

curl -s 'https://example.com' | grep -E '<meta property="og:' | head -5

값이 없거나 오류 페이지 URL이 들어가 있으면 이게 문제다. Open Graph 이미지 URL이 공개적으로 접근 가능한지도 확인해야 한다.

캐시 삭제

소셜 미디어 플랫폼들은 메타데이터를 캐시한다. 내용을 바꾼 후 캐시가 갱신될 때까지 몇 시간이 걸릴 수 있다.

Facebook의 Sharing Debugger, Twitter의 Card Validator 같은 도구에서 강제로 다시 스크래핑하도록 할 수 있다.

이미지 최적화

OG 이미지 크기와 형식이 각 플랫폼의 요구사항을 만족하는지 확인한다. 보통 최소 1200x630 픽셀의 JPG나 PNG를 권한다.

Next.js를 쓰면 동적으로 OG 이미지를 생성할 수도 있는데, 배포 후 이미지 생성이 제대로 되고 있는지 로그로 확인해두면 나중에 문제가 생겼을 때 도움이 된다.