안녕하세요! Code n’ Cash입니다.
오픈 n일차, 사용자가 알음알음 늘어나니 슬슬 ‘서버비’ 걱정이 되기 시작했습니다. AWS나 클라우드를 썼다면 벌써 비용 청구서가 날아왔겠지만, 저는 홈 서버라 전기세만 걱정하면 되긴 합니다. 그래도 수익화는 모든 사이드 프로젝트의 로망 아니겠습니까?
오늘은 구글 애드센스(AdSense) 연동 전략과, 검색 결과 상단 노출을 위한 기술적 SEO(Search Engine Optimization) 적용기를 다룹니다.
💰 애드센스: 욕심부리지 않는 배치 전략
처음엔 구글의 ‘자동 광고(Auto Ads)’ 기능만 믿었습니다. 하지만 결과는 처참했습니다. 사용자가 메뉴 추천 버튼을 누르려는 찰나에 전면 광고가 뜨거나, 식당 리스트 사이에 거대한 배너가 끼어들어 흐름을 끊었죠.
그래서 수동 배치 전략으로 선회했습니다.
- 하단 고정 배너: 컨텐츠를 가리지 않으면서도 노출 보장
- 피드 내 광고 제거: 리스트의 가독성을 최우선으로 하여 사용자 이탈 방지
수익보다는 사용자 경험(UX)을 지키는 것이 장기적으로 트래픽 유지에 유리하다고 판단했습니다.
🔍 SEO: 검색엔진이 좋아하는 사이트 만들기
“오늘 점심 뭐 먹지”라고 검색했을 때 내 사이트가 나오게 하려면 어떻게 해야 할까요?
React 같은 SPA(Single Page Application)는 크롤러가 내용을 읽기 어렵다는 단점이 있습니다. 이를 극복하기 위해 React Helmet을 사용하여 동적 메타 태그를 적용했습니다.
사용자가 ‘비 오는 날 메뉴’ 페이지에 들어오면, og:title과 description이 날씨에 맞춰 자동으로 바뀝니다. 또한 Google Search Console에 사이트맵을 제출하고 소유권 인증 태그를 심어 크롤링을 유도했죠. 작은 오타 하나 때문에 인증 실패가 떴을 땐 정말 식은땀이 났습니다. 😂
⚙️ 동적 설정 시스템
광고 ID나 추적 코드가 바뀔 때마다 소스를 수정하고 다시 배포하는 건 비효율적입니다. 그래서 Admin 페이지에서 ID만 입력하면 프론트엔드에 즉시 반영되는 동적 설정 시스템을 구축했습니다. 이제 운영도 스마트하게!
SEO 메타 태그가 적용된 실제 사이트를 구경해보세요!