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

나눔웹 마케팅 꿀팁

카톡에 우리 회사 링크 보낼 때 뜨는 '회색 빈 박스' 없애는 필수 세팅

새로 단장한 우리 회사 홈페이지 주소를 지인이나 고객에게 카카오톡으로 공유해 보신 적 있으신가요?
혹시 매력적인 사진 대신 텅 빈 '회색 박스'가 뜨거나, 알 수 없는 영어 코드들이 제목으로 뜨고 있지는 않나요? 만약 그렇다면, 여러분은 지금 엄청난 양의 무료 홍보 트래픽(입소문)을 허공에 날리고 있는 것입니다.

💡 미리보기 카드(오픈그래프)가 클릭률을 지배합니다.

사람들은 텍스트만 덜렁 있는 URL 링크를 누르는 것을 꺼립니다 (스팸이나 해킹을 의심하기도 합니다). 사이트의 매력을 한눈에 보여주는 '오픈그래프(Open Graph, OG) 태그'가 세팅된 링크는 일반 링크보다 클릭률(CTR)이 최소 3배 이상 높습니다.

1. 마케터라면 반드시 챙겨야 할 3대 OG 태그

개발자에게 우리 사이트의 HTML 헤더(<head>) 영역에 아래 3가지 마케팅 태그가 완벽하게 세팅되어 있는지 꼭 확인을 요청하십시오. 이 3가지만 잘 들어가 있어도 페이스북, 카카오톡, 슬랙 어디서든 최고의 간판 역할을 합니다.

<!-- 웹사이트 <head> 안에 들어가는 마케팅 필수 코드 -->

<!-- 1. 썸네일 제목: 고객의 클릭을 유도하는 후킹(Hooking) 문구 -->
<meta property="og:title" content="나눔웹 | 매출을 200% 올려주는 하이엔드 웹사이트 제작">

<!-- 2. 썸네일 설명: 서비스의 핵심 가치를 요약한 1~2줄 -->
<meta property="og:description" content="단순한 디자인을 넘어 비즈니스 그로스(Growth)를 고민합니다. 지금 무료 컨설팅을 받아보세요.">

<!-- 3. 썸네일 이미지: 가장 중요한 시각적 간판 (가로 1200px, 세로 630px 권장) -->
<meta property="og:image" content="https://nanumweb.com/images/og_banner.jpg">

2. 썸네일 이미지 최적화 황금 비율 (1200 x 630)

아무 사진이나 넣으면 카카오톡에서 이미지가 위아래로 흉하게 잘려 나갑니다. 가로 1200px, 세로 630px 해상도로 이미지를 제작하세요. 이 비율이 카카오톡, 페이스북, 링크드인 등 전 세계 주요 플랫폼이 공통으로 권장하는 가장 완벽한 황금 비율입니다.

"공유되는 찰나의 순간이 마케팅의 성패를 가릅니다."

나눔웹은 사이트를 제작할 때 겉으로 보이는 디자인뿐만 아니라,
SNS상에서 어떻게 바이럴(Viral)되는지까지 치밀하게 계산하여 마케팅 최적화를 기본으로 탑재합니다.


List of Articles
번호 분류 제목 글쓴이
88 웹 성능 뒤로 가기 하면 페이지가 처음부터 다시 뜰 때, bfcache 막는 원인 찾는 법 new 나눔웹
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