4 lỗi thường gặp mà các trang web thương mại điện tử mắc phải khi sử dụng JavaScript

Và ngay cả khi 98% tất cả các trang web đều sử dụng JavaScript , Google vẫn thường gặp vấn đề khi lập chỉ mục các trang sử dụng JavaScript. Mặc dù việc sử dụng JavaScript trên trang web của bạn nói chung là ổn, nhưng hãy nhớ rằng JavaScript yêu cầu thêm tài nguyên máy tính để được xử lý thành mã HTML mà các bot có thể hiểu được.

Đồng thời, các framework và công nghệ JavaScript mới liên tục xuất hiện. Để tăng cơ hội được lập chỉ mục cho các trang JavaScript của bạn, bạn cần học cách tối ưu hóa chúng nhằm cải thiện khả năng hiển thị của trang web trên SERPs.

Tại sao JavaScript chưa được tối ưu hóa lại nguy hiểm cho thương mại điện tử của bạn?

Nếu không tối ưu hóa JavaScript, bạn sẽ có nguy cơ nội dung của mình không được Google thu thập thông tin và lập chỉ mục. Trong ngành thương mại điện tử, điều đó đồng nghĩa với việc mất đi doanh thu đáng kể, vì sản phẩm sẽ không thể được tìm thấy thông qua các công cụ tìm kiếm.

Rất có thể trang web thương mại điện tử của bạn sử dụng các yếu tố động thân thiện với người dùng, chẳng hạn như băng chuyền sản phẩm hoặc mô tả sản phẩm dạng tab. Nội dung được tạo bằng JavaScript này thường không thể truy cập được đối với các bot. Googlebot không thể nhấp chuột hoặc cuộn, vì vậy nó có thể không truy cập được tất cả các yếu tố động đó.

Hãy xem xét có bao nhiêu người dùng truy cập trang web thương mại điện tử của bạn thông qua thiết bị di động. JavaScript tải chậm hơn, vì vậy thời gian tải càng lâu thì hiệu suất và trải nghiệm người dùng trên trang web của bạn càng kém. Nếu Google nhận thấy việc tải tài nguyên JavaScript mất quá nhiều thời gian, nó có thể bỏ qua chúng khi hiển thị trang web của bạn trong tương lai.

4 lỗi SEO JavaScript phổ biến nhất trên các trang web thương mại điện tử

Bây giờ, chúng ta hãy cùng xem xét một số lỗi thường gặp khi sử dụng JavaScript cho thương mại điện tử, và các ví dụ về những trang web tránh được những lỗi này.

Điều hướng trang dựa trên JavaScript

Trình thu thập dữ liệu không hoạt động giống như người dùng trên một trang web – chúng không thể cuộn hoặc nhấp chuột để xem sản phẩm của bạn. Bot phải theo các liên kết trong toàn bộ cấu trúc trang web của bạn để hiểu và truy cập đầy đủ tất cả các trang quan trọng. Nếu không, việc chỉ sử dụng điều hướng dựa trên JavaScript có thể khiến bot chỉ nhìn thấy sản phẩm trên trang đầu tiên của phân trang.

- Thủ phạm: Nike.com

Nike.com sử dụng tính năng cuộn vô hạn để tải thêm sản phẩm trên các trang danh mục. Và vì điều đó, Nike có nguy cơ nội dung được tải lên không được lập chỉ mục.

Để kiểm tra, tôi đã vào một trong các trang danh mục của họ và cuộn xuống để chọn một sản phẩm. Sau đó, tôi đã sử dụng lệnh “site:” để kiểm tra xem URL đó có được Google lập chỉ mục hay không. Và như bạn có thể thấy trong ảnh chụp màn hình bên dưới, URL này không thể tìm thấy trên Google

Tất nhiên, Google vẫn có thể tìm thấy sản phẩm của bạn thông qua sơ đồ trang web. Tuy nhiên, việc tìm thấy nội dung của bạn bằng bất kỳ cách nào khác ngoài liên kết sẽ khiến Googlebot khó hiểu được cấu trúc trang web và mối quan hệ phụ thuộc giữa các trang.

