검색 누락부터 글로벌 진출까지, 진작 알았다면 덜 고생했을 SEO 최적화 실무 기록
회사 내부에 각기 다른 페이즈를 겪고 있는 여러 프로덕트가 있었다. 그리고 이 프로덕트들은 저마다 다른 양상의 고질적인 검색 노출 문제를 안고 있었다.
런칭한 지 꽤 지났는데도 검색 포털에서 노출이 지지부진했다.
어디서부터 잘못된 것인지, 구조상에 구멍이 있는지 전면적인 SEO 점검이 시급했다.
갓 만들어진 신규 서비스. 런칭 전부터 검색엔진의 입맛에 맞게 모든 SEO 기반을 처음부터 완벽하게 세팅해야 했다.
오랜 기간 국내용으로 잘 운영해 오던 프로덕트였으나, 해외 진출을 위해 /en 이라는 하위 디렉토리를 신설했다.
국내 트래픽을 유지하면서 해외 검색엔진에 영어 페이지를 정확히 타겟팅하고 노출시켜야 하는 까다로운 미션이 주어졌다.
상황은 모두 달랐지만 결론은 하나였다.
누군가는 SEO의 A to Z를 명확히 정의해서 멱살 잡고 끌고 가야 한다!
마케팅의 영역이라고만 생각했던 SEO가, 사실은 HTML구조부터 렌더링 방식, URL 설계까지 맞닿아 있는 철저한 기술적 영역임을 깨달았다. 결국 직접 팔을 걷어붙였다. 며칠 밤낮을 구글링하고, 개발 문서를 뒤적이고, 테스트 도구를 돌려가며 우리 회사만의 전사 공통 SEO 최적화 기술 정책을 내 손으로 직접 작성했다.
사실 이 과정은 내 커리어에서 꽤 극적인 터닝포인트이기도 하다. 하루 온종일 파헤쳐 정리한 정책서를 본 대표님께서 “어려운 기술 내용과 필요한 요소들이 쉽게 잘 정리되었다”며 극찬을 아끼지 않으셨기 때문☺️ 전폭적인 지지 속에 즉각 전사에 공유된 이 문서는, 회사에 머무는 내내 나의 든든한 실무 치트키이자 SEO 바이블이 되어주었다.
이 글은 그 치열했던 리서치와 실무 적용의 결과물이자, 전사 가이드로 배포한 SEO 기술 정책의 핵심을 정리한 기록이다. 홈페이지, 상세 페이지, 블로그, 랜딩 페이지, 서브 도메인 등 모든 웹/모바일 서비스에 공통 적용되는 것으로 상정했다.
내용이 방대하므로, 크게 기반 공사, 메타 및 콘텐츠 최적화, 고급 기술 최적화 총 3가지 카테고리로 나누어 가이드라인을 세웠다.
검색엔진 봇은 화면에 그려진 결과물보다 내부 코드(HTML)를 먼저 읽는다. 껍데기만 있고 데이터는 나중에 불러오는 CSR(Client-Side Rendering) 구조는 색인에서 누락될 위험이 크다. 따라서 핵심 콘텐츠가 있는 페이지는 반드시 SSR(Server-Side Rendering) 또는 SSG(Static Site Generation) 방식으로 구성해야 한다.
봇이 알아서 와주길 기다리면 안 된다. Google Search Console과 Naver Search Advisor에 사이트를 등록하고 HTML 업로드, 메타태그 삽입 등 소유권 인증을 먼저 진행해야 한다.
이를 해야만 sitemap을 제출하고, 색인을 직접 요청할 수 있으며, 누락・오류 발생 시 적극적으로 대응 가능하다.
검색엔진이 사이트 지도를 빠르게 파악하도록 돕는다. 도메인/sitemap.xml 위치에 고정하고, 페이지가 많으면 동적 사이트맵(Next-sitemap 등 활용)으로 자동 갱신되게 구축한다.
봇이 접근해도 되는 곳과 안 되는 곳을 통제한다. 아래처럼 Sitemap 경로를 필수로 명시해야 한다.
User-agent: *
Allow: /
Sitemap: https://도메인/sitemap.xml각 페이지마다 고유하고 직관적인 메타태그를 넣어야 한다.
<title> | 간결하고 중복되지 않는 제목 |
|---|---|
<meta name="description"> | 검색 결과에서 클릭을 유도하는 요약 설명 |
<meta name="robots" content="index, follow"> | 색인 및 링크 추적 허용 설정 |
<meta name="keywords"> | 과도한 나열은 금물! 선택적으로 핵심 키워드만 사용 |
주소(URL)는 직관적이고 짧게, 그리고 의미 있는 키워드로 구성해야 한다. 단어 사이는 언더바(_) 대신 하이픈(-)을 사용하는 것이 SEO 표준이다.
예)
카카오톡이나 슬랙에 링크를 공유했을 때 뜨는 썸네일과 제목도 SEO의 일환이다. og:title, og:description, og:image (트위터의 경우 twitter: 접두사)를 명확히 세팅하고, 이미지에는 반드시 alt 속성을 넣도록 가이드했다.
게시판이나 쇼핑몰에서는 파라미터만 다르고 내용은 같은 중복 페이지가 생기기 쉽다. 이때 검색엔진이 중복 콘텐츠로 인식해 페널티를 주지 않도록, 오리지널 주소를 알려주는 <link rel="canonical" href="..."> 태그를 필수로 적용해야 한다.
검색엔진은 이미지를 눈으로 보지 못하므로 모든 이미지에 alt (대체 텍스트) 속성이 필수다. 또한 속도 개선을 위해 WebP 등 경량 포맷을 쓰고, 초기 화면에 바로 보여야 하는(Above the fold) 이미지는 Lazy Load 대상에서 제외해야 한다.
글로벌 진출이 임박한 프로덕트 C를 위해 가장 깊게 파고든 영역이다. /en 디렉토리가 생기면서 영어권 사용자에게는 영어 페이지가, 한국 사용자에게는 한국어 페이지가 뜨도록 검색엔진에 명확히 알려줘야 했다. 이를 위해 헤더에 다국어 태그를 적용했다.
<link rel="alternate" hreflang="ko" href="국문 URL"><link rel="alternate" hreflang="en" href="영문 URL">검색 결과에 별점, FAQ, 가격 등이 풍성하게 노출되는 리치 스니펫을 띄우기 위한 작업이다. 페이지 유형(Article, Product, FAQ 등)에 맞춰 구조화된 데이터를 JSON-LD 형식으로 작성해 <head> 영역이나 콘텐츠 하단에 삽입하도록 정책을 세웠다.
속도는 곧 SEO 점수다. 폰트 최적화, JS 분할 등을 통해 구글이 강조하는 3대 성능 지표를 충족하도록 개발팀과 협의했다.
정책을 세운 것만으로는 아무것도 바뀌지 않는다. 실무에 안착시키기 위해 기획-개발-QA 사이클에 SEO 점검 프로세스를 도입했다. 이를 위해 실무자들이 사용할 수 있는 점검 툴과 위치를 매핑해 배포했다.
| 항목 | 점검 도구 / 방법 | 적용 및 제출 위치 |
|---|---|---|
| SEO 태그 / hreflang | 크롬 개발자 도구, 소스 보기 (view-source:), Hreflang Validator | 각 페이지 HTML <head> 영역 |
| 색인 여부 | Google Search Console, Naver Search Advisor | 검색엔진 서치 콘솔 대시보드 |
| Sitemap / Robots.txt | 서치 콘솔 URL 제출, 직접 주소창 접속 확인 | 최상위 경로 (/sitemap.xml |
SEO는 개발 다 끝나고 "이제 메타태그 좀 넣어주세요" 하는 게 아니다. 기획 단계부터 URL 구조와 메타데이터 정책을 정의해야 한다.
개발 릴리즈 전 SEO 필수 항목(Title, Description, Canonical 등)이 제대로 렌더링되는지 QA 시트에 포함시켰다.
자주 쓰는 SEO 요소는 프론트엔드 컴포넌트로 구성해 반복 작업의 효율을 높였다.
메타나 OG 태그 구조가 크게 변경되었다면, 마냥 기다리지 말고 서치 콘솔에 들어가 색인 재요청(Ping)을 때려야 한다.
이 거대한 SEO 기술 정책 문서를 작성하고 3개의 프로덕트에 적용하는 과정은 말 그대로 맨땅에 헤딩이었다. 노출이 안 되던 프로덕트 A의 막힌 혈을 뚫고, 신규 프로덕트 B의 기틀을 세우며, 프로덕트 C의 영문 페이지가 구글 글로벌 검색에 잡히기 시작했을 때의 쾌감은 이루 말할 수 없다. 특히 런칭 초반, 단 1개의 페이지만 색인되어 마케팅팀과 나를 멘붕에 빠뜨렸던 프로덕트 B가 SEO 최적화 작업 후 정상적으로 색인되기 시작했을 때의 안도감이란…! 😌
SEO는 단순한 검색어 끼워 넣기 마케팅이 아니다. 검색엔진이라는 가장 깐깐하고 거대한 Bot이라는 사용자를 위해 프로덕트의 내실을 탄탄하게 다지는 아키텍처 설계 그 자체다.
서비스의 외관을 그리는 것을 넘어, 보이지 않는 데이터의 구조와 정보의 위계까지 기획하고 통제하는 것. 그것이 SEO 최적화 사태를 겪으며 PM으로서 한 단계 성장할 수 있었던 가장 값진 경험이었다.
/robots.txt| OG 태그 점검 | 카카오 데브톡, 페이스북 공유 디버거 등 | 각 페이지 HTML <head> 영역 |
|---|
| 페이지 속도 (Web Vitals) | Lighthouse, PageSpeed Insights | 개발 단계 QA 프로세스 |
|---|
| 구조화 데이터 | Google Rich Result Test (리치 결과 테스트) | JSON-LD 스크립트 영역 |
|---|