😶 URL만 덩그러니 — 미리보기가 왜 안 뜰까?
카카오톡으로 내 사이트 링크를 공유했다. 그런데 미리보기가 안 나왔다. 제목도 없고, 이미지도 없고, 그냥 URL만 덩그러니. 받는 사람 입장에서는 무슨 링크인지 알 수가 없다.
원인은 오픈그래프(Open Graph) 태그가 빠진 것이었다. HTML에 몇 줄만 추가하니 바로 해결됐다.
🧩 오픈그래프가 뭔가요?
오픈그래프(Open Graph)는 페이스북이 만든 메타태그 규격이다. 카카오톡, 슬랙, 트위터(X), 디스코드 등 대부분의 플랫폼이 이 규격을 따른다. 링크를 공유할 때 제목·설명·이미지가 미리보기로 뜨는 게 전부 오픈그래프 태그 덕분이다.
HTML <head> 태그 안에 og:로 시작하는 메타태그를 추가하면 된다.
서버도, 백엔드도 필요 없다. HTML 파일 수정만으로 끝난다.
- 카카오톡, 슬랙, 트위터(X), 디스코드, 텔레그램 등 지원
- SEO와 직접 관련은 없지만 공유 클릭률에 영향
- 페이지마다 다른 제목·이미지 설정 가능
- 추가 비용·서버 없음, HTML만 수정
🏷️ 핵심 태그 4개
이 4개만 있으면 대부분의 플랫폼에서 미리보기가 뜬다.
<!-- 오픈그래프 기본 4개 --> <meta property="og:title" content="페이지 제목"> <meta property="og:description" content="페이지 설명을 한 줄로 요약"> <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:url" content="https://example.com/page.html"> <!-- 추가 권장 태그 --> <meta property="og:type" content="website"> <meta property="og:site_name" content="사이트 이름"> <!-- 트위터(X) 카드 --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="페이지 제목"> <meta name="twitter:description" content="페이지 설명"> <meta name="twitter:image" content="https://example.com/og-image.png">
"오픈그래프 메타태그 추가해줘. 제목은 [제목], 설명은 [설명], 이미지는 [이미지 URL]" — AI한테 이렇게 요청하면 head 태그에 넣을 코드를 바로 만들어준다. 트위터 카드도 같이 추가해달라고 하면 된다.
⚠️ 실제로 겪은 문제 두 가지
og:image에 /og-image.png처럼 상대경로를 쓰면 카카오톡이나 슬랙이 이미지를 못 찾는다. 외부 서버에서 URL을 읽기 때문에 반드시 https://example.com/og-image.png 형태의 절대경로를 써야 한다. 이게 제일 흔한 실수다.
해결법: 카카오 개발자 도구 공유 디버거(developers.kakao.com/tool/debugger/sharing)에서 URL을 입력하면 캐시가 초기화된다. 이후 다시 공유하면 새 이미지가 반영된다.
🪜 만드는 순서
🔎 배포 전·후 확인하는 도구
배포하기 전에 미리보기가 어떻게 보일지 확인할 수 있다. 아래 두 도구가 가장 많이 쓰인다.
두 디버거 모두 배포된 URL만 확인 가능하다. 로컬 파일은 외부에서 접근할 수 없으므로 Netlify에 배포한 후에 테스트해야 한다.
✅ 마무리 — 공유될 때 클릭률이 달라진다
오픈그래프는 구글 검색 순위에 직접 영향을 주진 않는다. 하지만 링크가 공유될 때 클릭률이 완전히 달라진다. 미리보기가 있는 링크와 없는 링크를 받았을 때 어느 쪽을 더 클릭하게 되는지 생각해보면 알 수 있다.
코드 4줄이면 된다. HTML 파일에 붙여넣고 배포하면 끝이다. 사이트를 만들고 처음 공유하기 전에 반드시 확인해두자.
이 글이 도움이 됐나요?
오픈그래프 설정부터 홈페이지 제작 전체 과정을 교재에서 단계별로 확인할 수 있어요.
📖 뚝딱닷컴 교재 보기