Cách Sơ đồ trang web động mới của HackerNoon cải thiện phân phối câu chuyện

SEO là viết tắt của Search Engine Optimization và nó giúp trang web của bạn trở nên dễ khám phá hơn đối với công chúng bằng cách làm cho nó xếp hạng cao hơn trong các công cụ tìm kiếm như Google. Bạn có thể thêm SEO vào trang web của mình, theo cách động hoặc tĩnh, nhưng cả hai đều có thể xác định nâng cấp trang web của bạn. Đây là câu chuyện về cách tôi thêm một loại sơ đồ trang động mới vào nền tảng xuất bản của HackerNoon để lập chỉ mục tốt hơn hàng trăm nghìn trang trang web của chúng tôi: https://hackernoon.com/sitemap.xml

Vậy làm thế nào để Sơ đồ trang web động thúc đẩy hiệu suất SEO?

Để bắt đầu lập chỉ mục một trang web trong công cụ tìm kiếm, tất cả những gì bạn cần là một tệp sitemap.xml trên thư mục / public của mã nguồn trang web của bạn. Sơ đồ trang web sẽ chỉ ra các trang khác nhau trên trang web của bạn và gửi nó đến các công cụ tìm kiếm để xác nhận các url. Thực tế có rất nhiều trang web khác có thể tạo sơ đồ trang web miễn phí và tất cả những gì bạn phải làm là sao chép và dán tệp đó vào thư mục / public, sau đó triển khai trang web. Đây được gọi là sơ đồ trang web tĩnh, vì không có trang mới nào được tạo.

Tại HackerNoon , chúng tôi từng có cái được gọi là sơ đồ trang web động cho mỗi lần triển khai . Sử dụng phương pháp này, một tập lệnh được tạo trong nguồn ứng dụng. Tập lệnh này sẽ tạo tệp .xml với tất cả các trang tương ứng, sau đó sẽ cập nhật khi ứng dụng kết thúc quá trình triển khai. Phương pháp này phù hợp khi bạn không có nhiều trang mới được tạo (các yêu cầu không được đáp ứng) và thực hiện nhiều thay đổi đối với mã. Tuy nhiên, phương pháp này có thể làm tăng thời gian triển khai vì một tập lệnh bổ sung sẽ chạy trong đó tất cả dữ liệu cần được tìm nạp để tạo ra tệp .xml mới.

Thật không may (hoặc may mắn thay - nó phụ thuộc vào cách bạn nhìn nhận nó), yêu cầu của HackerNoon đối với việc phân phối bài viết hơi quá cao đối với Sơ đồ trang web động cho mỗi lần triển khai, vì các trang mới luôn được tạo với số lượng lớn. Do đó, một lần lặp lại mới là cần thiết để khắc phục sự cố.

Tôi đã nghiên cứu rất nhiều về cách lập chỉ mục một trang ngay khi nó được tạo, nhưng tất cả các tài nguyên đều đề xuất “phương pháp tập lệnh”. Đó là khi sau một thời gian, tôi nghĩ đến việc định tuyến động với sơ đồ trang web động. Đây tình cờ là giải pháp, nhưng còn một chút nữa…

Hãy để tôi giải thích:

Phương pháp này thực sự tương tự như phương pháp trên nhưng có cách triển khai phức tạp hơn do tích hợp Cơ sở dữ liệu và Định tuyến động. Về cơ bản, nó sẽ cho phép bạn tạo các trang sơ đồ trang web khác nhau theo cách năng động và cho phép bạn phân phối mọi trang ngay khi nó được tạo.

Đầu tiên, tôi đã sử dụng cơ sở dữ liệu để lưu trữ tất cả các trang của HackerNoon bằng cách sử dụng hook. Về cơ bản, khi một bài viết, hồ sơ, trang giới thiệu, trang được gắn thẻ hoặc trang công ty mới được tạo, một hook sẽ chạy trong máy chủ, nơi một loạt mã nhận được các bản cập nhật, bao gồm cả việc cập nhật cơ sở dữ liệu sơ đồ trang web. Nó tìm một sơ đồ trang có sẵn, sau đó tạo url và thêm nó vào cơ sở dữ liệu. Dữ liệu được chia thành các tuyến / slugs khác nhau, điều này cho phép nó hoạt động.

