우리 가게에서 제일 잘 나가는 베스트 상품 10개를 아주 정성껏 줄글로 나열해 둬도, 검색결과 창에서 그저 밋밋한 텍스트 한 줄로 뭉개져 보인다면 고객은 절대 클릭하지 않습니다.
핵심은 검색창에 나만의 작은 모바일 쇼윈도를 차리는 겁니다. 독자가 블로그에 들어오기도 전에, 검색결과 화면에서 1위부터 6위까지의 상품 이미지와 링크를 좌우로 쓱쓱 넘겨보게 만드는 마법. 그게 바로 캐러셀(ListItem) 구조화된 데이터가 체류 시간과 클릭률을 동시에 폭발시키는 진짜 이유입니다.
정성껏 큐레이션 한 리스트가 투명인간 취급받는 이유
가까운 지인이 수제 디저트를 파는 작은 베이커리를 운영합니다. 연말을 맞아서 '이번 달 가장 많이 팔린 시그니처 구움과자 BEST 6'라는 포스팅을 아주 야심 차게 올렸죠. 과자 하나하나 고화질로 사진도 찍고, 맛 표현도 기가 막히게 적어놨습니다. 근데 애널리틱스를 보니 참혹하더라고요. 노출은 꽤 되는데 정작 내 사이트로 넘어오는 클릭수는 거의 바닥을 기고 있었습니다.
도대체 왜 안 들어오나 싶어서 네이버 모바일 창에 지인의 가게 이름을 검색해 봤습니다. 이유는 아주 명백했습니다. 다른 대형 프랜차이즈 카페들의 글은 스니펫에 벌써 먹음직스러운 빵 사진들이 카드 형태로 나란히 떠서, 손가락으로 밀어볼 수 있게 세팅되어 있었습니다. 반면 지인의 블로그는 "안녕하세요, 오늘은 저희 매장의..." 하는 쓸데없는 서론 텍스트만 덜렁 노출되고 있었죠. 화려한 사진들을 잔뜩 올려둔 경쟁사들 사이에서 완전히 투명인간 취급을 받고 있던 겁니다. 진짜 허무한 일이죠.
지인은 대기업 쇼핑몰들만 저렇게 가로로 넘겨보는 슬라이드 기능을 네이버에서 특혜로 달아주는 줄 알았습니다. 뭐랄까, 지독한 정보의 비대칭이었습니다. 그건 누구나 검색로봇의 언어만 알면 공짜로 세팅할 수 있는 기본 기능에 불과했거든요.
schema.org에서 규정한 ItemList와 그 하위의 ListItem 마크업은 로봇에게 "이 글은 단순한 줄글이 아니라, 여러 아이템이 모인 카탈로그야"라고 알려주는 번역기입니다. 두루뭉술하게 통짜로 적어둔 글을 쪼개서, 각각의 이미지와 링크를 하나로 묶어 로봇의 뇌 구조에 완벽하게 꽂아주는 방식이죠.
복붙으로 끝내는 나만의 모바일 쇼윈도 세팅
코딩의 'ㅋ' 자도 모르는 지인은 또다시 지레 겁을 먹었습니다. JSON-LD라느니 객체 요소라느니 하는 말들이 외계어처럼 들렸을 테니까요. 하지만 작성법은 크게 두 가지인데, 초보자에게는 item 요소 없이 아주 심플하게 나열하는 두 번째 방법이 훨씬 직관적입니다. 빈칸 채우기 게임이죠.
머리 아프게 생각할 것 없이, 아래 형태의 코드를 메모장에 펼쳐놓고 내 포스팅의 진짜 상품 이름과 사진 주소로 내용만 갈아 끼워주면 끝납니다.
"@context": "http://schema.org",
"@type": "ItemList",
"itemListElement": [
{
"@type": "ListItem",
"name": "클래식 휘낭시에",
"image": "https://mysite.com/photos/item-1.jpg",
"url": "https://mysite.com/url-1",
"position": "1"
}
]
· image (필수): 검색결과에 노출될 썸네일 이미지를 뜻합니다. 반드시 절대 경로 URL 형태로 꽉 채워서 적어야 합니다.
· name & url: 필수는 아니지만 클릭률을 높이려면 무조건 적어야 합니다. 상품 이름과 클릭 시 이동할 링크입니다.
· position: 화면에 표시될 슬라이드의 순서(번호)입니다.
귀찮음이 불러온 대참사: 로고의 배신
이렇게 코드를 작성하고 지인은 아주 신이 나서 매일같이 모바일 통합검색 창만 새로고침을 해댔습니다. 드디어 내 글 밑에도 화려한 빵 사진들이 넘겨보기 형태로 뜨겠지 기대하면서요. 하지만 일주일이 넘도록 결과는 처참했습니다. 화면에는 여전히 서론 텍스트만 덜렁 떠 있었습니다. 네, 또 시원하게 망한 겁니다.
화가 난 지인과 함께 도대체 어느 부분에서 로봇이 코드를 뱉어낸 건지 네이버의 기본 가이드라인을 이 잡듯 뒤져보기 시작했습니다. 그리고 지인이 귀찮아서 대충 꼼수를 부린 아주 치명적인 실수를 두 가지나 발견했죠.
로봇은 꼼수를 용서하지 않습니다: 첫째, 1개 페이지에는 무조건 1개의 listItem 캐러셀만 사용하는 것을 권장합니다. 둘째, 이미지 간 중복이 절대 발생해서는 안 됩니다. 귀찮다고 매장의 로고나 기본 이미지를 모든 아이템에 똑같이 재사용하면 로봇은 전체 코드를 쓰레기로 간주하고 무시합니다.
편법을 버리고 정공법을 택했을 때 벌어진 일
지인은 한 페이지 안에 구움과자 리스트, 케이크 리스트, 음료 리스트 등 무려 4개의 캐러셀 코드를 욱여넣었습니다. 게다가 6개의 상품 사진 주소를 일일이 따서 넣기 귀찮다며, 가게 간판 로고 이미지 하나를 복사해서 1위부터 6위까지 몽땅 똑같이 발라버렸던 겁니다. 사람 눈엔 그저 귀여운 로고로 보일지 몰라도, 검색엔진 입장에서는 앵무새처럼 똑같은 사진만 반복하는 질 낮은 스팸 데이터에 불과했던 거죠. 편법이 수집 누락을 유발하는 가장 빠른 지름길이었습니다.
뼈아픈 실패를 겪고 나서야 근본적인 체질 개선에 들어갔습니다. 욕심을 버리고 딱 1개의 캐러셀 코드만 남겼습니다. 그리고 1위부터 6위까지 중복되지 않는 '진짜 고화질 원본 빵 사진'의 절대 경로 URL을 하나하나 정성스럽게 매칭했습니다. 솔직히 귀찮아도 결국 이게 유일한 정답이거든요.
그렇게 코드를 다듬고 얼마 지나지 않아 정말 짜릿한 일이 벌어졌습니다. 누군가 '디저트 베스트 추천'을 검색하자마자, 유명 프랜차이즈 플랫폼들 사이에서 지인의 글 하단에 영롱한 빵 사진 6장이 슬라이드 형태로 깔끔하게 노출되기 시작한 겁니다. 검색 사용자는 글에 들어가기도 전에 손가락을 옆으로 튕겨보며 쇼윈도를 구경하듯 이미지를 감상했습니다. 신기하게도 그날 이후로 클릭률(CTR)이 미친 듯이 솟구쳤고, 구경만 하고 나가는 대신 장바구니에 종류별로 빵을 쓸어 담는 진성 고객들이 몰려오기 시작했습니다.
남들 다 하는 기계적인 텍스트 나열만 붙잡고 있는다고 알아서 내 상품의 가치를 돋보기로 들여다봐 주는 낭만적인 시대는 지났습니다. 검색엔진이라는 낯설고 깐깐한 비서에게 내 최고의 상품들을 가장 보기 좋은 카탈로그로 묶어 건네주는 사람. 오직 그 사람만이 고객의 시선을 독점하고 비즈니스의 진짜 성과를 훔쳐 올 자격을 얻습니다. 지금 당장 밋밋하게 방치된 베스트 리스트에 캐러셀이라는 생명력을 불어넣어 보세요.