나눔웹 마케팅 꿀팁

카카오톡 링크 공유 시 예쁘게 나오게 하는 마법, '오픈 그래프'

우리 회사 홈페이지 URL을 카카오톡이나 페이스북에 공유했을 때, 어떤 사이트는 멋진 이미지와 깔끔한 제목이 나오는 반면, 어떤 사이트는 로고가 짤리거나 텍스트만 덜렁 나오는 것을 보신 적 있으실 겁니다.
이 엄청난 차이는 바로 '오픈 그래프(Open Graph)' 태그의 유무에서 발생합니다.

💡 오픈 그래프(OG) 메타 태그란?

웹페이지가 소셜 미디어(SNS)나 메신저로 공유될 때, 해당 서비스의 크롤러(로봇)가 읽어갈 수 있도록 미리보기 제목, 설명, 이미지 정보를 표준화하여 지정해 주는 HTML 코드입니다.

1. 반드시 적용해야 할 핵심 OG 태그 4가지

홈페이지의 <head> 와 </head> 태그 사이에 아래 코드를 삽입하기만 하면, 누구나 누르고 싶어지는 깔끔한 링크 썸네일이 완성됩니다.

<!-- 카카오, 페이스북 등을 위한 필수 Open Graph 태그 -->
<meta property="og:type" content="website">
<meta property="og:title" content="클릭을 유도하는 매력적인 페이지 제목">
<meta property="og:description" content="페이지에 대한 1~2줄의 간략하고 후킹성 있는 설명글">
<meta property="og:image" content="https://나의도메인.com/images/share-thumbnail.jpg">
<meta property="og:url" content="https://나의도메인.com">

2. 썸네일 이미지 권장 해상도 (실무 꿀팁)

기껏 이미지를 넣었는데 위아래가 잘린다면 소용이 없겠죠? 주요 플랫폼(카카오톡, 페이스북, 링크드인 등)에서 이미지가 잘리지 않고 가장 예쁘게 노출되는 황금 비율이 있습니다.

✓ 권장 해상도: 가로 1200px × 세로 630px (비율 1.91:1)
✓ 용량: 1MB 이하의 JPG 또는 PNG 권장
✓ 핵심 텍스트 위치: 스마트폰 기종에 따라 좌우가 살짝 크롭될 수 있으므로, 중요한 로고나 카피는 이미지 정중앙에 배치하세요.

마케팅의 시작은 링크를 공유하는 그 순간부터입니다.

나눔웹은 개발 초기 단계부터 검색엔진(SEO) 및 SNS 공유 최적화 메타 태그를 기본적으로 세팅하여 마케팅 효율을 극대화합니다.

List of Articles
번호	분류	제목	글쓴이
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	스켈레톤 로딩 화면 만들기, 빈 화면 대신 회색 자리 표시로 기다림 줄이는 법	나눔웹
68	퍼블리싱	모바일에서 표(table)가 깨질 때, 가로 스크롤로 감싸거나 카드형으로 바꾸는 법	나눔웹
67	웹 성능	gzip 압축 설정법, 홈페이지 HTML·CSS 파일을 작게 보내 로딩 줄이는 순서	나눔웹
66	모바일	아이폰에서 숫자가 파란 전화 링크로 바뀔 때, format-detection으로 막는 법	나눔웹
65	마케팅	사이트맵(sitemap.xml) 만들기, 새 페이지가 검색에 늦게 잡힐 때 작성과 제출법	나눔웹
64	UI/UX	FAQ 아코디언 만들기, details와 summary 태그로 스크립트 없이 접고 펴는 법	나눔웹

번호

분류

제목

글쓴이

마케팅

GA4 문의 전환 설정법, 감사 페이지 도달로 실제 문의 수 세는 순서 new

카카오톡 링크 썸네일의 비밀! 클릭률을 높이는 '오픈 그래프(OG)' 세팅법

카카오톡 링크 공유 시 예쁘게 나오게 하는 마법, '오픈 그래프'

💡 오픈 그래프(OG) 메타 태그란?

1. 반드시 적용해야 할 핵심 OG 태그 4가지

2. 썸네일 이미지 권장 해상도 (실무 꿀팁)