Tất cả bài viết

Hướng dẫnWebsiteEN/VI

Website song ngữ (EN/VI) chạy nhanh cần những gì

Hai ngôn ngữ thật, mỗi ngôn ngữ một trang riêng, đủ nhẹ cho điện thoại mạng chậm.

Hoàng Huy Đức · 2 phút đọc

3G CHẬM/en//vi/Hello!ENXin chào!VIENVIhreflangENVI

Website song ngữ không phải một website kèm nút dịch. Nó là hai website dùng chung thiết kế, và mỗi bên đều phải nhanh và dễ để công cụ tìm kiếm hiểu.

Danh sách ngắn

  1. Đầu vàoMỗi trang một việcMỗi trang chỉ có một việc để làm.
  2. Bước AIAI soạn bản dịchMột bản đầu, làm nhanh.
  3. Con ngườiNgười bản xứ đọc lạiGiọng văn và thuật ngữ do người kiểm tra.
  4. Quy tắcURL và thẻ gọn gàngMỗi ngôn ngữ một URL, trỏ qua lại nhau.
  5. Đầu raTrang nhẹTải nhanh trên điện thoại.
Bản dịch chỉ là bản nháp cho đến khi người bản xứ đọc qua.

Ngôn ngữ và tìm kiếm

  • Mỗi ngôn ngữ một URL. Ví dụ /about/ và /vi/about/. Đừng đổi ngôn ngữ ngay trên cùng một địa chỉ bằng script.
  • Nói cho công cụ tìm kiếm biết hai trang ghép cặp với nhau. Thêm liên kết hreflang hai chiều (mỗi trang liệt kê chính nó và bản còn lại, kèm x-default), và liên kết canonical trên mỗi trang trỏ về chính nó.
  • Đặt ngôn ngữ trang trong thuộc tính lang, để trình đọc màn hình và công cụ dịch hoạt động đúng.
  • Dịch cả phần meta. Tiêu đề và mô tả cần bản tiếng Việt riêng, nếu không kết quả tìm kiếm sẽ hiện tiếng Anh.

Riêng cho tiếng Việt

  • Dùng font có bộ chữ tiếng Việt (subset). Font không có sẽ đổi sang font khác cho phần dấu, và trang có thể bị giật.
  • Chừa chỗ cho chữ dài ra. Tiếng Việt có thể dài hơn tiếng Anh; nút và tiêu đề cần có khoảng trống.
  • Chừa dòng đủ cao. Khoảng cách dòng rộng một chút để dấu chồng không bị cắt.
  • Hãy viết, đừng chỉ dịch. Chọn một giọng (ví dụ “bạn” cho người đọc) và giữ nguyên. Người bản xứ đọc lại sẽ bắt được những gì công cụ bỏ sót.

Nhanh, trên điện thoại

  • Làm trang phần lớn là HTML. Trang tĩnh phát từ máy chủ gần người dùng thì nhanh và dễ cache.
  • Đặt kích thước ảnh cho đúng và khai báo chiều rộng, chiều cao, để không có gì bị xô lệch khi ảnh tải.
  • Chỉ tải font mỗi ngôn ngữ cần.
  • Mỗi trang một hành động rõ ràng: một nút đặt cuộc gọi hoặc gửi tin nhắn.

Một ví dụ

Website này, howangduc.com, được dựng bằng Astro và three.js và chạy trên Cloudflare Workers. Xem dịch vụ để biết một dự án website bắt đầu thế nào.