JavaScript SEO – Hướng dẫn Thực hành Tốt nhất

Việc sử dụng JavaScript có tác động đến cách Google thu thập dữ liệu và lập chỉ mục trang web của bạn. Đảm bảo rằng việc sử dụng JavaScript của bạn không cản trở người dùng tìm thấy trang web của bạn thông qua các công cụ tìm kiếm.

JavaScript và SEO không phải lúc nào cũng đi đôi với nhau. Các bot của công cụ tìm kiếm, bao gồm cả Googlebot, không thể thu thập dữ liệu Javascript, do đó không thể xem bất kỳ nội dung nào được nhúng với JavaScript. Giờ đây, Google và các công cụ tìm kiếm khác có thể thu thập thông tin và hiển thị JavaScript. Trong bài viết này, chúng tôi chỉ cho bạn cách bạn có thể triển khai JavaScript để đảm bảo rằng SEO của bạn không bị ảnh hưởng.

Các thử nghiệm cho thấy rằng số lượng JavaScript được thu thập và hiển thị trên các trang web khác nhau rất khác nhau. Do đó, sử dụng JavaScript luôn đi kèm với một rủi ro nhất định; rằng trình thu thập thông tin không thu thập thông tin và lập chỉ mục nội dung, có nghĩa là người dùng sẽ không tìm thấy nội dung đó trong công cụ tìm kiếm. Điều này không làm bạn sợ JavaScript, nhưng từ góc độ SEO, có nhiều thứ bạn nên chú ý.

BING hạn chế khả năng hiển thị của các chương trình đối với JavaScript và không nhất thiết phải hỗ trợ tất cả các khung JavaScript giống nhau được hỗ trợ trong phiên bản mới nhất của trình duyệt của bạn. Do đó BING khuyên bạn nên sử dụng kết xuất động. Google cũng khuyên các quản trị viên web nên nhanh chóng thay đổi nội dung JavaScript để sử dụng kết xuất động .

Trong bài viết này, Andy Favell từ searchhenginewatch chỉ ra trong bài viết này cách JavaScript kéo dài thời gian tải của các trang web di động.

Nếu JavaScript được sử dụng dưới dạng tập lệnh mã theo dõi của bên thứ ba, bạn nên cho phép mã tải ở cuối một cách không đồng bộ để tốc độ trang không bị ảnh hưởng.

Google đã có thể hiển thị JavaScript và CSS từ năm 2015 và tại thời điểm đó, không có thành phần trang web quan trọng nào, bao gồm cả những thành phần trong JavaScript hoặc CSS bị loại trừ khỏi việc thu thập thông tin qua robots.txt . Google cũng chỉ ra rằng họ thích nguyên tắc cải tiến liên tục, một cách tiếp cận liên quan đến việc cải tiến liên tục các trang web HTML. Tuy nhiên, JavaScript vẫn sẽ được thu thập thông tin và hiển thị.

Vào tháng 10 năm 2018, trong một phản hồi trên Reddit , John Mueller đã chỉ ra rằng JavaScript sẽ ngày càng trở nên quan trọng trong những năm tới và cung cấp cho giới SEO mẹo để tập trung hơn vào SEO JavaScript: “Nếu bạn quan tâm đến SEO kỹ thuật, thì hãy bỏ qua HTML bạn sẽ ngày càng cần hiểu JS hơn “.

Với JavaScript, truy cập trực tiếp này là không thể. Đầu tiên, trình thu thập thông tin phải phân tích DOM (Mô hình Đối tượng Tài liệu). Mã của DOM được tải và liệt kê, và chỉ khi điều này được thực hiện, trang web mới có thể được hiển thị. Mọi trình duyệt đều thực hiện điều này tự động khi lướt web. Nếu bạn muốn kiểm tra JavaScript, bạn có thể sử dụng cái gọi là ” trình duyệt không có đầu “. Đây là trình duyệt không có giao diện người dùng đồ họa được vận hành bằng dòng lệnh.

