Cách tạo Sơ đồ trang web Tùy chỉnh cho Trang web Gatsby.js của bạn
Khi bạn yêu cầu cài đặt dễ triển khai, bạn có thể xây dựng các trang web tĩnh với React bằng cách sử dụng Gatsby.js. Những điều này cung cấp tốc độ tốt và trải nghiệm mượt mà cho nhà phát triển. Gatsby đã liên tục phát triển với các nhà phát triển sử dụng nó cho các trang blog, tiếp thị và thương mại điện tử.
Mỗi lần, bạn xây dựng một trang web, bạn có thể giúp trình thu thập thông tin của công cụ tìm kiếm cải thiện thứ hạng tìm kiếm không phải trả tiền. Bạn phải đảm bảo các công cụ tìm kiếm như Google có thể hiểu kiến trúc trang web và lập index nó một cách thông minh. Bạn có thể làm tất cả những điều đó bằng cách bao gồm file sitemap.xml ở folder root của trang web .
Với sự phổ biến ngày càng tăng của các trang web Gatsby.js và JAMstack, trong hướng dẫn này, bạn sẽ tự động tạo file sơ đồ trang XML tùy chỉnh trong các trang web được hỗ trợ bởi Gatsby của bạn .
Sơ đồ trang web XML
Một trang web bao gồm một số trang web như Giới thiệu , Liên hệ , Blog , Đăng ký , v.v. Tệp sơ đồ trang web duy trì danh sách tất cả các trang này để cho các công cụ tìm kiếm như Google biết về tổ chức nội dung trang web . Trình thu thập dữ liệu web của công cụ tìm kiếm như Googlebot đọc qua file này và thu thập dữ liệu trang web một cách thông minh.
Trở lại những ngày đầu của web, sơ đồ trang web HTML vốn là một danh sách dấu đầu dòng được tạo thủ công đang là xu hướng. Tuy nhiên, do sự phổ biến và tầm quan trọng của chúng, các sơ đồ trang web được xuất bản ở định dạng XML thay vì HTML vì đối tượng mục tiêu của chúng là các công cụ tìm kiếm chứ không phải con người.
Vì vậy, một file sơ đồ trang XML giao tiếp với các công cụ tìm kiếm về tất cả các trang tồn tại trên trang web .
Tầm quan trọng của việc thêm file sơ đồ trang web
Xem xét Tối ưu hóa Công cụ Tìm kiếm (SEO), sơ đồ trang web là rất quan trọng. Tuy nhiên, chúng không ảnh hưởng đến thứ hạng tìm kiếm của bạn. Thay vào đó, nếu có một trang web chưa được lập index , thì sơ đồ trang web sẽ thông báo cho các công cụ tìm kiếm về trang đó để nó được lập index một cách thích hợp.
Sơ đồ trang web đều quan trọng như nhau đối với cả các trang web mới và cũ. Đặc biệt nếu trang web tương đối mới thì bạn nên thêm một trang vì rất khó để các công cụ tìm kiếm tìm thấy các bài đăng và trang của một trang web mới. Bạn muốn làm cho công việc của công cụ tìm kiếm dễ dàng nhất có thể để tận dụng tối đa nó.
Bạn sẽ tìm thấy các file sitemap.xml trên hầu hết các trang web. Điều này giúp các bot của công cụ tìm kiếm giữ một tab về các bản cập nhật khác nhau và về cơ bản là mọi thứ diễn ra trên một trang web cần được lập index .
Thêm Sơ đồ trang web trong Gatsby
Một điểm nổi bật chính của Gatsby là bộ sưu tập ngày càng tăng của các plugin triển khai API Gatsby thông qua các gói NPM đơn giản.
Bây giờ, để tạo sơ đồ trang web, bạn không cần phải viết nhiều dòng mã. Có một plugin Gatsby để tạo file sơ đồ trang web được gọi là gatsby-plugin-sitemap .
Bạn cần cài đặt và chạy trang web Gatsby trước khi tiếp tục với hướng dẫn này.
Cài đặt
Để cài đặt gói gatsby-plugin-sitemap , hãy chạy lệnh sau trong folder root :
- npm install --save gatsby-plugin-sitemap
Sử dụng Plugin: gatsby-plugin-sitemap
Bây giờ plugin đã được cài đặt thành công, đã đến lúc thêm plugin này vào file gatsby-config.js . Một dấu nhắc nhanh cho những người mới sử dụng Gatsby; rằng bên trong file gatsby-config.js bạn sẽ tìm thấy tất cả các tùy chọn cấu hình trang web được đặt trong folder root .
Một trong những tùy chọn cấu hình này là dành cho các plugin. Tại đây, bạn sẽ tìm thấy một loạt các plugin triển khai các API Gatsby. Một số plugin được liệt kê theo tên, trong khi những plugin khác cũng có thể có tùy chọn - và gatsby-plugin-sitemap cũng có các tùy chọn.
Vì vậy, hãy thêm các dòng mã sau vào file gatsby-config.js của bạn:
module.exports = { siteMetadata: { title: 'Your Site Title', siteUrl: 'https://yoursite.com', }, plugins: ['gatsby-plugin-sitemap'], } Đảm bảo rằng bên trong siteMetadata bạn thay đổi title và siteUrl theo chi tiết dự án của bạn.
Tạo Tệp Sơ đồ trang web
Để tạo sơ đồ trang web, bạn cần tạo một bản dựng production và khởi động server . Trong terminal của bạn, nhập lệnh sau và nhấn ENTER .
- npm run build
Chờ một vài giây và bạn sẽ nhận được sơ đồ trang web hoạt động với Gatsby.
Theo mặc định, sơ đồ trang web được tạo trong folder root của trang web , đây là một folder được gọi là public . Khi bạn triển khai trang web của bạn , bạn có thể truy cập nó thông qua /sitemap.xml và nó sẽ hiển thị tất cả các trang trên trang web mà user hiện có thể truy cập được.
Bạn có thể truy cập sơ đồ trang web của bạn bằng URL sau:
https://your-domain/sitemap.xml gatsby-plugin-sitemap hỗ trợ các tùy chọn tùy chỉnh nâng cao để chức năng mặc định này có thể được thay đổi cho phù hợp. Hãy đào sâu một chút với các tùy chọn này.
Tùy chọn nâng cao cho gatsby-plugin-sitemap
gatsby-plugin-sitemap hỗ trợ các tùy chọn nâng cao khác nhau mà bạn có thể tùy chỉnh để kiểm soát nhiều hơn các file sitemap.xml của bạn . Ta hãy xem xét một số trong số này:
-
output: Tên file mặc định làsitemap.xmlbạn có thể sử dụng tùy chọnoutputđể thay đổi tên của file kết quả . Ví dụ: vớioutput: '/some-other-sitemap.xml',URL bây giờ trở thànhhttps:// your-domain /some-other-sitemap.xml. -
exclude: Tùy chọn này có thể giúp bạn loại trừ bất kỳ liên kết nào khỏi sơ đồ trang web vì bất kỳ lý do gì. -
query:queryGraphQL tùy chỉnh để tìm nạp thông tin nhưsiteMetadata,siteURL,allSitePage, v.v.
Có một số tùy chọn tiện dụng khác cũng dành cho sitemapSize và sitemap index . Bạn có thể truy cập kho plugin chính thức để biết thêm thông tin tại đây .
Ví dụ về các tùy chọn tùy chỉnh
Ví dụ: trong hướng dẫn này, ta đang tùy chỉnh các tùy chọn của plugin để tạo dữ liệu theo lựa chọn của ta . Tại đây, ta đã tùy chỉnh truy vấn GraphQL:
{ resolve: `gatsby-plugin-sitemap`, options: { query: `{ site { siteMetadata { siteUrlNoSlash } } allSitePage { edges { node { path } } } allMarkdownRemark { edges { node { fields { slug } } } } }`, serialize: ({ site, allSitePage, allMarkdownRemark }) => { let pages = [] allSitePage.edges.map(edge => { pages.push({ url: site.siteMetadata.siteUrlNoSlash + edge.node.path, changefreq: `daily`, priority: 0.7, }) }) allMarkdownRemark.edges.map(edge => { pages.push({ url: `${site.siteMetadata.siteUrlNoSlash}/${ edge.node.fields.slug }`, changefreq: `daily`, priority: 0.7, }) }) return pages }, }, }, Tại đây, ta sử dụng tùy chọn query để tìm nạp dữ liệu cho site của ta , bao gồm thông tin về siteMetadata và siteUrlNoSlash . Hơn nữa, ta truy vấn allSitePage để lấy tất cả các đường dẫn URL của các trang web để truy xuất thuộc tính path cho mỗi node đồ thị qua tất cả edges . Và cuối cùng, ta sử dụng allMarkdownRemark để đọc các file được viết bằng markdown và sau đó chuyển đổi chúng thành các trang HTML. Ở đây, ta nhận được thông tin slug cho mỗi bài đăng markdown từ bên trong thuộc tính field .
Cuối cùng, ta đã gọi hàm serialize để ánh xạ dữ liệu được tìm nạp cho allSitePage và allMarkdownRemark . Mỗi URL trả về một URL trang với changefreq: 'daily' và priority: 0.7 .
Đây là một minh chứng về việc thử nghiệm với các tùy chọn tùy chỉnh cho gatsby-plugin-sitemap , bạn có thể thực hiện theo yêu cầu của dự án của bạn .
Bạn có thể truy cập bản trình diễn sơ đồ trang web trực tiếp cho Gatsby.js tại đây .
Kết luận
Việc tạo sơ đồ trang web có thể dễ quản lý hơn với Gatsby.js. Kết quả của việc tạo file sitemap.xml với gatsby-plugin-sitemap cho thấy trải nghiệm sử dụng Gatsby.js của nhà phát triển đang được cải thiện.
Các tin liên quan
