Programming SEO: 직접해봤다.
2주간의 “plug finder” 사이드 프로젝트를 통해서 실제로 Programming SEO를 적용해 보았습니다. 사용된 기술 스택, SEO를 최적화한 방법과 구체적인 성과까지 자세하게 공유해 드립니다.
Jan 27, 2024
지난 1편에서 이야기했던 Programming SEO에 대해서 좀 더 자세히 이해하기 위해 실제로 실행을 해보았습니다. 이에 대한 1차 회고를 공유합니다.
지난 편 요약
볼륨 10개짜리, 10,000개 포스팅을 위해 키워드를 찾던 중, “전기차 충전소” 키워드를 찾았고, 이를 바탕으로 2주간 빡세고 빠르게 기능을 만들어 보았습니다.
Tech Stack
우선 프로젝트에서 사용했던 테크스택을 공유해보자면,
- front-end
- framework / Next.js
- design-system / shadcn
- styling / tailwind
- map / react-kakao-map
- back-end
- database / supabase
- key-value storage / vercel-kv
- infra
- deploy / vercel
이번 프로젝트는 기존에 했던 프로젝트와 달리, 조회수 기능이 필요해서 vercel에서 제공하는 vercel-kv를 통해서 쉽고 빠르게 구현 할 수 있었습니다.
그 외는 기존에 제가 유지하던 Stack과 동일하며, 특이한 점 하나는 충전소 데이터가 많아서 지도에 한 번에 뿌려줄 수 없는 문제점을 해결하기 위해 Supabase에서 제공하는 PostGIS로 지도의 현재 위,경도에 맞는 데이터를 가져올 수 있도록 기능을 구현했습니다.
현재까지의 성과
시작한지 2주만에
72,739개의 페이지 중 18,923개의 페이지를 긁어갔습니다.
현재까지 누적 노출 수는 7,620건이며, 실제 클릭 건수는 242건입니다.
다른 프로젝트에 비해서 생각보다 빠른 속도로 제 사이트를 구글에서 긁어갔으며, 2주 밖에 되지 않았지만 꽤나 고무적인 성과를 보여주는 것을 알 수 있습니다.
성과를 위해 내가 한 것들
모든 페이지를 Static page로 생성
로딩 속도를 개선하기 위해서 7만여개의 페이지를 Static Page로 구성했습니다. 이에 따라 유저가 처음 접속하는 페이지 임에도 불구하고, 빠른 로딩속도를 구현할 수 있었습니다.
고아 페이지가 없도록 페이지간 유기적인 연결
SEO에서는 페이지가 고립되지 않도록 하는 것이 정말 중요합니다. 그래서 각 페이지마다 다른 페이지로 갈 수 있는 링크들을 추가했습니다.
뿐만 아니라 전국 / 시도 / 시구군 모든 페이지를 볼 수 있는 메타 페이지를 만들어 크롤러가 쉽게 전체 구조를 판단 할 수 있게 만들었습니다.
Sitemap 제출
아무리 페이지 구조를 구조적으로 잘 구성하더라도, 크롤러가 모든 페이지를 가져가는데는 한계가 있습니다. 그럴 때 필요한 것이 sitemap입니다. sitemap은 현재 내 웹페이지의 구조를 이해시키고, 모든 페이지를 발견할 수 있도록 도와줍니다.
sitemap 같은 경우, 데이터를 업데이트할 때마다 갱신해 주었고, 큰 변경사항이 있을 때마다 google search console에서 직접 sitemap을 제출해 주었습니다.
SEO 점수 최적화
Light house (SEO 점수 채점 툴)에서 제공하는 SEO 점수를 최적화했습니다. 모든 페이지를 구조화했고, 지적받는 사항들을 하나 같이 다 개선했습니다.
생각하지 못했던 점
비용
supabase (매월 25$)
free-tier 5GB outgoing call 용량을 넘어섰습니다. 이 것의 경우, 제가 현재 ahref SEO 최적화 툴을 사용하고 있는데, 하루에 한 번씩 전체 페이지를 긁어가서 그런지 용량이 초과되었습니다. 뿐만 아니라 정부 API에서 데이터를 긁어오면서 비효율적으로 데이터를 insert 한 경우가 많은데, 여기서 용량이 초과된 것 같습니다.
용량이 초과되면 read만 가능하기 때문에, 우선은 250GB까지 가능한 supabase Pro 플랜으로 업그레이드 하였습니다. 이건 상황을 지켜보고 플랜을 조절할 예정입니다.
vercel (매월 20$)
DB에 부하를 주지 않기 위해, vercel KV를 사용했는데 하루에 3,000 request가 제한 걸려있어서 제한을 풀기 위해 사용했습니다.
이 부분도 supabase를 pro 플랜으로 올리면서 DB로 직접 조회수를 쌓는 방식으로 변경하여 비용을 통제할 수 있을 것 같은데, 추후에 진행해보도록 하겠습니다.
다음으로 진행 기능들
- 우선 키워드를 최대한 많이 구글에 노출 시키는 것을 목표로 했기 때문에, 공공 데이터에서 제공하지 않는 테슬라 슈퍼차저 150개소와 테슬라 데스티네이션 150여개소를 추가할 예정입니다.
- lilys AI와 같이 실제 유저들의 피드백을 받을 수 있는 기능을 붙이고, 피드백에 따라 기능을 만들어 나갈 예정입니다.
진행하고 있는 사이드 프로젝트
Share article