5 quy tắc cho JavaScript và SEO

• Nội dung phải có thể lập chỉ mục trong sự kiện tải để nội dung JavaScript có ý nghĩa đối với các công cụ tìm kiếm.
• Nội dung phụ thuộc vào sự kiện của người dùng không thể lập chỉ mục.
• Các trang web JS yêu cầu một URL có thể lập chỉ mục với hỗ trợ phía máy chủ.
• Các phương pháp hay nhất về SEO tương tự được sử dụng cho các trang web HTML áp dụng cho việc hiển thị các trang web JS.
• Không được có mâu thuẫn giữa các phiên bản HTML và JavaScript của trang web.

Khái niệm cơ bản để phát triển các trang web JavaScript.

JavaScript phức tạp hơn HTML. Để nhận ra điều gì là quan trọng nhất đối với SEO, trước tiên bạn nên cố gắng hiểu cách hoạt động của JavaScript:

1. Yêu cầu ban đầu: Trình duyệt và bot của công cụ tìm kiếm bắt đầu yêu cầu GET cho mã HTML của trang web và các tài sản liên kết của nó.

2. Kết xuất DOM: Trang web tập lệnh JS cung cấp DOM (Mô hình đối tượng tài liệu) đến trình duyệt hoặc bot. Tài liệu cho biết nội dung sẽ được hình thành như thế nào trên trang web và mối liên hệ giữa các phần tử riêng lẻ trên trang web là gì. Trình duyệt hiển thị thông tin này và làm cho nó hiển thị và có thể sử dụng được cho người dùng.

3. Tải IDOM: Trong khi trang web đích đang được xử lý, trình duyệt sẽ kích hoạt các sự kiện thuộc về DOMContentLoaded. Tài liệu HTML ban đầu sau đó được tải và lưu trữ. Trình duyệt hoặc bot hiện đã sẵn sàng để triển khai các phần tử JavaScript.

4. Triển khai JavaScript: Các phần tử JavaScript hiện có thể thay đổi nội dung hoặc chức năng của trang web mà không cần thay đổi, xóa bỏ hoặc mở rộng mã nguồn HTML.

5. Sự kiện tải: Ngay sau khi các tài nguyên và tài nguyên JS phụ thuộc vào chúng được tải, trình duyệt bắt đầu tải và trang web kết thúc.

6. Sự kiện tải bài: Sau khi trang web JS được tải, người dùng có thể thay đổi hoặc điều chỉnh nội dung hoặc các yếu tố chức năng khác.

Các công cụ tìm kiếm như Google sử dụng cái gọi là trình duyệt không có đầu để mô phỏng quyền truy cập vào một trình duyệt truyền thống. Trái ngược với trình duyệt “bình thường”, trình duyệt không đầu gọi mã qua DOM để hiển thị một trang web từ đó. Bằng cách này, chẳng hạn, Googlebot có thể kiểm tra các yếu tố mà JavaScript chèn vào để sửa đổi trang web HTML. Sau khi kết xuất, Googlebot có thể phân tích và lập chỉ mục các phần tử được hiển thị giống như một nguồn HTML.

Với JavaScript, có hai phiên bản cho trình thu thập thông tin, mã HTML trước DOM và mã HTML sau DOM được hiển thị.

Các sự kiện quan trọng từ JavaScript có ảnh hưởng đến SEO

Sự kiện tải và sự kiện của người dùng có thể ảnh hưởng rõ ràng đến SEO của bạn. Đây là lý do tại sao:

• Sự kiện tải: Sự kiện tải được trình duyệt “kích hoạt” khi một trang web được tải hoàn toàn. Các rô bốt công cụ tìm kiếm bắt chước các trình duyệt phổ biến khi hiển thị JavaScript. Do đó, sự kiện tải rất quan trọng đối với họ – nó giúp họ có thể chụp nhanh nội dung được hiển thị. Các sự kiện được tải sau khi sự kiện tải đã được kích hoạt sẽ không được JavaScript thu thập thông tin xem xét và do đó sẽ không được lập chỉ mục vì JavaScript có thể nhanh chóng thay đổi nội dung trang web. Điều này đặc biệt đúng đối với các trang web tin tức hoặc nguồn cấp dữ liệu mạng xã hội, chẳng hạn như Twitter và Facebook.

