프롤로그
나는 구글의 프론트엔드 성공 지표 'Core Web Vitals'를 읽고 플랜 빙고의 프론트엔드 성능 지표를 측정해봤다.
나는 PageSpeed Insights라는 웹사이트 성능 측정 도구를 이용하여 측정했다.
결과는 다음과 같았다.
-
모바일
-
데스크톱
현재 검색엔진 최적화의 점수가 나쁘지 않지만, 좀 더 점수를 올리고 싶었다. 고맙게도 PageSpeed Insights에서는 성능 저하의 원인을 알려준다.
플랜 빙고의 경우에는 robots.txt가 유효하지 않다고 나왔다.
robots.txt? 새 프로젝트 생성할 때 종종 보던 파일인데, 어떤 파일일까?
robots.txt란?
robots.txt 파일을 사용하여 사이트에서 크롤러가 액세스할 수 있는 파일을 제어할 수 있습니다.
여기서 '크롤러'란 한 웹페이지에서 다른 웹페이지로 연결되는 링크를 따라가며 웹사이트를 자동으로 검색하는 데 사용되는 프로그램을 가리키는 일반적인 용어이다. (Google의 기본 크롤러를 Googlebot이라고 한다.)
robots.txt 생성 및 세팅
Next.js에서 robots.txt를 생성하는 방법
1. public 폴더 안에 robots.txt 파일을 생성한다.
nextjs의 root에는 /public/ 이름의 디렉토리가 존재한다. 이 디렉토리에 static 파일을 추가하면 바로 접근이 가능합니다. 즉 아래와 같이 사용할 수 있다.
2. robots.txt에 설정 입력 후 저장하기.
나는 모든 검색 로봇에 대해 모든 페이지 검색을 허락하기 위해 다음과 같이 입력했다.
User-agent: *
Disallow: 참고로 Disallow: /로 설정하면 모든 검색에 제외가 되므로 검색엔진 최적화 점수가 오르지 않는다.
- robots.txt 문법 참고 출처: SEO의 기본, Robots.txt 세팅하기
마무리
이렇게 robots.txt를 추가하여 검색엔진 최적화 점수를 100으로 만들었다!
다음에는 83점을 받은 '성능' 부분을 개선할 것이다.
