실무에 바로 적용할 수 있는 웹 제작 꿀팁 및 유용한 자료실 공간입니다.
나눔웹이 제공하는 핵심 노하우와 마케팅 인사이트를 자유롭게 활용해 보십시오.

나눔웹 마케팅 꿀팁

카톡 공유 썸네일이 예전 그대로일 때, OG 캐시 초기화로 바로 바꾸는 법

카톡 공유 썸네일이 리뉴얼 전 이미지나 예전 문구로 계속 뜬다면, 사이트가 아니라 카카오 쪽에 저장된 OG 캐시 때문인 경우가 대부분입니다.
og 태그를 고친 뒤 캐시를 초기화하고, 이미지 주소를 새로 바꿔 주면 대부분 바로 반영됩니다. 실제 오픈 직전에 쓰는 점검 순서대로 정리했습니다.

💡 태그를 분명히 고쳤는데 왜 그대로일까요?

카카오톡이나 페이스북은 링크가 처음 공유될 때 페이지의 og:title, og:description, og:image를 읽어 와서 한동안 저장해 둡니다. 그다음부터는 사이트를 다시 읽지 않고 저장해 둔 정보를 보여 주기 때문에, 서버에서 아무리 고쳐도 대화방에는 예전 미리보기가 나옵니다. 리뉴얼 오픈 날 "카톡에 옛날 로고가 나와요"라는 연락이 오는 이유가 바로 이것입니다.

1. 먼저 내 페이지의 og 태그부터 확인

캐시를 지우기 전에 페이지 소스(Ctrl+U)에서 태그가 제대로 나가는지 봐야 합니다. 태그가 틀린 상태로 초기화하면 틀린 정보가 다시 저장될 뿐입니다. 특히 og:image는 https://로 시작하는 전체 주소여야 하고, 로그인 없이 열리는 이미지여야 합니다.

<meta property="og:title"
      content="나눔웹 - 홈페이지 제작">
<meta property="og:description"
      content="2004년부터 이어온 홈페이지 제작">
<meta property="og:image"
      content="https://example.com/og/main_v2.jpg">
<meta property="og:url"
      content="https://example.com/">

2. 카카오 공유 디버거에서 캐시 초기화

카카오 디벨로퍼스의 공유 디버거에 카카오 계정으로 로그인한 뒤 공유할 주소를 넣으면, 지금 저장된 미리보기가 나옵니다. 여기서 캐시 초기화를 누르고 다시 조회해서 새 제목과 이미지가 보이는지 확인하면 됩니다. 페이스북과 인스타그램 링크 미리보기는 페이스북 공유 디버거에서 다시 스크랩하면 갱신됩니다.

주의할 점은 주소가 조금만 달라도 캐시가 따로 잡힌다는 것입니다. www가 붙은 주소와 안 붙은 주소, 끝에 /가 있는 주소와 없는 주소, UTM이 붙은 주소는 각각 따로 초기화해야 합니다. 실제로 많이 공유된 주소를 모두 넣어 보는 것이 안전합니다.

3. 이미지는 파일명을 바꿔서 올리기

제목은 바뀌었는데 이미지만 그대로인 경우가 있습니다. 이미지 자체도 주소 기준으로 따로 저장되기 때문입니다. 같은 이름으로 덮어쓰지 말고 main_v2.jpg처럼 파일명을 바꾸거나 ?v=2를 붙여 새 주소로 지정하면 깔끔하게 해결됩니다.

증상먼저 볼 곳
제목과 이미지 모두 예전 그대로카카오 공유 디버거 캐시 초기화
제목만 바뀌고 이미지는 그대로이미지 파일명 변경 후 다시 초기화
초기화해도 회색 빈 박스og:image 전체 주소와 공개 여부
www 주소로 보낼 때만 예전 화면주소별로 각각 초기화

"오픈 날 첫 공유 전에 디버거부터 한 번."

나눔웹은 리뉴얼 오픈 때 og 태그와 공유 미리보기 캐시까지 확인한 뒤
고객사에 오픈 안내를 드립니다.


List of Articles
번호 분류 제목 글쓴이
50 웹 성능 홈페이지 로딩 속도를 3배 높이는 '이미지 최적화' 실무 가이드 나눔웹
49 퍼블리싱 CSS 변수로 유지보수와 테마 기능을 한 번에! (CSS Custom Properties) 나눔웹
48 마케팅 카카오톡 링크 썸네일의 비밀! 클릭률을 높이는 '오픈 그래프(OG)' 세팅법 나눔웹
47 모바일 모바일 꽉 찬 화면 하단 짤림 현상! '100vh'의 함정과 완벽 해결법 나눔웹
46 웹 성능 홈페이지 첫 화면 글자 깜빡임(투명 현상) 1초 만에 해결하는 법 나눔웹
45 퍼블리싱 스마트폰에서 로고가 흐리게 보인다고요? 'SVG' 포맷이 정답입니다. 나눔웹
44 웹 성능 클릭 실수 유발하는 '화면 덜컹거림(CLS)', 단 한 줄로 해결하는 법 나눔웹
43 모바일 고객의 이탈을 막는 1초 디테일, '모바일 맞춤형 키보드' 세팅법 나눔웹
42 UI/UX 모바일에서 버튼 누를 때 생기는 촌스러운 '회색 박스' 없애는 법 나눔웹
41 UI/UX 레이아웃을 망치는 긴 글, 예쁘게 '...'으로 자르는 마법의 CSS 나눔웹
40 UI/UX 상단 메뉴에 제목이 가려진다고요? '부드러운 스크롤' 마법의 2줄 나눔웹
39 모바일 아이폰에서 입력창 누를 때 화면 '자동 확대'되는 현상 막는 법 나눔웹
38 퍼블리싱 지저분한 모바일 스크롤바, 기능은 남기고 쏙 숨기는 마법의 CSS 나눔웹
37 모바일 모바일 웹을 진짜 '앱(App)'처럼! 이미지 꾹 누를 때 뜨는 팝업 막기 나눔웹
36 UI/UX 애플(Apple) 사이트처럼 고급스러운 '반투명 유리' 메뉴 만드는 법 나눔웹
35 퍼블리싱 무거운 플러그인 NO! 넷플릭스처럼 쫀득한 '가로 스와이프' CSS로 뚝딱 만들기 나눔웹
34 UI/UX 1%의 디테일이 브랜딩을 완성합니다! '텍스트 드래그 색상' 바꾸기 나눔웹
33 UI/UX 투박한 파란색 체크박스는 그만! 단 1줄로 우리 회사 컬러 입히기 나눔웹
32 모바일 하단 고정 버튼이 아이폰 '검은 줄'에 겹친다면? (Safe Area 대응법) 나눔웹
31 모바일 앗, 실수로 새로고침! 튕기는 모바일 화면 꽉 잡는 법 (Overscroll) 나눔웹
Board Pagination Prev 1 2 3 Next
/ 3
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4