Khung thời gian của DOMContentLoaded có thể được đo bằng công cụ phát triển của Google:

• Sự kiện của người dùng: Sau sự kiện tải, các sự kiện khác có thể được kích hoạt thông qua JavaScript. Trong số này, ví dụ, có cái gọi là “onClick-Events”. Đây là những sự kiện do người dùng kích hoạt, chẳng hạn như hạn chế nội dung trang web hoặc điều hướng tương tác. Tuy nhiên, nội dung này, được tạo hoặc thay đổi bởi các sự kiện của người dùng, thường không được lập chỉ mục bởi các công cụ tìm kiếm, vì nó diễn ra sau sự kiện tải.

Các lỗi bạn nên tránh với JavaScript

Nếu bạn sử dụng JavaScript trên trang web của mình, Google hiện có thể hiển thị các phần tử sau sự kiện tải khá tốt và cuối cùng có thể đọc và lập chỉ mục ảnh chụp nhanh giống như một trang web HTML truyền thống.

Hầu hết các vấn đề với JavaScript và SEO là do triển khai không đúng cách. Do đó, nhiều phương pháp hay nhất về SEO phổ biến cũng có thể được sử dụng cho SEO JavaScript. Đây là một số lỗi phổ biến nhất có thể xảy ra:

1. URL có thể lập chỉ mục: Mọi trang web đều yêu cầu các URL duy nhất và khác biệt để các trang web có thể được lập chỉ mục. Tuy nhiên, một pushState được tạo bằng JavaScript không tạo URL. Do đó, trang JavaScript của bạn cũng yêu cầu tài liệu web của riêng nó có thể cung cấp mã trạng thái 200 OK như một câu trả lời của máy chủ cho câu hỏi của khách hàng hoặc bot. Do đó, mọi sản phẩm được trình bày bằng JS (hoặc từng danh mục trang web của bạn được thực hiện bằng JS) phải được trang bị URL phía máy chủ để trang web của bạn có thể được lập chỉ mục.

2. Lỗi pushState: Với phương thức pushState, các URL JavaScript có thể được thay đổi. Do đó, bạn phải hoàn toàn đảm bảo rằng URL gốc được chuyển tiếp với sự hỗ trợ từ phía máy chủ. Nếu không, bạn có nguy cơ bị trùng lặp nội dung.

3. Thiếu siêu dữ liệu: Với việc sử dụng JavaScript, nhiều quản trị viên web hoặc SEO quên những điều cơ bản và không chuyển dữ liệu meta cho bot. Tuy nhiên, các tiêu chuẩn SEO tương tự cũng áp dụng cho nội dung JavaScript như cho các trang HTML. Vì vậy, hãy nghĩ về tiêu đề và mô tả meta của thẻ ALT cho hình ảnh.

4. a href và img src: Googlebot yêu cầu các liên kết mà nó có thể theo dõi để có thể tìm thấy các trang web khác. Do đó, bạn cũng nên cung cấp các liên kết có thuộc tính href- hoặc src-trong tài liệu JS của mình.

5. Tạo các phiên bản hợp nhất: Thông qua việc kết xuất JavaScript, các phiên bản preDOM và postDOM phát sinh. Đảm bảo rằng, nếu có thể, không có mâu thuẫn nào xảy ra và ví dụ: các thẻ hoặc phân trang chuẩn có thể được diễn giải chính xác. Bằng cách này, bạn sẽ tránh được việc che đậy .

6. Tạo quyền truy cập cho tất cả các bot: Không phải tất cả các bot đều có thể xử lý JavaScript như Googlebot. Do đó, bạn nên đặt tiêu đề, thông tin meta và các thẻ xã hội trong mã HTML.