Thứ hai, nhờ NextJs và cách tiếp cận của nó với serverSiteProps và StaticProps, tôi đã có thể tạo một tuyến đường / sơ đồ trang web mới và thêm định tuyến động với slugs / sitemaps / [slug]. Slug được tạo trên cơ sở dữ liệu và sau đó được tìm nạp bằng cách sử dụng serverSideProps để tìm nạp dữ liệu tương ứng được chỉ ra bởi slug của tuyến. NextJS có một gói (sơ đồ trang web tiếp theo) cho phép bạn hiển thị nội dung xml vào bất kỳ tuyến nào và vì vậy tôi đã sử dụng gói đó để tạo một trang mới với nội dung sơ đồ trang web. Khi nội dung sơ đồ trang web được hiển thị, nó sẽ được các công cụ tìm kiếm chọn.

Đây là một đoạn mã của việc triển khai trên máy khách:

 export async function getServerSideProps(ctx) { const {slug} = ctx.params; //get the slug of the route //make the api call to get the data, we are using firebase const sitemapPages = await db.collection("collection").where("slug", "==", slug).get(); let fields = []; if (!sitemapPages.empty) { sitemapPages.docs.forEach(doc => { // loop through each document gathered const {pages} = doc.data(); //get the pages of a document if (pages.length > 0) { fields = [...fields, ...JSON.parse(pages)]; //add the pages to fields } }); return getServerSideSitemap(ctx, fields); //fields is rendered in xml format } }

Các thách thức:

Thách thức chính với việc triển khai này là thiết lập cơ sở dữ liệu. Tôi thậm chí không biết liệu cách tiếp cận của tôi có hiệu quả hay không, nhưng nó đáng để thử vì có rất nhiều vé / hỗ trợ công nghệ về nó. Nó yêu cầu tôi vẽ một vài cơ sở dữ liệu bằng tay và về cơ bản hãy thử từng cơ sở dữ liệu và xem cái nào sẽ hoạt động. Tôi đã sử dụng một phương pháp thông minh về cơ bản là chia các url thành một tập hợp 5.000 trên mỗi tài liệu và tạo cho nó một slug duy nhất cho đến khi chúng thêm vào khoảng 35 hoặc 40.000 url. Việc có tải trọng lớn hơn có thể làm hỏng yêu cầu của khách hàng, điều này sẽ không cho phép lập chỉ mục các url. Ngoài ra, Công cụ Tìm kiếm của Google có giới hạn 50.000 url trên mỗi sơ đồ trang web, vì vậy tôi nghĩ rằng 40.000 url sẽ tốt cho HackerNoon.

Nhờ việc triển khai này, chúng tôi có 7 sơ đồ trang web khác nhau với khoảng 40.000 trang mỗi sơ đồ và tự động thêm các sơ đồ mới mỗi ngày: https://hackernoon.com/sitemap.xml

Kết luận Sơ đồ trang web động:

Khi tôi bắt đầu làm việc tại Hackernoon, SEO là một chủ đề cần một số cải tiến và vì chúng tôi có rất nhiều trang nên tôi đã có thể triển khai Sơ đồ trang web động với NextJS và Firebase. Mọi trang được tạo trên HackerNoon, hiện được Công cụ tìm kiếm lập chỉ mục mà không tốn công sức. Mục tiêu của tôi là giảm thiểu lao động thủ công (sơ đồ trang web cho mỗi lần triển khai) và triển khai một phương pháp tự hoạt động. Kiểm tra sơ đồ trang web động của chúng tôi: https://hackernoon.com/sitemap.xml