계기
입사하고 전임자가 React로 만들어둔 웹 서비스를 내가 유지보수 맡게 되었다.
어느날 이 서비스를 구글에 검색을 해봤는데 아에 뜨질 않는거다.
그래서 뭐가 문제인지 보려고 사이트에서 접속해 lighthouse(브라우저 성능 측정 도구)를 돌려보니 검색 엔진 최적화 점수가 좀 많이 낮게 나왔다.
문제점
lighthouse는 어느 부분에 문제가 있고 어떻게 개선 해야하는지 알려준다.
서비스에서 점수가 낮게 나온 이유는 그 당시 상세하게 캡처 하지 못했지만 2가지 문제점이 있었다.
1. robots.txt 파일이 없음
2. a 태그에 href 값이 없음
robots.txt가 뭘까 ?
검색 엔진 사이트는 자체 크롤봇을 이용해서 사이트의 정보를 수집하고 검색 결과에 반영한다.
구글은 Googlebot 네이버는 Yeti 다음은 Daum 이라는 크롤봇을 이용한다.
이때 이 봇들은 사이트의 robots.txt 값을 읽어들여 어느곳을 크롤링 해야할지 어느곳을 크롤링 하면 안되는지 결정하게된다.
왜냐면 혹시 모를 문제점으로 인해 민감한 페이지가 크롤링되어 검색시 노출이 되는것을 방지하기 위해서 이다.
대부분 robots.txt 파일은 전체를 허용하되 비 허용부분만 명시해두는 형태로 이용한다.
내가 작성한 robots.txt
내가 작성한 robots.txt 파일은 간단했다 /dashboard 부분만 비 허용했다.
그리고 또 Sitemap이라는걸 만들어서 추가해주었는데 이 부분은 선택이다.
Sitemap
Sitemap은 크롤봇에게는 지도와 같은 존재이다.
Sitemap에는 웹 페이지 경로를 작성해두는데 크롤봇이 이걸 보고 수집 할 수 있게 도와주는 지도와 같은 존재라 볼 수 있다.
react에서 router 기반으로 sitemap을 자동으로 생성해주는 라이브러리인 react-router-sitemap 이라는 라이브러리가 있기는한데
사용해보니 작동이 안되서 라이브러리 이슈란을 확인해보니 나뿐만 아니라 18 버전에 사용이 안되는 이슈가 올라와있어서 페이지 갯수도 그리 많지 않아서 직접 만들기로 결심했다.
https://github.com/kuflash/react-router-sitemap/issues/122
Sitemap 작성법은 아래 문서를 참고하고 작성했으며 나는 메인 페이지 말고는 필수값인 url와 loc값만 채워줬다.
https://www.sitemaps.org/ko/protocol.html
작성한 robots.txt와 sitemap을 업로드 해주고 배포해주니 점수가 이전보다 올라가게 되었다.
a 태그 href 값 채워주기
두 번째 문제는 일부 a 태그 값에 href 값이 채워지지 않아서 점수가 하락 했다고 알려줬는데
해당 부분을 찾아가서 확인해보니 다른곳으로 연결해야하는게 아니라 그냥 모달이 열리는 방식이라 전임자가 href 값을 안채워둔거 같다.
그래서 나는 href값을 채우기위해 href 속성을 만들었고 href값을 빈 공간으로 남겨두게되면 페이지가 리로드 되기때문에 #! 값으로 채워줬다.
문제점 수정
문제되는 부분을 개선 하니 검색 엔진 최적화 점수 100점을 받게되었다.
후기 및 추가적인 작업
서비스 자체가 React로 만들어져서 완벽한 SEO 최적화를 하기에도 무리가 있고 lighthouse에서 알려주는 문제점 뿐만아니라 성능 최적화나 반응형 최적화 https 적용 여부에 따라도 검색 결과에 영향을 받는다고 한다.
따라서 이 서비스가 더 검색 엔진에 더 노출되게 계속 유지보수 하려고 생각중이며 네이버 웹마스터나, 구글 서치 콘솔에도 서비스를 등록할 생각이다.