7. Không tắt JS qua robots.txt: Đảm bảo rằng JavaScript của bạn cũng có thể được Googlebot thu thập thông tin. Đối với điều này, không nên loại trừ các thư mục trong tệp robots.txt.

8. Sử dụng sơ đồ trang web hiện tại: Để hiển thị cho Google bất kỳ thay đổi nào có thể xảy ra trong nội dung JS, bạn phải luôn cập nhật thuộc tính “lastmod” trong sơ đồ trang web XML của mình.

Kiểm tra các trang web JavaScript: Phải làm gì trong kiểm tra

Kiểm tra trang web JS chủ yếu là kiểm tra thủ công các yếu tố riêng lẻ.

Để kiểm tra JavaScript của mình, bạn có thể sử dụng Công cụ dành cho nhà phát triển của Google từ Google Chrome cũng như Bản mở rộng dành cho nhà phát triển web dành cho Chrome .

1. Kiểm tra trực quan

Để biết được khách truy cập sẽ xem trang web như thế nào, bạn nên chia nội dung trên trang web thành:

• Nội dung hiển thị trên trang web
• Nội dung yêu cầu tương tác
• Nội dung ẩn
• Nội dung đến từ các bên thứ ba, chẳng hạn như xếp hạng
• Nội dung chứa đề xuất sản phẩm

Bằng cách này, bạn có thể thu hẹp lựa chọn thành các phần tử có thể được thực hiện bằng JavaScript. Bạn nên kiểm tra các phần tử JavaScript với mục tiêu làm cho các phần tử này có thể thu thập thông tin.

2. Kiểm tra mã HTML

Với các công cụ dành cho nhà phát triển web, bạn có thể tắt CSS, JavaScript và cookie. Bạn có thể xem những gì còn thiếu trên trang web trong đoạn mã còn lại. Các phần tử này được kiểm soát bởi JavaScript.

Sau đó, bạn có thể kiểm soát các thành phần meta như tiêu đề và mô tả trang web. Để bot có thể lập chỉ mục các phần tử này, chúng phải có thể truy cập được thông qua sự kiện tải. Tuy nhiên, nói chung, hiện chỉ có Google mới có thể đọc các yếu tố này. Do đó, bạn nên viết thẻ tiêu đề và thẻ meta trong mã HTMl ngay cả với các trang web JS.

3. Kiểm tra HTML được kết xuất

Tải lại trang web bằng JavaScript và CSS đã hủy kích hoạt. Cuối cùng, nhấp chuột phải vào trang web và chọn “Kiểm tra phần tử” trong menu Chrome. Ở phía bên phải, một cửa sổ khác sẽ xuất hiện. Nhấp vào thẻ HTML. Với một cú nhấp chuột phải, một menu tùy chọn sẽ xuất hiện. Chọn “Sao chép HTML bên ngoài” tại đây. Cuối cùng, chèn mã vào một trình soạn thảo. Mã này sau đó có thể được lập chỉ mục bởi các công cụ tìm kiếm như Google.

Bạn cũng có thể kiểm tra JavaScript với Google Search Console bằng công cụ kiểm tra URL hoặc công cụ kiểm tra tính thân thiện với thiết bị di động.

Những điều khác cần xem xét

• URL có thể lập chỉ mục: Để một trang web được lập chỉ mục và xếp hạng, nó yêu cầu một URL có thể lập chỉ mục. Nếu trang web của bạn sử dụng các phiên bản JavaScript không thể được gọi lên qua URL của chính chúng, thì các công cụ tìm kiếm không thể lập chỉ mục trang web này. Nếu một URL tồn tại nhưng không thể được liên kết trong mã JS, thì trang web đó cũng không thể xếp hạng.
• pushState: Nếu một URL không phù hợp được tạo bởi pushState, nội dung trùng lặp có thể phát sinh. Do đó, hãy đặc biệt đảm bảo kiểm tra các liên kết nội bộ được tạo bằng JavaScript.
• Thuộc tính dữ liệu: Trên các trang JS, các tài nguyên khác như hình ảnh có thể được lưu trữ trong các thuộc tính dữ liệu. Tuy nhiên, nói chung, các tài nguyên này không thể được tải, hiển thị và lập chỉ mục bởi bot. Do đó, bạn nên kết hợp các tài nguyên, chẳng hạn như hình ảnh, theo truyền thống thông qua HTML.

