og 태그 설정 — 카톡에 링크 붙였는데 미리보기가 안 뜰 때

사이트 주소를 카톡방에 붙여넣었는데 그냥 파란 글씨 링크만 덩그러니 뜬 적 있으실 겁니다. 남들 링크는 이미지에 제목에 설명까지 예쁘게 카드로 나오는데 말이죠. 저도 그게 왜 안 되는지 몰라서 한참 헤맸는데, 범인은 og 태그였습니다.

---

🔗 og 태그가 정확히 뭐냐면

페이지 안에 들어가는 미리보기용 쪽지라고 보시면 됩니다. 카톡·슬랙·페이스북 같은 앱이 링크를 받으면 그 페이지에 먼저 들어가서 이 쪽지를 읽습니다. "제목은 이거, 설명은 이거, 이미지는 이거 써라"라고 적혀 있으면 그대로 카드를 만들어 보여줍니다.

쪽지가 없으면요? 앱이 알아서 추측합니다. 그래서 엉뚱한 이미지가 걸리거나, 아예 아무것도 안 뜨고 맨 주소만 나옵니다. 내 사이트가 부실해 보이는 게 아니라 안내를 안 해준 것뿐입니다.

---

🧩 최소한 이 네 개는 채워야 합니다

실제로 채워보니 결국 중요한 건 네 개였습니다. 제목(og:title), 설명(og:description), 이미지(og:image), 주소(og:url)입니다. 이미지가 제일 중요합니다. 카드에서 눈에 들어오는 면적의 대부분이 이미지라, 이것만 제대로 걸어도 인상이 완전히 달라집니다.

이미지는 가로로 넓은 형태가 안전합니다. 정사각형이나 세로로 긴 걸 넣으면 앱마다 잘리는 위치가 달라서, 하필 글자 부분이 잘려나가는 사고가 납니다. 그리고 이미지 주소는 반드시 누구나 열 수 있는 공개 주소여야 합니다. 로그인해야 보이는 곳에 올려두면 앱이 못 읽습니다.

---

😤 제일 많이 당하는 함정: 고쳤는데 그대로임

이게 진짜 사람 잡습니다. og 태그를 고쳤는데 카톡에 붙여보면 예전 미리보기가 그대로 나옵니다. 내가 뭘 잘못했나 싶어서 또 고치고 또 붙여보고를 반복하게 되죠.

잘못한 게 아니라 캐시 때문입니다. 앱들이 한 번 읽은 미리보기를 저장해두고 한동안 재활용합니다. 각 서비스가 제공하는 미리보기 초기화 도구를 쓰거나, 주소 뒤에 의미 없는 값을 하나 붙여서(예: ?v=2) 새 주소인 척 테스트해보면 실제로 바뀌었는지 바로 확인됩니다. 이 사실을 모르면 멀쩡한 설정을 계속 뜯어고치게 됩니다.

---

🙆 직접 안 건드리고 가는 방법

물론 이걸 다 알아야만 하는 건 아닙니다. 레이블웹스로 사이트를 만들면 이 미리보기 정보가 처음부터 채워진 상태로 나옵니다. 업종이랑 하는 일을 설명으로 적으면 AI가 페이지를 만들면서 제목·설명·이미지를 같이 잡아주니까, 만든 주소를 그대로 카톡에 붙여도 카드가 뜹니다.

저는 이 순서를 반대로 겪었습니다. 손으로 다 해보고 나서야 "아 이거 원래 자동으로 되는 거였네" 했죠. 어느 쪽이든 미리보기 카드가 뜨는 링크와 안 뜨는 링크는 클릭률이 다릅니다. 손으로 하시든 자동으로 하시든 꼭 확인해보세요.

레이블웹스에서 사이트 만들어보기 →

---

📚 함께 보면 좋은 글

인스타 프로필 링크 거는법 — 한 줄짜리 그 자리, 제대로 쓰는 법
무료 도메인 발급 — 받고 나서 어디에 연결하나
개인사업자 홈페이지 만들기 — 사업자라면 빠지면 안 되는 것들
웹빌더 추천 — 뭘 만들 거냐에 따라 갈리는 선택 기준