검색 엔진에서 '네이버'나 '카카오'를 검색하면 체계적으로 정리된 목차가 나타나는데, 정작 우리 서비스를 검색하면 그런 구조화된 정보가 보이지 않더라고요. 이게 단순히 보기 좋은 문제가 아니라, 사용자 경험과 직결되는 부분이라 개선이 필요했습니다.

문제점

처음 문제를 발견했을 때 상황입니다. 검색 결과가 심플하게 나오긴 하는데, 사용자 입장에서는 우리 사이트가 어떤 서비스를 제공하는지, 어떤 콘텐츠가 있는지 한눈에 파악하기 어려웠어요.

반면 네이버나 카카오 같은 경우를 보면 아래와 같이 사이트에 접속하기 전에 체계적으로 파악할 수 있어요.

해결 과정 : 스키마 마크업 적용하기

이 문제를 해결하는 핵심은 스키마 마크업(Schema Markup)입니다. 검색 엔진에게 "우리 페이지의 이 부분은 이런 의미야"라고 명확히 알려주는 거예요.

1단계: 스키마 타입 선택하기

먼저 Schema.org에서 우리 서비스에 맞는 타입을 찾아야 했어요. 엘리스는 교육 플랫폼이니까 EducationalOrganization 타입이 딱 맞았습니다.

스키마 타입을 고를 때는 서비스의 본질을 생각해보면 좋아요. 쇼핑몰이면 Organization이나 Store, 뉴스 사이트면 NewsArticle, 레시피 사이트면 Recipe 이런 식으로요.

2단계: 타입 안정성 확보하기

실제 코드를 작성할 때는 schema-dts 라이브러리를 사용했어요. 이게 정말 편한 게, Schema.org의 모든 타입을 TypeScript로 정의해놔서 자동완성도 되고 타입 체크도 할 수 있거든요.

npm install schema-dts

3단계: JSON-LD 방식으로 구현하기

스키마 마크업을 추가하는 방법은 크게 세 가지가 있어요:

• JSON-LD: 가장 권장되는 방식이고, 코드도 깔끔합니다