JAMstack 사이트에 대한 사이트맵 생성

Sitemap은 검색 엔진이 귀하의 웹사이트를 이해하도록 돕는 훌륭한 방법입니다. 최신 검색 엔진은 주로 링크에 의존하여 검색 색인을 생성하지만, 이는 외부 백링크가 없기 때문에 덜 알려진 사이트를 불리하게 만들 수 있습니다.

검색 엔진은 웹 사이트의 루트 디렉토리에서 sitemap.xml 파일을 찾고, 존재하는 경우 해당 파일을 구문 분석하여 이전에 인덱싱하지 않은 링크를 찾습니다.

사이트맵을 생성할 때 http://sitemaps.org 에 정의된 스키마를 따라야 합니다.

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.org/path</loc>
  </url>
</urlset>

많은 JAMstack 프레임워크에는 사이트맵을 생성할 수 있는 플러그인이 있습니다. 그래도 선택한 프레임워크에 프레임워크가 없거나 종속성을 최소화하려는 경우 워크플로의 사이트 생성 단계를 실행한 후 사이트맵을 쉽게 만들 수 있습니다. 이 예제에서는 Nuxt를 사용하지만 스택에 맞게 코드를 쉽게 수정할 수 있습니다.

Nuxt는 웹사이트 내의 각 경로에 대해 dist 파일과 함께 정적 사이트 생성 시 .html 폴더를 생성합니다. 이를 알고 있으면 해당 디렉토리에서 HTML 파일을 검색하고 각 고유 페이지에 대한 XML 노드를 생성하는 스크립트를 작성할 수 있습니다.

const fs = require('fs')
const { resolve } = require('path')
const glob = require('glob')

const sitemap = resolve(__dirname, 'dist', 'sitemap.xml')

const nodes = [
  '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'
]

glob('dist/**/index.html', (err, files) => {
  if (err) { throw err }
  files.forEach((f) => {
    nodes.push(`<url><loc>https://jessie.codes${f.replace('dist', '').replace('index.html', '')}</loc></url>`)
  })
  nodes.push('</urlset>')
  fs.writeFile(sitemap, nodes.join(''), (err) => {
    if (err) { throw err }
  })
})

JavaScript를 사용하여 사이트를 구축했기 때문에 npm 스크립트 다음에 실행될 post 후크를 생성하는 generate 의 기능을 사용할 수 있습니다. 새 페이지가 추가될 때마다 사이트맵이 자동으로 업데이트되어 외부 백링크가 없는 경우에도 검색 엔진이 내 웹사이트에 대한 색인을 업데이트할 수 있습니다.

{
  "scripts": {
    "generate": "nuxt generate",
    "postgenerate": "node ./sitemap.js"
  }
}

원래 게시 날짜jessie.codes