Đã đăng vào Thứ Sáu, 5:22 CH 6 phút đọc

Cách mình xây dựng bộ "Dev Toolkit" 120 URLs: Tối ưu 100% Client-side, cân mượt i18n và Technical SEO đạt điểm Tuyệt đối

Chào anh em, là một Developer, chắc hẳn ai trong số chúng ta cũng từng ít nhất vài lần một ngày phải mở các công cụ như JSON Formatter, Base64 Encoder, JWT Decoder hay Cron Job Parser... Đúng không?

Tuy nhiên, có một nỗi sợ chung khi sử dụng các công cụ online miễn phí hiện nay: Bảo mật dữ liệu. Liệu đoạn JSON chứa token hệ thống hay chuỗi mã hóa mật khẩu của bạn có đang bị âm thầm gửi về một server nào đó của chủ trang web?

Vì lý do đó, mình đã tự tay xây dựng DevKit Technology (https://devkit.technology) — một bộ công cụ cho Developer với triết lý Privacy-First: Xử lý 100% tại trình duyệt của người dùng, tuyệt đối nói không với Server.

Trong bài viết này, mình muốn chia sẻ sâu hơn về mặt kiến trúc Frontend, cách mình xử lý bất đồng bộ hệ thống i18n (đa ngôn ngữ) và những bài học xương máu để tối ưu Technical SEO lên top Google Search Console.

1. Kiến trúc hệ thống: Tại sao lại là 100% Client-side?

Hệ thống của mình được xây dựng trên nền tảng Next.js. Toàn bộ logic xử lý từ việc định dạng (Format), mã hóa (Encode/Decode) cho đến nén ảnh đều được viết bằng JavaScript/TypeScript thuần túy chạy trực tiếp trên Browser của User.

Tối ưu hóa hiệu năng với Lazy-loading

Điểm yếu của việc ôm đồm hơn 20 công cụ vào một Website là nếu không cẩn thận, kích thước gói mã nguồn (Bundle Size) sẽ phình to khủng khiếp, làm giảm điểm Google Core Web Vitals.

Giải pháp của mình là áp dụng triệt để cơ chế Dynamic Import / Lazy-loading. Hệ thống được chia nhỏ code (Code-splitting). Khi người dùng truy cập trang YAML to JSON, trình duyệt chỉ tải đúng phần logic của công cụ đó và file từ điển JSON ngôn ngữ tương ứng. Nhờ vậy, điểm hiệu năng trên Google Lighthouse luôn giữ vững ở mức 95 - 100/100.

2. Bài toán Quốc tế hóa (i18n): Giải quyết lỗi mất dữ liệu khi chuyển vùng

Mình quyết định chơi lớn khi cấu hình hệ thống hỗ trợ 4 ngôn ngữ: English, Tiếng Việt, 日本語, và Español. Tuy nhiên, trong quá trình làm, mình gặp phải một UX bug khá chí mạng:

Người dùng đang dán một đoạn mã JSON rất dài vào ô Input để định dạng, đột nhiên họ bấm đổi ngôn ngữ trên Header sang tiếng Việt. Trang web load lại ngôn ngữ mới và... bùm! Ô Input bị xóa sạch dữ liệu, họ phải dán lại từ đầu.

Để giải quyết bài toán "Zero Hardcoded Text" mà vẫn bảo toàn trải nghiệm người dùng, mình đã xử lý như sau:

Đồng bộ hóa trạng thái qua URL Pathname: Lắng nghe trực tiếp locale từ URL (ví dụ /vi/tools/... hoặc /en/tools/...).
State Preservation: Sử dụng một cơ chế lưu trữ trạng thái tạm thời kết hợp với localStorage. Khi Router kích hoạt chuyển đổi ngôn ngữ, UI chỉ render lại phần text dịch được gọi từ hook t(...), còn trạng thái dữ liệu trong ô useState của Input/Output hoàn toàn được giữ nguyên.

3. Technical SEO: "Cuộc chiến" 120 URLs trên Google Search Console

Khi bạn làm web đa ngôn ngữ, số lượng URL sẽ nhân lên theo cấp số nhân (26 công cụ * 4 ngôn ngữ = 104 trang con, cộng thêm các trang chủ và trang pháp lý, tổng cộng mình có chính xác 120 URLs trong sitemap.xml).

Làm sao để Google Index mượt mà mà không phạt lỗi trùng lặp nội dung?

Sửa lỗi Canonical và Hreflang chéo

Nếu bạn để mặc định, Google sẽ quét và báo lỗi: "Trang trùng lặp, Google đã chọn một trang chính tắc khác". Lý do vì nội dung trang đổi 2 chiều (ví dụ YAML to JSON và JSON to YAML) có giao diện tương tự nhau.

Giải pháp: Cấu hình hàm generateMetadata cực kỳ nghiêm ngập. Đảm bảo phiên bản ngôn ngữ nào phải có thẻ <link rel="canonical"> trỏ đúng về chính URL của ngôn ngữ đó, tuyệt đối không trỏ chung về bản tiếng Anh.
Bổ sung thẻ hreflang: Khai báo đầy đủ các phiên bản thay thế trong thẻ <head> để Google biết trang nào dành cho người dùng Việt, trang nào cho người dùng Nhật.

Mạng lưới liên kết nội bộ (Internal Link Juice)

Bot của Google bò theo các liên kết. Để kích thích bot quét hết 120 URLs, mình đã tạo thêm một component RelatedTools ở cuối mỗi công cụ để link chéo sang các công cụ liên quan, đồng thời đưa toàn bộ danh mục công cụ (Global Directory) xuống Footer để tăng dòng chảy sức mạnh liên kết (Link Juice) xuyên suốt toàn trang.

Lời kết

Sau một thời gian tối ưu, file robots.txt và sitemap.xml của hệ thống đã được Google Bot "ghé thăm" tự động đều đặn hàng tuần. Các cảnh báo lỗi trên Google Search Console đã chuyển hoàn toàn sang màu xanh "Thành công".

Dự án này mình làm với mục đích phi lợi nhuận, hỗ trợ anh em dev có một không gian làm việc an toàn, mượt mà và bảo mật tuyệt đối cho dữ liệu của mình.

Anh em có thể vào trải nghiệm thử tại đây nhé: DevKit Technology

Nếu thấy bài viết hoặc công cụ này có ích, hãy để lại cho mình 1 upvote và 1 bookmark nhé. Rất mong nhận được những góp ý về mặt kỹ thuật từ mọi người ở phần bình luận dưới đây!