1. Prender.io

prender.io là một phần mềm mã nguồn mở tối ưu hóa việc hiển thị một trang JS. Với điều này, trang web được lưu vào bộ nhớ cache sau khi hiển thị và có thể được kéo lên nhanh hơn khi được truy cập bởi bot.

2. Brombone

Chương trình này tải xuống trang web của bạn và hiển thị nó trong trình duyệt web, có nghĩa là bạn có thể dễ dàng kiểm tra xem các truy xuất AJAX và JavaScript có hoạt động chính xác hay không. Các thay đổi DOM có thể được kiểm tra theo cách tương tự. Nếu kết xuất đang hoạt động, các trang web này được lưu trữ dưới dạng HTML. Nếu một trình thu thập thông tin đang truy cập trang web của bạn, bạn có thể cho phép các trang web JS kết xuất được cấp bởi một proxy từ Brombone. Để triển khai chính xác công cụ, bạn cũng cần có sơ đồ trang XML.

3. ANGULAR JS

Với Angular JS, ảnh chụp nhanh HTML có thể được hiển thị trước để Googlebot có thể nắm bắt và lập chỉ mục các trang web JS nhanh hơn.

4. SEO.JS

Với chương trình này, mã JS cũng được hiển thị dưới dạng HTML và được Google cho phép thu thập thông tin. Mã chương trình theo đây được chuyển đến máy chủ của bạn. Có trang tổng quan của riêng bạn sẽ giúp bạn quản lý các phần tử JS và các trang web của bạn phải được hiển thị. Hơn nữa, công cụ tạo sơ đồ trang XML với các trang web JS của bạn.

5. Google Search Console

Với phiên bản cũ của Search Console, Google giúp bạn kiểm tra các phần tử JS bằng cách hiển thị các trang web riêng lẻ. Công cụ này cũng cho thấy các vấn đề tiềm ẩn về thu thập thông tin.

6. Isomorphes JavaScript

Với JavaScript đẳng cấu, các ứng dụng có thể được thực hiện trên một phần của máy chủ hoặc máy khách. Do đó, back-end và front-end chia sẻ cùng một mã. Bằng cách triển khai kết xuất bị thiếu, JavaScript ít bị lỗi hơn liên quan đến SEO.

7. Ryte

Nhiều công cụ SEO hiện có thể thu thập dữ liệu JavaScript để cung cấp cho người dùng phân tích đầy đủ hơn về trang web của họ. Kể từ tháng 2 năm 2019, trình thu thập thông tin Ryte cũng có thể hiển thị và thu thập dữ liệu JavaScript và CSS bằng trình duyệt Chrome được tối ưu hóa. Nó thực thi JavaScript trên mỗi trang trong tối đa 30 giây, vì vậy tất cả các phần tử được kích hoạt khi trang được tải lần đầu tiên đều được hiển thị và thu thập thông tin. Bạn có thể tìm hiểu thêm trong bài viết này .

Phần kết luận

JavaScript có thể mở rộng đáng kể chức năng của trang web của bạn. Tuy nhiên, có nhiều điều bạn cần tính đến để đảm bảo rằng JavaScript phù hợp với chiến lược SEO của bạn. Đôi khi sẽ có ý nghĩa hơn khi sử dụng tính năng nâng cao tiến bộ hơn là xây dựng một trang web chỉ bằng JavaScript, đặc biệt là khi xem xét AMP hoặc các ứng dụng web tiến bộ. Bạn cũng nên sử dụng các công cụ có sẵn để giúp tạo, chỉnh sửa hoặc kiểm tra các phần tử JavaScript trên trang web của mình.