Để bạn dễ hình dung hơn, hãy nghĩ về tất cả các sản phẩm chỉ hiển thị khi bạn cuộn chuột để tìm chúng trên Nike.com. Nếu không có liên kết để bot theo dõi, chúng sẽ chỉ thấy 24 sản phẩm trên một trang danh mục nhất định. Tất nhiên, vì lợi ích của người dùng, Nike không thể hiển thị tất cả sản phẩm của mình trên cùng một màn hình. Nhưng vẫn có những cách tốt hơn để tối ưu hóa tính năng cuộn vô hạn sao cho vừa thoải mái cho người dùng vừa dễ truy cập cho bot.

- Người chiến thắng: Douglas.de

Khác với Nike, Douglas.de sử dụng phương pháp thân thiện hơn với SEO để hiển thị nội dung trên các trang danh mục.

Chúng cung cấp cho bot khả năng điều hướng trang dựa trên các liên kết <a href> để cho phép thu thập thông tin và lập chỉ mục các trang được phân trang tiếp theo. Như bạn có thể thấy trong mã nguồn bên dưới, có một liên kết đến trang thứ hai của quá trình phân trang được bao gồm

Hơn nữa, điều hướng theo trang có thể thân thiện với người dùng hơn cả cuộn vô hạn. Danh sách các trang danh mục được đánh số có thể dễ theo dõi và điều hướng hơn, đặc biệt là trên các trang web thương mại điện tử lớn.

Tạo liên kết đến băng chuyền sản phẩm bằng JavaScript

Băng chuyền sản phẩm với các mặt hàng liên quan là một trong những tính năng thiết yếu của trang web thương mại điện tử, và chúng quan trọng như nhau từ cả góc độ người dùng lẫn doanh nghiệp. Sử dụng chúng có thể giúp doanh nghiệp tăng doanh thu vì chúng hiển thị các sản phẩm liên quan mà người dùng có thể quan tâm. Nhưng nếu các phần này quá phụ thuộc vào JavaScript, chúng có thể dẫn đến các vấn đề về thu thập dữ liệu và lập chỉ mục.

- Thủ phạm: Otto.de

Tôi đã phân tích một trong các trang sản phẩm của Otto.de để xác định xem nó có chứa các phần tử được tạo bằng JavaScript hay không. Tôi đã sử dụng công cụ What Would JavaScript Do (WWJD) hiển thị ảnh chụp màn hình về giao diện của trang khi bật và tắt JavaScript.

Kết quả kiểm tra cho thấy rõ ràng rằng Otto.de dựa vào JavaScript để hiển thị các băng chuyền sản phẩm liên quan và được đề xuất trên trang web của mình. 

Điều này có thể ảnh hưởng đến việc lập chỉ mục của trang web như thế nào? Khi Googlebot thiếu tài nguyên để hiển thị các liên kết được chèn JavaScript, các băng chuyền sản phẩm sẽ không thể được tìm thấy và lập chỉ mục.

Như bạn thấy, Google không thể tìm thấy băng chuyền sản phẩm đó trong chỉ mục của mình. Và việc Google không thể nhìn thấy yếu tố đó có nghĩa là việc truy cập các sản phẩm bổ sung sẽ phức tạp hơn. Ngoài ra, nếu bạn ngăn chặn trình thu thập thông tin truy cập vào băng chuyền sản phẩm của mình, bạn sẽ khiến chúng khó hiểu được mối quan hệ giữa các trang của bạn hơn .

- Người chiến thắng: Target.com

Trong trường hợp trang sản phẩm của Target.com , tôi đã sử dụng tiện ích mở rộng Quick JavaScript Switcher để vô hiệu hóa tất cả các phần tử được tạo bằng JavaScript. Tôi đặc biệt chú ý đến các băng chuyền "Xem thêm" và "Sản phẩm tương tự" và cách chúng hiển thị khi JavaScript được bật và tắt.

