SEO And SiteMap in NextJs

Tại sao SiteMap lại quan trọng?

Các công cụ tìm kiếm sử dụng trình thu thập dữ liệu web, còn gọi là bot hoặc spiders, để tìm và lập chỉ mục các trang web. Các trình thu thập dữ liệu này theo các liên kết từ trang này sang trang khác để khám phá nội dung mới. Nếu không có sơ đồ trang web, trình thu thập dữ liệu chỉ phải dựa vào việc tìm liên kết đến các trang mới hoặc đã cập nhật thông qua các liên kết hiện có trên trang web.

Điều này có thể gây ra vấn đề vì một số lý do:

Orphaned Page

Các trang không được liên kết từ các trang khác trên trang web (Orphaned Page) có thể không bao giờ được trình thu thập dữ liệu tìm thấy nếu không có liên kết trực tiếp đến chúng.

Deep Hierarchies

Trong các trang web có phân cấp sâu, các trang quan trọng có thể bị chôn vùi ở nhiều cấp độ sâu, khiến trình thu thập dữ liệu khó có thể tiếp cận chúng một cách nhanh chóng.

Complex Navigation

Các trang web có cấu trúc điều hướng phức tạp có thể khiến trình thu thập dữ liệu khó tìm thấy tất cả các trang một cách hiệu quả, đặc biệt là nếu liên kết nội bộ không được tối ưu hóa tốt.

Sitemap cung cấp cho công cụ tìm kiếm danh sách URL trực tiếp, đảm bảo tất cả các trang, ngay cả những trang khó tìm thấy thông qua quá trình thu thập dữ liệu thông thường, đều được phát hiện và lập chỉ mục nhanh hơn.

Ví dụ về điều hướng phức tạp

Một trang web thương mại điện tử có Deep Hierarchies:

Homepage: Điểm khởi đầu.
Main Categories: Electronics, Clothing, Home & Garden.
Subcategories: Trong mục Electronics, bạn có Phones, Laptops, Accessories.
Product Pages: Mỗi danh mục phụ chứa nhiều trang sản phẩm.

Trong ví dụ này, trang sản phẩm cho một mẫu điện thoại cụ thể có thể có nhiều cấp độ sâu (Trang chủ > Điện tử > Điện thoại > Mẫu điện thoại cụ thể). Nếu không có sơ đồ trang web, công cụ tìm kiếm có thể mất nhiều thời gian hơn để tìm và lập chỉ mục các trang sâu này. Sơ đồ trang web đảm bảo rằng ngay cả những trang sâu nhất cũng được liệt kê và có thể được công cụ tìm kiếm tìm thấy nhanh chóng.

Site Map trong Next.js

Next.js có hỗ trợ tích hợp để tạo sơ đồ trang web bằng quy ước tệp sitemap.(js|ts). Tạo một tệp trong thư mục ứng dụng và xuất một hàm mặc định trả về một mảng URL.

import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://acme.com",
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    {
      url: "https://acme.com/about",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: "https://acme.com/blog",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.5,
    },
  ];
}

Có hai thuộc tính chính cần lưu ý: priority và changeFrequency.

Priority

Thuộc tính ưu tiên trong sơ đồ trang web cho biết mức độ quan trọng của một trang so với các trang khác trên cùng một trang web. Thuộc tính này dao động từ 0.0 đến 1.0, trong đó 1.0 là quan trọng nhất. Điều này giúp các công cụ tìm kiếm biết được chủ sở hữu trang web cho rằng những trang nào là quan trọng nhất.

Ưu tiên cao (0.8 - 1.0): Trang chủ, các trang danh mục chính, các trang đích chính.
Ưu tiên trung bình (0.4 - 0.7): Các bài đăng blog thường xuyên, các trang danh mục phụ.
Ưu tiên thấp (0.0 - 0.3): Các bài viết tin tức cũ, các trang tiện ích ít quan trọng hơn.

Change Frequency

Thuộc tính changeFrequency cho biết tần suất nội dung của một trang có khả năng thay đổi. Các giá trị có thể có: "always", "hourly", "daily", "weekly", "monthly", "yearly", "never".

"always": Các trang thay đổi liên tục, như dữ liệu thị trường chứng khoán.
"hourly": Các trang tin tức được cập nhật thường xuyên.
"daily": Các blog có bài đăng hàng ngày.
"weekly": Các trang sản phẩm có bản cập nhật hàng tuần.
"monthly": Các trang FAQ được cập nhật hàng tháng.
"yearly": Các trang liên hệ hoặc trang giới thiệu.
"never": Nội dung được lưu trữ không bao giờ thay đổi. Sitemap thường là một tệp XML trông giống như sau:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2023-06-21</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/about</loc>
    <lastmod>2023-06-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Trang web này sẽ được triển khai tới https://example.com/sitemap.xml.

Chúng ta không muốn trình thu thập dữ liệu web (crawler) lập chỉ mục tất cả các trang

Một số trang của chúng tôi là riêng tư, ví dụ như sau khi xác thực. Chúng tôi không muốn trình thu thập dữ liệu web lập chỉ mục các trang đó. Ngay từ đầu, các công cụ tìm kiếm sẽ không thể phát hiện ra chúng.

Bạn có thể truyền đạt điều này tới trình thu thập dữ liệu web bằng cách thêm tệp robots.txt vào gốc trang web của bạn.

Trong Next.js, bạn có thể tạo tệp robots.txt bằng cách thêm tệp robots.ts vào thư mục app/.

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: "*",
        allow: "/",
        disallow: "/private/",
      },
    ],
    sitemap: "https://example.com/sitemap.xml",
  };
}