Nhưng đừng lo lắng. Nếu bạn vẫn chưa tự tin về kỹ năng SEO JavaScript của mình, bạn đã đến đúng nơi rồi.
Trong bài viết này, tôi sẽ hướng dẫn bạn cách tiếp cận không quá chuyên sâu về kỹ thuật để kiểm tra các vấn đề SEO JavaScript và cách truyền đạt các giải pháp cho các nhà phát triển để họ triển khai.
Nếu bạn vẫn đang né tránh chủ đề SEO JavaScript , hãy biết rằng nó sẽ không biến mất. Đây là ngôn ngữ lập trình được sử dụng rộng rãi nhất và hiện diện khắp mọi nơi trong việc phát triển website hiện đại.
Thật không may, JavaScript có thể gây ra các vấn đề về SEO tùy thuộc vào cách nó được triển khai. Tại sao? Bởi vì các công cụ tìm kiếm cần thực hiện thêm các bước để xử lý hoặc hiển thị nội dung được cung cấp bởi JavaScript. Như chúng ta sẽ tìm hiểu ngay sau đây, các bước bổ sung này gây bất lợi cho hiệu suất SEO.
Nhưng trước tiên, hãy cùng xem Google xử lý JavaScript như thế nào. Khi thu thập dữ liệu một trang, Google xử lý HTML ban đầu , thu thập các liên kết trong mã nguồn để tìm ra các trang mới và sau đó gửi trang đó đi lập chỉ mục.
Tuy nhiên, khi phát hiện JavaScript, trang web cần được xử lý thêm để tạo ra mã HTML đã được hiển thị . Sau khi hoàn tất, Google sẽ thu thập thông tin từ trang đó và chuẩn bị cho việc lập chỉ mục.
Các bước bổ sung này để hiển thị nội dung JavaScript có thể làm chậm quá trình thu thập thông tin và lập chỉ mục , dẫn đến các vấn đề như:
Hiển thị và lập chỉ mục bị trì hoãn
Việc lập chỉ mục nội dung chưa đầy đủ
Thời gian chờ hiển thị
Tải xuống tập tin bị thiếu hoặc không đầy đủ
Không khó để nhận thấy những vấn đề như vậy có thể gây hại đến hiệu suất SEO của bạn. Điều này đặc biệt đúng khi các trang web dựa vào JavaScript để hiển thị các liên kết và nội dung quan trọng mà hiệu suất SEO của bạn phụ thuộc vào.
Đây là lời phản bác phổ biến nhất mà tôi nghe được từ các nhóm kỹ thuật khi tôi tiếp cận họ về các vấn đề SEO JavaScript, và đó là điều mà tất cả các chuyên gia SEO nên chuẩn bị để đáp lại.
Mặc dù Google có thể lập chỉ mục nội dung được hiển thị bằng JavaScript (xem tài liệu của họ ), nhưng điều đó không đảm bảo nội dung sẽ được lập chỉ mục hoặc sẽ hoạt động hết công suất.
Google thừa nhận rằng họ có sự chọn lọc khi hiển thị JavaScript:
“Googlebot và thành phần Dịch vụ hiển thị web (WRS) của nó liên tục phân tích và xác định các tài nguyên không đóng góp vào nội dung trang thiết yếu và có thể không tải các tài nguyên đó. ”
Bạn có muốn để cho công cụ hiển thị của Google quyết định "nội dung trang quan trọng" của mình không? Không, cảm ơn.
Nhìn chung, việc lập chỉ mục kém là vấn đề phát sinh từ các sự cố liên quan đến JavaScript. Nếu bạn nhận thấy mình có những URL được liên kết tốt, chứa nội dung chất lượng cao nhưng không được lập chỉ mục, chắc chắn bạn sẽ muốn kiểm tra các vấn đề SEO liên quan đến JavaScript .
Trong báo cáo về phạm vi lập chỉ mục của Google Search Console, các trang này có thể đang bị kẹt trong một trong hai nhóm “Đã phát hiện — hiện chưa được lập chỉ mục” hoặc “Đã thu thập thông tin — hiện chưa được lập chỉ mục”.
Quá trình kiểm tra này nhằm mục đích phát hiện các trường hợp nội dung trang quan trọng đối với SEO, chẳng hạn như tiêu đề, nội dung chính, liên kết nội bộ và các yếu tố khác, được hiển thị bằng JavaScript.
Dưới đây là những công cụ bạn cần để làm theo:
Con ếch gào thét
Bảng điều khiển tìm kiếm Google
Tiện ích mở rộng Xem mã nguồn đã hiển thị cho Chrome
Trước khi đi sâu vào bất cứ điều gì, tôi sẽ thu thập thông tin từ trang web giống như một công cụ tìm kiếm. Nếu Screaming Frog không thể tìm thấy các trang tôi muốn lập chỉ mục, đó là dấu hiệu của các vấn đề liên kết nội bộ, có thể liên quan đến JavaScript.
Trong Screaming Frog, hãy điều hướng đến Cấu hình > Cấu hình Thu thập dữ liệu và thiết lập tương tự như của tôi:
Trong tab Spider > Crawl , hãy làm theo cấu hình này. Điều cần thiết là phải bỏ chọn JavaScript và cung cấp sơ đồ trang web XML của bạn.
Tiếp theo, hãy vào Spider > Rendering và chọn “Text Only” để Screaming Frog không thực thi bất kỳ mã JavaScript nào.
Cuối cùng, hãy vào User-Agent và chọn “Googlebot (Smartphone)”.
Bạn đã sẵn sàng bắt đầu bò rồi đấy.
Vào mục Mode > Spider , nhập URL trang chủ của trang web và nhấn “Start”.
Sau khi quá trình thu thập dữ liệu hoàn tất, hãy điều hướng đến Phân tích thu thập dữ liệu > Bắt đầu . Screaming Frog sẽ phân tích các URL mà nó đã thu thập được so với các URL trong sơ đồ trang web XML của bạn. Chúng tôi muốn xem liệu quá trình thu thập dữ liệu có bỏ sót các URL mà chúng tôi muốn các công cụ tìm kiếm lập chỉ mục hay không.
Trong tab “Tổng quan” ở bảng điều khiển bên phải, cuộn xuống phần “Sơ đồ trang web”. Nếu bạn thấy nhiều URL mồ côi, như trong ví dụ bên dưới, có thể bạn có các liên kết nội bộ quan trọng được tạo bằng JavaScript. Tôi khuyên bạn nên xem lại danh sách các URL mồ côi này để xác nhận xem có thực sự có các trang bạn muốn được lập chỉ mục trong số đó hay không.
Nếu Screaming Frog có thể thu thập toàn bộ nội dung có thể lập chỉ mục của bạn với cấu hình này, thì thật tuyệt. Nhưng bạn vẫn chưa hoàn toàn thoát khỏi rắc rối. Cho dù có vấn đề về liên kết nội bộ hay không, bạn cần xác định những yếu tố quan trọng về SEO nào đang thiếu trong mã HTML thô của mình.
Bằng cách so sánh mã HTML thô của một trang web với mã HTML đã được hiển thị, bạn có thể thấy những phần tử nào có sẵn cho các công cụ tìm kiếm khi trang được tải lần đầu so với những phần tử được hiển thị bằng JavaScript.
Screaming Frog cung cấp một cách nhanh chóng để xác định bao nhiêu nội dung trên trang web của bạn được hiển thị bằng JavaScript. Nó giúp bạn tập trung vào các trang hoặc mẫu trang dựa vào JavaScript.
Khôi phục cấu hình mặc định cho Screaming Frog, sau đó vào Spider > Rendering và chọn “JavaScript”.
Vì việc thu thập dữ liệu JavaScript mất nhiều thời gian hơn đáng kể so với thu thập dữ liệu văn bản, tôi khuyên bạn nên thu thập dữ liệu từ một danh sách URL tiêu biểu thay vì toàn bộ trang web của mình.
Đặt Screaming Frog ở chế độ "Danh sách" và nhập một vài URL quan trọng vào các mẫu trang thiết yếu trên trang web của bạn.
Nhấp vào “Bắt đầu”.
Khi quá trình thu thập dữ liệu hoàn tất, hãy chuyển đến tab “JavaScript”, nơi bạn sẽ tìm thấy bảng so sánh hữu ích giữa số lượng từ trong mã HTML và số lượng từ được hiển thị.
Nếu kết quả tương tự như ảnh chụp màn hình ở trên, bạn cần kiểm tra kỹ hơn nếu thấy số lượng từ tăng đáng kể sau khi JavaScript được thực thi. Tiếp theo, hãy cùng phân tích mã nguồn để xem liệu có bất kỳ yếu tố quan trọng nào về SEO bị thiếu trong HTML thô hay không.
Đây là một trong những tiện ích mở rộng SEO cho Chrome mà tôi yêu thích và sử dụng nhiều nhất. Bạn có thể nhanh chóng so sánh mã HTML thô của một trang với mã HTML đã được hiển thị. Tôi sử dụng tổ hợp phím CMD + F (CTRL + F trên máy tính PC) để tìm kiếm các yếu tố SEO thiết yếu và xác nhận xem chúng có xuất hiện trong mã HTML thô hay không.
Dưới đây là các phần tử mà tôi luôn kiểm tra xem chúng có xuất hiện trong mã HTML thô hay không:
Liên kết nội bộ
Thẻ chính tắc
Thẻ tiêu đề
Nội dung chính
Tiêu đề trang và mô tả meta
Đánh dấu lược đồ
Sau khi xác định được các vấn đề về SEO JavaScript, tôi tiến hành thử nghiệm trực tiếp trên một vài công cụ để xác minh giả thuyết của mình.
Tôi sẽ hướng dẫn bạn hai phương pháp nhanh chóng dưới đây:
Sử dụng công cụ Kiểm tra URL của Google Search Console
Kiểm tra ngẫu nhiên chỉ mục của Google bằng toán tử tìm kiếm “site:”.
Cả hai đều hữu ích để thu thập ảnh chụp màn hình nhằm củng cố kết quả kiểm toán của bạn.
Hãy tiến hành kiểm tra trực tiếp các URL mà bạn phát hiện có vấn đề về SEO JavaScript bằng công cụ Kiểm tra URL của GSC. Bạn có thể tìm kiếm mã HTML của bất kỳ trang nào được kiểm tra để xác nhận xem Google có nhận thấy những gì bạn đang thấy trong quá trình kiểm tra hay không.
Nếu bạn không thể truy cập hồ sơ Google Search Console của trang web, hãy sử dụng công cụ Kiểm tra Kết quả Tìm kiếm Nâng cao của Google .
Mặc dù Google có thể lập chỉ mục nội dung được hiển thị bằng JavaScript, bạn có thể xác nhận rằng mình không tận dụng được giá trị SEO tiềm năng của nó nếu Google chọn không làm vậy.
Sử dụng công cụ tìm kiếm trang web, đây là một phương pháp đáng tin cậy để kiểm tra nhanh chỉ mục của Google. Sao chép một chuỗi văn bản được hiển thị bằng JavaScript từ trang web và làm theo định dạng sau:
site:www.example.com/page-url/ “Chuỗi văn bản được JavaScript hiển thị từ trang”
Trong ví dụ dưới đây, tôi muốn kiểm tra xem các đánh giá sản phẩm trên một trang thương mại điện tử có được Google lập chỉ mục hay không. Hóa ra, Google không thu thập được loại nội dung phong phú do người dùng tạo ra này.
Bất kỳ chuyên gia SEO giỏi nào cũng biết rằng việc chỉ ra vấn đề mà không đưa ra giải pháp là không hiệu quả. Vì vậy, hãy cùng xem xét các lựa chọn mà chúng ta có thể đề xuất cho các nhà phát triển web để cải thiện SEO JavaScript.
Tính khả thi của các giải pháp này phụ thuộc vào nền tảng công nghệ của trang web bạn. Do đó, việc vạch ra một phương án tốt/tốt hơn/tốt nhất là rất quan trọng.
Với tư cách là những người làm SEO, chúng ta có thể ngủ ngon giấc mỗi đêm khi biết rằng các liên kết nội bộ, tiêu đề trang, nội dung chính và nhiều yếu tố khác của trang web đều có sẵn cho Google ở dạng HTML thô. Các bot tìm kiếm có thể thu thập thông tin và lập chỉ mục nội dung quan trọng của chúng ta một cách hiệu quả mà không gặp phải lỗi hoặc sự chậm trễ liên quan đến dịch vụ hiển thị của Google.
Hãy đảm bảo bạn chỉ ra cho các nhà phát triển những yếu tố SEO quan trọng hiện đang thiếu trong mã HTML gốc và tìm hiểu tính khả thi của việc thực hiện các cập nhật đó.
Trước khi đi sâu vào giải pháp này, chúng ta hãy cùng hiểu sự khác biệt giữa render phía máy chủ (SSR) và render phía máy khách (CSR):
Kết xuất phía máy chủ: Lần tải trang đầu tiên sẽ gửi toàn bộ nội dung đến trình duyệt thông qua HTML.
Kết xuất phía máy khách: Nội dung từ các tệp JavaScript được tải xuống trình duyệt sau khi trang được tải lần đầu.
Các vấn đề khi lập chỉ mục nội dung được hiển thị bằng JavaScript phát sinh từ quá trình hiển thị phía máy khách. Bạn có biết khi bạn tắt JavaScript trong trình duyệt và một số phần của trang biến mất không? Đó chính là vấn đề được minh họa rõ ràng ở đây.
Tôi thường xuyên sử dụng phép so sánh này của Onely để giải thích sự khác biệt: "CSR giống như một công thức nấu ăn. Google có công thức làm bánh cần được nướng và thu thập nguyên liệu. SSR – Google có chiếc bánh đã sẵn sàng để ăn. Không cần phải nướng nữa."
Vậy câu hỏi quan trọng dành cho các nhà phát triển của chúng ta là: "Liệu chúng ta có thể dựa vào SSR thay vì CSR để cung cấp nội dung trong quá trình tải trang ban đầu?"
Và đây là một mẹo hay: Nếu bạn quen thuộc với framework JavaScript của website mình, nhiều framework cung cấp các công cụ tiện dụng để tích hợp SSR một cách dễ dàng.
Khung JS | Giải pháp SSR |
Phản ứng | Next.js, Gatsby |
Góc | Angular Universal |
Vue.js | Nuxt.js |
Hiển thị động là một giải pháp kết hợp, trong đó người dùng trải nghiệm giao diện hiển thị phía máy khách của trang web, trong khi các bot của công cụ tìm kiếm được cung cấp một phiên bản HTML tĩnh riêng biệt.
Đây là giải pháp kém tối ưu nhất vì tài liệu của Google mô tả nó là một "giải pháp tạm thời". Tuy nhiên, đối với một số trang web, đây lại là giải pháp khả thi duy nhất.
Sẽ thật tuyệt nếu các nhà phát triển gác lại mọi việc mỗi khi bạn đưa ra vấn đề SEO cần khắc phục, phải không? Thật không may, thế giới không xoay quanh các ưu tiên SEO. Nhưng bạn có thể huy động nguồn lực về phía mình nếu đưa ra được lý lẽ thuyết phục.
Nếu bạn phát hiện ra rằng việc hiển thị bằng JavaScript gây hại đến hiệu suất SEO, mục tiêu của bạn là đưa ra lập luận kinh doanh thuyết phục để những người không chuyên về SEO cũng quan tâm đến vấn đề này:
Hãy gắn cơ hội này với mục tiêu của tổ chức: Ví dụ, nếu xây dựng nhận diện thương hiệu là ưu tiên tiếp thị, hãy giải thích cách các vấn đề lập chỉ mục liên quan đến JavaScript ngăn cản khách hàng tiềm năng tìm thấy thương hiệu của bạn thông qua tìm kiếm tự nhiên.
Dự báo tác động đến hiệu suất : Việc triển khai các giải pháp khắc phục sẽ phát sinh chi phí, vì vậy hãy giảm thiểu những lo ngại đó bằng cách chứng minh lợi ích kinh doanh đạt được.
Mặc dù các chuyên gia SEO và nhà phát triển sẽ được hưởng lợi từ việc hợp tác , bạn cũng cần phải đóng góp phần của mình. Hãy làm tốt công việc chuẩn bị ban đầu để nhóm kỹ thuật của bạn dễ dàng triển khai các đề xuất của bạn đến cùng.
Cách thực hiện như sau:
Hãy trình bày giải pháp thay vì chỉ ra vấn đề. Bạn sẽ gặp ít khó khăn hơn nếu bạn sẵn sàng đối thoại thay vì đưa ra mệnh lệnh.
Cung cấp các yêu cầu kỹ thuật rõ ràng, ảnh chụp màn hình và liên kết đến tài liệu liên quan. Nếu có thể, hãy tham khảo các ví dụ từ các trang web tương tự hoặc đối thủ cạnh tranh có công nghệ tương đương.
Bạn không cần phải có chuyên môn lập trình sâu rộng để khám phá những cơ hội quý giá nhằm giải quyết các vấn đề SEO JavaScript. Bằng cách làm theo hướng dẫn kiểm tra từng bước mà tôi đã cung cấp, bạn đang xây dựng một trang web dễ dàng hơn và tiết kiệm chi phí hơn cho các công cụ tìm kiếm trong việc thu thập thông tin và lập chỉ mục. Nhờ đó, bạn đang tạo cho nội dung của mình cơ hội xếp hạng tốt hơn và mang lại giá trị kinh doanh có ý nghĩa thông qua tìm kiếm tự nhiên.
Nội dung bài viết
Windows 
Microsoft Office 
An toàn Bảo mật
Thiết kế đồ hoạ
Công nghệ AI
Công cụ giải trí
Công cụ học tập
Tiện ích hỗ trợ