Như hình bên dưới, việc vô hiệu hóa JavaScript đã thay đổi cách hiển thị băng chuyền sản phẩm đối với người dùng. Nhưng liệu có gì thay đổi từ góc nhìn của các bot?

Để tìm hiểu, hãy kiểm tra xem phiên bản HTML của trang trông như thế nào đối với các bot bằng cách phân tích phiên bản bộ nhớ cache.

Để kiểm tra phiên bản được lưu trong bộ nhớ cache của trang Target.com ở trên, tôi đã nhập “cache: https://www.target.com/p/9-39-... ”, đây là địa chỉ URL của trang cần phân tích. Ngoài ra, tôi cũng đã xem xét phiên bản chỉ có văn bản của trang đó.

Khi cuộn trang, bạn sẽ thấy các liên kết đến các sản phẩm liên quan cũng được lưu trong bộ nhớ cache. Nếu bạn thấy chúng ở đây, điều đó có nghĩa là các bot cũng không gặp khó khăn khi tìm thấy chúng.

Tuy nhiên, hãy nhớ rằng các liên kết đến các sản phẩm cụ thể mà bạn thấy trong bộ nhớ cache có thể khác với các liên kết trên phiên bản trực tiếp của trang. Việc các sản phẩm trong băng chuyền xoay vòng là điều bình thường, vì vậy bạn không cần lo lắng về sự khác biệt trong các liên kết cụ thể.

Vậy chính xác thì Target.com làm gì khác biệt? Họ tận dụng khả năng hiển thị động. Họ cung cấp mã HTML ban đầu và các liên kết đến sản phẩm trong các băng chuyền dưới dạng HTML tĩnh mà các bot có thể xử lý.

Tuy nhiên, bạn cần nhớ rằng việc hiển thị động sẽ làm tăng thêm độ phức tạp, điều này có thể nhanh chóng trở nên khó kiểm soát đối với một trang web lớn. Gần đây tôi đã viết một bài báo về hiển thị động , bạn nhất định phải đọc nếu đang cân nhắc giải pháp này.

Ngoài ra, việc các trình thu thập thông tin có thể truy cập vào các băng chuyền sản phẩm không đảm bảo các sản phẩm này sẽ được lập chỉ mục. Tuy nhiên, điều này sẽ giúp chúng dễ dàng điều hướng cấu trúc trang web và hiểu được mối liên hệ giữa các trang của bạn.

Chặn các tệp JavaScript quan trọng trong robots.txt

Việc chặn JavaScript cho trình thu thập thông tin trong robots.txt một cách vô tình có thể dẫn đến các vấn đề nghiêm trọng về lập chỉ mục. Nếu Google không thể truy cập và xử lý các tài nguyên quan trọng của bạn, làm sao nó có thể lập chỉ mục nội dung của bạn?

- Nguồn: Jdl-brakes.com

Không thể đánh giá đầy đủ một trang web mà không thực hiện quét trang web một cách bài bản. Nhưng việc xem tệp robots.txt của trang web đó đã cho phép bạn xác định bất kỳ nội dung quan trọng nào bị chặn.

Đây là trường hợp với tệp robots.txt của Jdl-brakes.com . Như bạn có thể thấy bên dưới, họ chặn đường dẫn /js/ bằng chỉ thị Disallow. Điều này làm cho tất cả các tệp JavaScript được lưu trữ nội bộ (hoặc ít nhất là các tệp quan trọng) trở nên vô hình đối với tất cả các bot của công cụ tìm kiếm.

Việc lạm dụng chỉ thị cấm này có thể dẫn đến các sự cố hiển thị trên toàn bộ trang web của bạn.

Để kiểm tra xem điều này có áp dụng trong trường hợp này hay không, tôi đã sử dụng Công cụ Kiểm tra Tương thích với Thiết bị Di động của Google . Công cụ này có thể giúp bạn giải quyết các vấn đề hiển thị bằng cách cung cấp cho bạn thông tin chi tiết về mã nguồn được hiển thị và ảnh chụp màn hình của trang được hiển thị trên thiết bị di động.

