Thông tin.

Tôi đã xây dựng blog của mình dựa trên Next.js và sử dụng Nobelium, nhưng khi kiểm tra, tôi phát hiện rằng cấu trúc của nó được thiết kế để lấy nội dung và tạo bài viết theo trường hợp phân phối sitemap. Tuy nhiên, trong trường hợp này, các sitemap sẽ không được tạo cho những bài viết sau khi phân phối, dẫn đến bất lợi từ góc độ SEO.

Tình trạng này khiến việc tối ưu hóa SEO trở nên khó khăn hơn, vì các công cụ tìm kiếm không thể cập nhật và theo dõi những nội dung mới nhất trên blog của tôi một cách hiệu quả. Để khắc phục vấn đề này, tôi đã quyết định tự động hóa quá trình tạo sitemap, đảm bảo rằng mọi bài viết mới đều được bao gồm trong sitemap.xml ngay khi chúng được xuất bản. Dưới đây là các bước cụ thể mà tôi đã thực hiện để tạo và triển khai sitemap động trong Next.js.

Tạo thành phần sitemap trong thư mục Pages.

Thông thường, sitemap.xml được chỉ định trong robots.txt dưới dạng [url]/sitemap.xml, vì vậy, bạn cần tạo thành phần tương ứng. Nếu sử dụng getServerSideProps do Next.js cung cấp, bạn có thể tạo sitemap trên phía server và phản hồi kết quả.

// pages/sitemap.xml.js

const Sitemap = () => {
  return null
}

export const getServerSideProps = async ({ res }) => {
  // You can create a sitemap here.
}

export default Sitemap

Tạo sitemap động và phản hồi.

Dưới đây là đoạn mã tôi sử dụng trong blog của mình:

export const getServerSideProps = async ({ res }) => {
  // Lấy URL bài viết
  const posts = await getAllPosts({ includePages: true })
  const dynamicPaths = posts.map(post => {
    return `${link}/${post.slug}`
  })

  const allPaths = [...dynamicPaths]

  const sitemap = `
    <urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>" xmlns:news="<http://www.google.com/schemas/sitemap-news/0.9>" xmlns:xhtml="<http://www.w3.org/1999/xhtml>" xmlns:mobile="<http://www.google.com/schemas/sitemap-mobile/0.7>" xmlns:image="<http://www.google.com/schemas/sitemap-image/1.1>" xmlns:video="<http://www.google.com/schemas/sitemap-video/1.1>">
      <url>
        <loc>${link}</loc>
        <changefreq>daily</changefreq>
        <priority>0.7</priority>
        <lastmod>${new Date().toISOString()}</lastmod>
      </url>
      <url>
        <loc>${link}/feed</loc>
        <changefreq>daily</changefreq>
        <priority>0.7</priority>
        <lastmod>${new Date().toISOString()}</lastmod>
      </url>
    ${allPaths
      .map((url) => {
        return `
          <url>
            <loc>${url}</loc>
            <changefreq>daily</changefreq>
            <priority>0.7</priority>
            <lastmod>${new Date().toISOString()}</lastmod>
          </url>
        `
      })
      .join("")}
    </urlset>
  `

  res.setHeader('Content-Type', 'text/xml')
  res.write(sitemap)
  res.end()

  return {
    props: {},
  }
}

Tôi đã tạo sitemap bằng cách nhập dữ liệu mà tôi muốn lấy động. Tất cả những gì bạn cần làm là lấy dữ liệu phù hợp và chèn vào một cách ngẫu nhiên.

Trong trường hợp trang tĩnh, số lượng ít, vì vậy tôi chỉ viết đơn giản.

Kết Luận

Mặc dù tôi đã đăng ký trong Google Search Console, ban đầu sitemap không được nhận dạng liên tục và không phản ánh ngay lập tức, nhưng sau khi chờ vài ngày, nó đã được nhận dạng bình thường. 👍