Создание карты сайта для сайта 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"
  }
}