Tôi đã vào phần "Thông tin thêm" để kiểm tra xem có tài nguyên trang nào không thể tải được hay không. Lấy ví dụ một trong các trang sản phẩm trên Jdl-brakes.com , bạn có thể thấy nó cần một tệp JavaScript cụ thể để hiển thị đầy đủ. Thật không may, điều đó không thể xảy ra vì toàn bộ thư mục /js/ bị chặn trong tệp robots.txt của trang.

Nhưng hãy cùng tìm hiểu xem những vấn đề hiển thị đó có ảnh hưởng đến việc lập chỉ mục của trang web hay không. Tôi đã sử dụng lệnh “site:” để kiểm tra xem nội dung chính (mô tả sản phẩm) của trang được phân tích có được Google lập chỉ mục hay không. 

Đây là một trường hợp thú vị, trong đó Google có thể truy cập nội dung chính của trang web nhưng lại không lập chỉ mục. Tại sao? Bởi vì Jdl-brakes.com chặn JavaScript của nó, Google không thể nhìn thấy bố cục trang một cách chính xác. Và mặc dù các trình thu thập thông tin có thể truy cập nội dung chính, chúng không thể hiểu được nội dung đó thuộc vị trí nào trong bố cục trang.

Hãy cùng xem tab Ảnh chụp màn hình trong Kiểm tra khả năng tương thích với thiết bị di động . Đây là cách các trình thu thập thông tin nhìn thấy bố cục trang khi Jdl-brakes.com chặn quyền truy cập của chúng vào các tài nguyên CSS và JavaScript. Nó trông khá khác so với những gì bạn thấy trên trình duyệt của mình, phải không?

Bố cục đóng vai trò thiết yếu giúp Google hiểu ngữ cảnh của trang web bạn đang truy cập. Nếu bạn muốn tìm hiểu thêm về sự giao thoa giữa công nghệ web và bố cục, tôi đặc biệt khuyên bạn nên tìm hiểu về một lĩnh vực SEO kỹ thuật mới gọi là SEO hiển thị (rendering SEO) .

- Người chiến thắng: Lidl.de

Lidl.de chứng minh rằng một tệp robots.txt được tổ chức tốt có thể giúp bạn kiểm soát việc thu thập dữ liệu của trang web. Điều quan trọng là phải sử dụng chỉ thị disallow một cách có ý thức.

Mặc dù Lidl.de chặn một tệp JavaScript duy nhất bằng chỉ thị Disallow /cc.js*, nhưng dường như điều này không ảnh hưởng đến quá trình hiển thị của trang web. Điều quan trọng cần lưu ý ở đây là họ chỉ chặn một tệp JavaScript duy nhất mà không ảnh hưởng đến các đường dẫn URL khác trên trang web. Do đó, tất cả các tài nguyên JavaScript và CSS khác mà họ sử dụng vẫn có thể truy cập được đối với các trình thu thập thông tin.

Với một trang web thương mại điện tử lớn, bạn có thể dễ dàng quên mất tất cả các chỉ thị đã thêm. Luôn luôn bao gồm càng nhiều đoạn đường dẫn của URL mà bạn muốn chặn việc thu thập thông tin càng tốt. Điều này sẽ giúp bạn tránh chặn nhầm một số trang quan trọng.

JavaScript xóa nội dung chính khỏi trang web

Nếu bạn sử dụng JavaScript chưa được tối ưu hóa để hiển thị nội dung chính trên trang web của mình, chẳng hạn như mô tả sản phẩm, bạn sẽ ngăn chặn các trình thu thập thông tin nhìn thấy những thông tin quan trọng nhất trên các trang của bạn. Kết quả là, khách hàng tiềm năng đang tìm kiếm thông tin chi tiết cụ thể về sản phẩm của bạn có thể không tìm thấy nội dung đó trên Google.

- Thủ phạm: Walmart.com

