Tại sao việc render JavaScript quan trọng đối với SEO?
Trong thực tế hiện nay, JavaScript đã trở nên phổ biến trên các trang web. Hầu hết các trang web sử dụng JavaScript để tạo sự tương tác và cải thiện trải nghiệm người dùng.
Tuy nhiên, không phải JavaScript trên mọi trang web đều ảnh hưởng đến SEO. Nếu bạn sử dụng WordPress thông thường mà không có nhiều tùy chỉnh, thì có lẽ không có vấn đề gì áp dụng cho bạn.
Tuy nhiên, nếu trang web của bạn sử dụng JavaScript để xây dựng toàn bộ trang, thêm hoặc xóa các thành phần, hoặc thay đổi những gì đã có trên trang, bạn sẽ gặp vấn đề. Một số trang web sử dụng JavaScript cho menu, lấy thông tin sản phẩm hoặc giá cả, lấy nội dung từ nhiều nguồn hoặc, trong một số trường hợp, sử dụng JavaScript cho toàn bộ trang web. Nếu trang web của bạn thuộc loại này, hãy tiếp tục đọc.
Chúng tôi đang thấy hệ thống và ứng dụng được xây dựng hoàn toàn bằng các framework JavaScript và thậm chí một số hệ thống CMS truyền thống cũng có yếu tố JavaScript, nơi CMS được sử dụng như nguồn dữ liệu backend, nhưng cách trình bày frontend lại được xử lý bằng JavaScript.
Web đã chuyển từ HTML thuần – như một chuyên gia SEO, bạn có thể nắm bắt được điều đó. Hãy học hỏi từ các nhà phát triển JavaScript và chia sẻ kiến thức SEO với họ. JavaScript không bao giờ biến mất.
Các vấn đề và các mẹo SEO của JavaScript
Dưới đây là một số vấn đề SEO thông thường bạn có thể gặp phải khi làm việc với các trang web sử dụng JavaScript và một số mẹo để giải quyết chúng:
1. Tiêu đề và mô tả độc nhất
Bạn vẫn muốn có các tiêu đề và mô tả độc nhất cho từng trang của bạn. Điều này đặc biệt quan trọng khi sử dụng các framework JavaScript, vì nhiều trang web được tạo theo kiểu mẫu, dẫn đến việc sử dụng cùng một tiêu đề hoặc mô tả cho tất cả các trang hoặc một nhóm trang.
Bạn có thể sử dụng một số module SEO như Helmet để đặt các thẻ tùy chỉnh cho mỗi trang.
JavaScript cũng có thể được sử dụng để ghi đè các giá trị mặc định mà bạn đã đặt. Google sẽ xử lý điều này và sử dụng tiêu đề hoặc mô tả đã ghi đè. Tuy nhiên, đối với người dùng, tiêu đề có thể gây rối, vì một tiêu đề có thể hiển thị trong trình duyệt và họ sẽ nhận thấy một sự nhấp nháy khi nó bị ghi đè.
Nếu bạn thấy tiêu đề nhấp nháy, bạn có thể sử dụng thanh công cụ SEO của Ahrefs để xem cả phiên bản HTML nguyên thủy và phiên bản được hiển thị.
2. Vấn đề thẻ canonical
Trong nhiều năm, Google không hỗ trợ các thẻ canonical được chèn bằng JavaScript. Tuy nhiên, gần đây họ đã thay đổi và tạo ra một ngoại lệ cho trường hợp không có thẻ canonical nào. Nếu đã có một thẻ canonical và bạn thêm thẻ canonical khác hoặc ghi đè lên thẻ hiện tại bằng JavaScript, bạn sẽ có hai thẻ canonical. Trong trường hợp này, Google sẽ phải quyết định sử dụng thẻ nào hoặc bỏ qua thẻ canonical để ưu tiên các tín hiệu khác liên quan đến việc xác định bản gốc.
Đối với các trang có nhiều phiên bản trùng lặp, bạn nên chọn một phiên bản ưu tiên và đảm bảo rằng phiên bản đó có một thẻ canonical trỏ về chính nó và chuyển hướng các phiên bản khác đến phiên bản ưu tiên.
3. Sử dụng thẻ meta robots
Với thẻ meta robots, Google sẽ luôn chọn tùy chọn nghiêm ngặt nhất mà nó nhìn thấy, bất kể vị trí của thẻ đó. Nếu bạn có một thẻ index trong mã HTML và một thẻ noindex trong mã HTML đã được xử lý bằng JavaScript, Google sẽ xem trang đó như là noindex. Nếu bạn có một thẻ noindex trong mã HTML nhưng bạn ghi đè lên nó bằng một thẻ index sử dụng JavaScript, Google vẫn sẽ xem trang đó như là noindex.
Tương tự, với các thẻ nofollow. Google sẽ luôn chọn tùy chọn nghiêm ngặt nhất.
4. Đặt thuộc tính alt cho hình ảnh
Việc thiếu thuộc tính alt là một vấn đề về khả năng tiếp cận, có thể dẫn đến vấn đề pháp lý. Hầu hết các công ty lớn đã bị kiện vì không tuân thủ các quy định về tuân thủ ADA trên trang web của họ.
Đối với tìm kiếm web, văn bản trong thuộc tính alt được tính là văn bản trên trang, nhưng điều này thực sự chỉ đóng vai trò như vậy. Tuy nhiên, nó giúp cho tìm kiếm hình ảnh và xếp hạng hình ảnh tốt hơn.
Những nhà phát triển JavaScript thường để trống thuộc tính alt, vì vậy hãy kiểm tra xem bạn đã đặt chúng hay chưa. Sử dụng báo cáo hình ảnh trong Site Audit để tìm kiếm những hình ảnh thiếu thuộc tính alt.
5. Cho phép Google crawl các tập tin JavaScript
Đừng chặn quyền truy cập vào tài nguyên nếu chúng cần thiết để xây dựng phần của trang hoặc bổ sung vào nội dung. Google cần truy cập và tải xuống tài nguyên để hiển thị trang web theo đúng cách. Trong tệp robots.txt của bạn, cách đơn giản nhất để cho phép truy cập vào các tài nguyên cần thiết là thêm các dòng sau:
User-Agent: GooglebotAllow: .jsAllow: .css
Bạn cũng nên kiểm tra các tệp robots.txt cho bất kỳ subdomain hoặc tên miền bổ sung nào mà bạn có thể yêu cầu, chẳng hạn như những tệp cho các cuộc gọi API của bạn.
6. Kiểm tra xem Google có nhìn thấy nội dung của bạn không
Nhiều trang web sử dụng chức năng JavaScript có thể không hiển thị toàn bộ nội dung cho Google mặc định. Nếu bạn nói chuyện với nhà phát triển của bạn, họ có thể đề cập đến việc này như là việc nội dung không được tải theo mô hình Document Object Model (DOM) mặc định. Điều này có nghĩa là nội dung không được tải mặc định và có thể được tải sau đó thông qua một hành động như nhấp chuột.
Bạn có thể kiểm tra nhanh bằng cách tìm kiếm một đoạn nội dung của bạn trong Google bằng cách đặt nó trong dấu ngoặc kép. Nếu trang web của bạn xuất hiện trong kết quả tìm kiếm, nghĩa là nội dung của bạn đã được nhìn thấy.
Bạn cũng có thể nhấp chuột phải và chọn tùy chọn “Inspect”. Tìm kiếm văn bản trong tab “Elements”.
Phương pháp kiểm tra này cũng thích hợp để kiểm tra các thành phần được ẩn mặc định nhưng sẽ hiển thị khi được nhấp chuột.
7. Vấn đề nội dung trùng lặp
Với JavaScript, có thể có nhiều URL cho cùng một nội dung, dẫn đến các vấn đề nội dung trùng lặp. Điều này có thể do việc viết hoa, dấu gạch dưới, ID, tham số với ID, v.v. Ví dụ:
domain.com/Abcdomain.com/abcdomain.com/123domain.com/?id=123
Nếu bạn chỉ muốn một phiên bản được lập chỉ mục, bạn nên đặt một thẻ canonical tự tham chiếu và thẻ canonical từ các phiên bản khác trỏ đến phiên bản chính hoặc tốt nhất là chuyển hướng các phiên bản khác đến phiên bản chính.
8. Không sử dụng đoạn (#) trong URL
Dấu (#) đã có chức năng xác định trong trình duyệt. Khi nhấp vào, nó sẽ liên kết đến một phần khác của trang – như tính năng “table of contents” trên blog của chúng tôi. Đa phần, máy chủ không xử lý bất cứ điều gì sau dấu (#). Vì vậy, đối với một URL như abc.com/#something, bất cứ điều gì sau dấu # thường bị bỏ qua.
Phát triển JavaScript đã quyết định sử dụng # như cơ chế kích hoạt cho các mục đích khác nhau, và điều này gây ra sự nhầm lẫn. Cách sử dụng sai phổ biến nhất là cho việc định tuyến và các tham số URL. Đúng, chúng hoạt động. Nhưng không, bạn không nên làm như vậy.
9. Tạo sitemap
Các tùy chọn router cho phép URL sạch thường có một module bổ sung có thể tạo ra sitemap. Bạn có thể tìm thấy chúng bằng cách tìm kiếm hệ thống bạn đang sử dụng + router sitemap, chẳng hạn như “Vue router sitemap”.
Nhiều giải pháp hiển thị nội dung cũng có tùy chọn sitemap. Một lần nữa, chỉ cần tìm kiếm hệ thống bạn đang sử dụng và tên hệ thống + sitemap như “Gatsby sitemap”, và bạn sẽ tìm thấy một giải pháp đã tồn tại.
10. Hiệu suất trang
Nguyên tắc hiệu suất tốt vẫn áp dụng, nhưng bạn có thêm một số tùy chọn mới. Chia chung mã thành các phần nhỏ hơn, và cắt bỏ các phần không cần thiết, để bạn không phải tải tất cả mọi thứ cho mỗi trang như bạn thấy trong các hệ thống truyền thống. Các cài đặt JavaScript tốt làm cho trang web trở nên hoàn mỹ. Các cài đặt JavaScript không tốt có thể làm trang nặng nề và gây ra thời gian tải lâu dài.
11. Sử dụng file versioning
Google lưu trữ tất cả các tài nguyên trên hệ thống của mình. Bạn có thể sử dụng file versioning để tạo tên file mới khi có các thay đổi quan trọng, để Google phải tải xuống phiên bản cập nhật của tài nguyên để hiển thị.
12. Bạn có thể không thấy những gì Googlebot thấy
Bạn có thể cần thay đổi user-agent để chẩn đoán một số vấn đề. Nội dung có thể được hiển thị khác nhau cho các user-agent khác nhau hoặc thậm chí cùng một địa chỉ IP. Bạn nên kiểm tra xem Google thực sự nhìn thấy điều gì với các công cụ kiểm tra của họ, và tôi sẽ đề cập đến những điều đó sau.
Bạn có thể đặt một user-agent tùy chỉnh với Chrome DevTools để chẩn đoán các trang web được thực hiện dựa trên user-agent cụ thể, hoặc bạn có thể dễ dàng làm điều này với thanh công cụ của chúng tôi.
13. Sử dụng polyfill cho các tính năng không được hỗ trợ
Có thể có các tính năng mà các bot của Google không hỗ trợ. Nhà phát triển của bạn có thể sử dụng phát hiện tính năng. Và nếu có một tính năng bị thiếu, họ có thể chọn bỏ qua tính năng đó hoặc sử dụng một phương pháp dự phòng với một polyfill để xem liệu họ có thể làm việc được không.
Điều này chủ yếu là thông tin cho các chuyên gia SEO. Nếu bạn thấy một điều gì đó mà bạn nghĩ Google nên nhìn thấy nhưng nó không nhìn thấy nó, có thể là do cách triển khai của bạn.
14. Sử dụng lazy loading
Lazy loading hiện đã được xử lý bởi trình duyệt thay vì bằng JavaScript. Tuy nhiên, bạn có thể gặp một số tình huống vẫn sử dụng cài đặt lazy loading dựa trên JavaScript. Phần lớn, việc này là tốt nếu việc lazy loading áp dụng cho hình ảnh. Điều quan trọng là kiểm tra xem nội dung có được lazy loading hay không. Đối lại với phần “Kiểm tra xem Google có nhìn thấy nội dung của bạn”, các cài đặt này có thể gây ra vấn đề với việc hiển thị nội dung.
15. Vấn đề cuộn vô tận
Nếu bạn có một cài đặt cuộn vô tận, tôi vẫn khuyến nghị tạo một phiên bản trang phân trang để Google vẫn có thể crawl một cách chính xác. Một vấn đề khác tôi đã gặp phải với cài đặt này là đôi khi hai trang được lập chỉ mục như một. Tôi đã thấy điều này một vài lần khi mọi người nói rằng họ không thể lập chỉ mục trang của mình. Nhưng tôi đã tìm thấy nội dung của họ được lập chỉ mục như một phần của một trang khác thường là bài viết trước đó của họ.
Ý kiến của tôi là khi Google thay đổi chiều rộng để dài hơn (sẽ nói thêm về điều này sau), nó kích hoạt cuộn vô tận và tải thêm một bài viết khi nó đang render. Trong trường hợp này, điều tôi khuyến nghị là chặn tệp JavaScript xử lý cuộn vô tận để chức năng không thể kích hoạt.
16. Vấn đề hiệu suất
Rất nhiều framework JavaScript đã chăm chỉ tối ưu hiệu suất cho bạn. Tất cả các nguyên tắc hiệu suất thông thường vẫn áp dụng, nhưng bạn có thêm một số tùy chọn mới. Chia nhỏ mã thành các phần nhỏ hơn, và loại bỏ những phần không cần thiết để bạn không phải tải tất cả mọi thứ cho mỗi trang như bạn thấy trong các hệ thống truyền thống.
17. Trang web JavaScript sử dụng nhiều nguồn lực crawler
Các yêu cầu XHR JavaScript tiêu thụ nhiều nguồn lực crawler, và tôi nghĩ rằng chúng thậm chí “nuốt chửng” chúng. Không giống như hầu hết các tài nguyên khác được lưu trong bộ nhớ cache, các tài nguyên XHR này được tải trực tiếp trong quá trình render.
Chi tiết thú vị khác là dịch vụ render cố gắng không tải xuống các tài nguyên không đóng góp vào nội dung của trang. Nếu nó làm sai, bạn có thể bỏ lỡ một số nội dung.
18. Công cụ kiểm tra của Google
Google có nhiều công cụ kiểm tra hữu ích cho JavaScript.
Google Search Console có công cụ Kiểm tra URL, cho phép bạn kiểm tra URL như Googlebot sẽ nhìn thấy nó cho điện thoại di động hoặc máy tính để bàn.
Ngoài ra, có công cụ Kiểm tra kết quả phong phú, công cụ Kiểm tra thân thiện với thiết bị di động và công cụ Kiểm tra thân thiện với điện thoại di động.
Ahrefs là công cụ SEO lớn duy nhất hiện nay có khả năng render trang web khi crawl web, do đó chúng tôi có dữ liệu từ các trang web sử dụng JavaScript mà không có công cụ SEO nào khác có được. Chúng tôi render ~200 triệu trang mỗi ngày, nhưng đó chỉ là một phần nhỏ so với tổng số trang web.
Ahrefs cũng hỗ trợ JavaScript và cho phép bạn so sánh HTML với các phiên bản đã được render của thẻ.
Chúng tôi cũng có các công cụ kiểm tra mà bạn có thể sử dụng trong Ahrefs, bao gồm kiểm tra trang, so sánh trong suốt, kiểm tra cấu trúc dữ liệu, v.v.
Kết luận
JavaScript không phải là cái gì đó mà các chuyên gia SEO cần sợ. Hy vọng bài viết này đã giúp bạn hiểu cách làm việc với JavaScript tốt hơn. Đừng ngần ngại liên hệ với nhà phát triển của bạn và làm việc với họ, đặt câu hỏi cho họ. Họ sẽ là đồng đội tuyệt vời nhất của bạn trong việc cải thiện trang web JavaScript của bạn cho các công cụ tìm kiếm.
Có câu hỏi? Hãy cho tôi biết trên Twitter.
Tìm hiểu thêm về chúng tôi tại: TRANHUNG Digital
Nguồn tham khảo:: https://ahrefs.com/blog/javascript-seo/
