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

나눔웹 마케팅 꿀팁

카톡 공유 썸네일이 예전 그대로일 때, 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
번호 분류 제목 글쓴이
88 웹 성능 뒤로 가기 하면 페이지가 처음부터 다시 뜰 때, bfcache 막는 원인 찾는 법 나눔웹
87 마케팅 LocalBusiness 구조화 데이터 작성법, 구글에 상호·주소·영업시간 정확히 알리기 나눔웹
86 UI/UX 링크 밑줄이 글자에 붙어 답답할 때, text-underline-offset으로 다듬는 법 나눔웹
85 모바일 모바일 키보드가 입력창을 가릴 때, visualViewport로 화면 맞추는 법 나눔웹
84 웹 성능 사용하지 않는 CSS 줄이기, 크롬 Coverage 탭으로 안 쓰는 코드 찾는 법 나눔웹
83 마케팅 GA4 문의 전환 설정법, 감사 페이지 도달로 실제 문의 수 세는 순서 나눔웹
82 UI/UX 고정 헤더에 제목이 가려질 때, scroll-margin-top으로 앵커 맞추는 법 나눔웹
81 퍼블리싱 CSS 컨테이너 쿼리 쓰는 법, 화면이 아니라 카드 폭에 맞춰 반응하기 나눔웹
80 UI/UX 폼 에러가 입력 전에 뜨는 문제, :user-invalid로 고치는 법 나눔웹
79 모바일 모바일 브라우저 상단바 색 맞추기, theme-color 메타 태그 쓰는 법 나눔웹
78 마케팅 문의 완료 페이지 noindex 설정법, 검색에 잡히지 않게 막는 순서 나눔웹
77 UI/UX 문의란이 내용만큼 늘어나게, CSS field-sizing으로 맞추는 법 나눔웹
76 웹 성능 긴 페이지 스크롤이 무거울 때, content-visibility로 렌더링 줄이는 법 나눔웹
75 모바일 모바일 100vh 잘림, dvh·svh로 주소창 높이까지 맞추는 법 나눔웹
74 마케팅 구글 서치 콘솔 등록 방법, 새 홈페이지 소유권 확인부터 색인 요청까지 나눔웹
73 퍼블리싱 CSS :has() 선택자 활용법, 자식 상태에 따라 부모 박스 스타일 바꾸기 나눔웹
72 웹 성능 반응형 이미지 srcset 쓰는 법, 모바일에 PC용 큰 사진을 보내지 않으려면 나눔웹
71 퍼블리싱 제목 줄바꿈이 어색할 때, text-wrap: balance로 한 단어만 남는 문제 정리 나눔웹
70 마케팅 robots.txt 작성법, 검색에 안 보여야 할 페이지와 사이트맵 위치 알려주는 순서 나눔웹
69 UI/UX 스켈레톤 로딩 화면 만들기, 빈 화면 대신 회색 자리 표시로 기다림 줄이는 법 나눔웹
Board Pagination Prev 1 2 3 4 5 Next
/ 5
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4