웹 개발
URL 슬러그가 검색에서 다르게 보일 때 확인하기
Next.js나 React에서 URL 슬러그가 예상과 다를 때, 로컬과 배포 환경의 차이를 빠르게 파악하는 방법입니다.
검색 결과나 소셜 미디어에서 링크가 공유될 때, URL 슬러그가 예상한 것과 다를 때가 있다. 이는 보통 동적 라우팅, 인코딩, 또는 SEO 설정에서 비롯된다.
현재 URL 구조 파악하기
먼저 로컬과 배포 환경에서 실제로 생성되는 슬러그를 비교해보자. 페이지의 canonical URL이 정말로 의도한 형태인지 확인하는 게 첫 단계다.
특히 검색에서 클릭해서 들어온 URL과 브라우저에 표시되는 URL이 다르다면, 리다이렉트가 일어나고 있는 것일 수 있다.
동적 라우팅 설정 확인
Next.js에서 동적 경로를 사용할 때, 슬러그 생성 로직이 로컬과 배포에서 일치하는지 확인해야 한다.
npm run build
빌드 로그에서 동적 페이지가 몇 개 생성되었는지, 어떤 슬러그로 생성되었는지 확인한다.
URL 인코딩과 특수문자 처리
슬러그에 한글이나 특수문자가 포함되면 인코딩 차이로 인해 다르게 보일 수 있다:
- 로컬:
/게시글-제목 - 배포:
/%EA%B2%8C%EC%8B%9C%EA%B8%80-%EC%A0%9C%EB%AA%A9
canonical URL에서 원하는 형태의 슬러그가 사용되고 있는지 확인하고, 필요하면 URL-safe 형식으로 변환하는 함수를 적용하자.
확인 순서
- 로컬에서 생성되는 슬러그 확인 — 콘솔에 출력하거나 스크린샷 저장
- 배포 후 같은 페이지의 URL 확인 — 형태가 정말 다른지, 리다이렉트는 없는지
- canonical URL 재확인 — 메타 태그에서 어떤 슬러그를 권장하는가
- 특수문자 처리 방식 — 한글이나 이모지가 있다면 인코딩 방식 통일
- 배포 후 검색 결과 갱신 대기 — 검색 엔진이 새 URL을 인식할 시간이 필요
문제를 크게 보지 말고, URL 하나에 집중해서 진단하면 더 빠르게 해결된다.