SEO 100점 만들기 마지막 단계 - robots.txt

먼저 Lighthouse를 이용해서 SEO 점수를 측정해보았다.

Lighthouse 검사를 돌렸을 때, 그래도 꽤 높은 점수인 92점이 나왔다. 😊

🚩 문제 발견

여기서 더 최적화를 하기 위해, Lighthouse가 잡아준 문제점을 해결해보자.

하나의 에러가 떠 있는데, 바로 robots.txt is not valid 다.

robots.txt : 검색엔진에 크롤링할 수 있는 사이트 페이지를 알려준다.

👉 robots.txt 의 구성이 잘못되면?

• 검색엔진이 공개 페이지를 크롤링하지 못하도록 하여 콘텐츠가 검색결과에 표시되는 빈도가 줄어들 수 있다.

• 이로 인해 반대로 검색결과에 표시하고 싶지 않은 페이지를 검색엔진이 크롤링할 수 있다.

그래도 그렇지 56 errors라니.. 무슨 일일까 😱

내용을 확인해보니 56개의 unknown directive 가 있었다.

그리고 더 자세히 살펴보니, 내가 seohyun.palms.blog/robots.txt 로 접속했을 때 검색엔진이 읽고 있는 것은 robots.txt 파일이 아닌 이 경로에 제공되는 html을 robots.txt로 인식하고 읽고 있었던 것이다.

근데 왜 거기서 html이 나오는건데?

👉 palms.blog는 내부적으로 URL rewrite 를 이용해 서브 도메인 로직을 구현했다.

robots.txt는 반드시 루트 경로에 위치해야 하는데, 이 내부적인 로직에 의해 이 경로에 접속시 실제로 palms.blog/seohyun/robots.txt 의 컨텐츠가 보여지고 있었던 것이다.

참고) Next.js rewrites

그러니 당연히 해석이 안되었던 ..!

✅ 해결

이를 해결하기 위해서 방법을 고민했을 때, 위에 언급한 대로 내부 로직에 의해 서브 도메인의 루트 경로에 robots.txt 파일을 두는것은 불가능했다.

그래서 middleware.ts 에서 서브 도메인의 robots.txt에 접근했을 경우, 모두 루트 도메인의 robots.txt로 redirect 시키는 방법을 선택했다.

middleware에 robots.txt 관련 redirect 코드 추가!

import { NextRequest, NextResponse } from 'next/server';

export const middleware = (request: NextRequest) => {
  ... (생략)
  const pathName = request.nextUrl.clone().pathname;

  ... (생략)

  if (pathName === '/robots.txt') {
    return NextResponse.redirect(new URL(`https:/palms.blog/robots.txt`, request.url));
  }

  ... (생략)
};

검색엔진은 도메인/robots.txt 로 접속했을 때 결국 제공된 컨텐츠를 읽어들이므로, 리다이렉트 시켜 루트 도메인의 robots.txt를 읽게 하는 것도 문제 없다.

(여기서는 rewrite나 redirect나 크게 상관 없을듯하다.)

그 결과..!!! ✨

➕ Disallow 설정하기

SEO를 위해 검색 엔진에 크롤링 되도록 하는 것도 중요하지만, 그만큼 또 치명적인건 ❗중복된 내용이 크롤링되는 것이다.

검색엔진은 동일한 콘텐츠가 여러 곳에 있는 경우, 이를 중복 콘텐츠로 감지하여 검색 결과에서 제외할 수 있기 때문이다.

우리는 대시보드, 에디터가 크롤링 될 필요가 없기도 하고, 최대한 중복된 내용이 크롤링 되는 여지를 줄이고자 Disallow 도 설정해주었다.

(처음에 정규표현식을 썼는데, robots.txt는 정규표현식 사용이 불가하고 아래와 같이 * 를 사용해줘야 한다)

import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: [
        '/*/dashboard/basicuserinfo',
        '/*/dashboard/blogconfignav',
        '/*/dashboard/category',
        // ... 생략
      ],
    },
    sitemap: 'https://palms.blog/sitemap.xml',
  };
}

[Next.js 공식문서] Generate a Robots file

robots.txt와 같은 설정들이 사소하게 느껴지거나 기능 개발에 집중하느라 쉽게 지나칠 수 있는 부분인데, SEO가 너무나 핵심적으로 중요한 만큼 이런 것까지도 놓치지 않는 것이 중요한 것 같다! :)