Next.js - SEO 적용하기 2탄(sitemap과 robots.txt)

사이트맵(sitemap)

검색 엔진이 웹사이트를 보다 효과적으로 이해하고 크롤링할 수 있도록 도와주며, 이를 통해 웹사이트의 SEO 성능을 향상시킬 수 있는 중요한 도구이다. 사이트맵 파일을 올바르게 관리하고 업데이트하는 것은 검색 엔진 최적화(SEO)에 긍정적인 영향을 미칠 수 있다.
 
사이트맵 파일을 생성하게 되면 아래와 같은 이점이 있다.

1. sitemap.js | ts  파일 생성

app 디렉토리의 하위에 sitemap.js/ts 파일을 생성한다.

// app/sitemap.js
export default function sitemap() {
  return [
    {
      url: 'https://test.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://test.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://test.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ]
}


// app/sitemap.ts
import { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://test.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://test.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://test.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ]
}

url	사이트맵에 포함된 페이지의 URL을 지정한다.
lastModified	해당 페이지가 마지막으로 수정된 날짜를 나타냄. 이는 검색 엔진에게 페이지의 최신 상태를 알리는 데 중요!
changeFrequency	해당 페이지의 내용이 얼마나 자주 변경되는지를 나타내는 속성이다. 이는 검색 엔진에게 크롤링 빈도를 제안한다. always: 항상 변경됨 hourly: 매시간 변경됨 daily: 매일 변경됨 weekly: 매주 변경됨 monthly: 매월 변경됨 yearly: 매년 변경됨 never: 변경되지 않음
priority	해당 페이지의 중요도를 나타내며, 0에서 1까지의 값으로 설정됨. 이는 검색 엔진에게 어떤 페이지가 다른 페이지보다 더 중요하다는 정보를 제공한다.

 
위와같이 파일을 만들어두면 xml문서로 자동으로 산출된다고 한다ㅇㅅㅇ.
사이트맵 파일을 분할하거나 더 많은 정보를 얻고싶으면 공식홈페이지를 참고하십시오.
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

Metadata Files: sitemap.xml | Next.js

 

---

robots.txt

검색 엔진의 크롤러(봇)에게 사이트의 특정 부분에 대한 접근을 제어하는 역할을 하며, 이 파일은 주로 웹사이트 소유자가 검색 엔진에게 어떤 페이지를 크롤링하고 인덱싱할 수 있는지를 지시하는 데 사용된다.
 
robot.txt 파일을 생성하게 되면 아래와 같은 이점이 있다.

2. robots.js | ts  파일 생성

app 디렉토리 하위에 robots.js/ts 파일을 생성한다.

// app/robots.js
export default function robots() {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/private/',
    },
    sitemap: 'https://test.com/sitemap.xml',
  }
}

// app/robots.ts
import { MetadataRoute } from 'next'
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/private/',
    },
    sitemap: 'https://test.com/sitemap.xml',
  }
}

 
위와같이 파일을 만들어두면 robots.txt문서로 자동으로 산출된다고 한다.

userAgent	특정 검색 엔진의 크롤러를 지정한다. *는 모든 크롤러를 의미함.
disallow	해당 URL을 크롤러가 크롤링하지 못하도록 지정한다. ex) disallow: '/private/', '/admin/' 은 /private, /admin 경로는 검색엔진 크롤링X
allow	특정 URL을 크롤링할 수 있도록 허용한다. 특정 디렉토리 또는 페이지에 대한 예외를 설정할 때 사용된다.
sitemap	사이트의 사이트맵 위치를 지정하여 검색 엔진이 사이트의 구조를 이해하는 데 도움을 줌.

 
 
2탄으로 안끝나네,, 다음 탄에선 우당탕탕 openGraph이미지를 제작하고 설정해보자^__^