Sử dụng tiện ích mở rộng Quick JavaScript Switcher , bạn có thể dễ dàng vô hiệu hóa tất cả các phần tử được tạo bằng JavaScript trên một trang. 

Như bạn thấy ở trên, phần mô tả sản phẩm đã biến mất khi JavaScript bị vô hiệu hóa. Tôi quyết định sử dụng lệnh “site:” để kiểm tra xem Google có thể lập chỉ mục nội dung này hay không. Tôi đã sao chép đoạn mô tả sản phẩm mà tôi thấy trên trang khi JavaScript được bật. Tuy nhiên, Google không hiển thị chính xác trang sản phẩm mà tôi đang tìm kiếm.

Liệu người dùng có bị ám ảnh bởi việc tìm kiếm sản phẩm cụ thể đó thông qua Walmart.com không? Có thể, nhưng họ cũng có thể đến bất kỳ cửa hàng nào khác bán mặt hàng đó.

Ví dụ về Walmart.com chứng minh rằng nội dung chính phụ thuộc vào JavaScript để tải khiến cho các trình thu thập thông tin khó tìm và hiển thị thông tin quan trọng của bạn hơn. Tuy nhiên, điều đó không nhất thiết có nghĩa là họ nên loại bỏ tất cả các yếu tố được tạo bằng JavaScript trên trang web của mình.

Để giải quyết vấn đề này, Walmart đưa ra hai giải pháp:

+ Việc triển khai kết xuất động (tiền kết xuất) là phương pháp dễ nhất trong hầu hết các trường hợp xét về khía cạnh thực thi.

+ Triển khai render phía máy chủ. Đây là giải pháp sẽ giải quyết các vấn đề chúng tôi đang gặp phải tại Walmart.com mà không cần phải cung cấp nội dung khác nhau cho Google và người dùng (như trong trường hợp render động). Trong hầu hết các trường hợp, render phía máy chủ cũng giúp cải thiện hiệu suất web trên các thiết bị cấu hình thấp , vì tất cả mã JavaScript của bạn đều được máy chủ xử lý trước khi đến thiết bị của người dùng.

Hãy cùng xem xét cách triển khai JavaScript được thực hiện đúng cách.

- Người chiến thắng: IKEA.com

IKEA chứng minh rằng bạn có thể trình bày nội dung chính của mình theo cách vừa dễ tiếp cận với bot vừa mang tính tương tác cao với người dùng.

Khi duyệt các trang sản phẩm trên IKEA.com , phần mô tả sản phẩm được hiển thị phía sau các bảng có thể nhấp chuột. Khi bạn nhấp vào chúng, phần mô tả sẽ tự động hiện lên ở phía bên phải của màn hình.

Cách trình bày nội dung quan trọng này sẽ làm hài lòng cả người dùng và bot tìm kiếm. Từ góc nhìn của trình thu thập dữ liệu, việc hiển thị mô tả sản phẩm không dựa vào JavaScript giúp chúng dễ dàng truy cập hơn. Do đó, nội dung có thể được tìm thấy trên Google.

Tóm lại

JavaScript không nhất thiết phải gây ra vấn đề nếu bạn biết cách sử dụng nó đúng cách. Điều tuyệt đối cần làm là tuân theo các thực tiễn tốt nhất về lập chỉ mục. Điều này có thể giúp bạn tránh được những lỗi SEO JavaScript cơ bản có thể ảnh hưởng đáng kể đến khả năng hiển thị trang web của bạn trên Google.

Hãy chú trọng đến quy trình lập chỉ mục của bạn và kiểm tra xem:

• Bạn cho phép Google truy cập vào các tài nguyên JavaScript của mình.

• Google có thể truy cập và hiển thị nội dung được tạo bằng JavaScript của bạn. Hãy tập trung vào các yếu tố quan trọng của trang web thương mại điện tử của bạn, chẳng hạn như băng chuyền sản phẩm hoặc mô tả sản phẩm.

• Nội dung của bạn thực sự được Google lập chỉ mục.