Sự thành công hoặc không của việc JavaScript rendering nội dung trực tuyến của bạn có thể ảnh hưởng đến hiệu suất trang web, khả năng hiển thị trên công cụ tìm kiếm và trải nghiệm tổng thể của người dùng.
Trong bài viết này, chúng tôi sẽ giải thích:
- JavaScript rendering là gì, và cách mà các trình duyệt và công cụ tìm kiếm khác nhau xử lý nó
- Ảnh hưởng của JavaScript rendering đến tối ưu hóa công cụ tìm kiếm (SEO)
- Ba phương pháp chính để xử lý JavaScript rendering
- Cách kiểm tra các vấn đề về JS rendering trên trang web của bạn
Mẹo chuyên nghiệp
Khám phá các vấn đề liên quan đến JavaScript và nhiều hơn nữa với Semrush Site Audit.
JavaScript Rendering là gì?
JS rendering là quá trình mà một trình duyệt diễn giải và thực thi mã JavaScript được triển khai trên một trang web. Sau đó, nó chuyển đổi thành nội dung mà người dùng thấy hiển thị trong trình duyệt.
Tương tự, trong bối cảnh SEO, các công cụ tìm kiếm sẽ thu thập, render và lập chỉ mục nội dung JS của một trang web. Vì vậy, nó có thể được phát hiện trong kết quả tìm kiếm trực tuyến của người dùng.
Vậy JavaScript là gì?
JavaScript (JS) là một ngôn ngữ lập trình để tạo ra các trang web tương tác (chứa nhiều yếu tố thu hút người dùng hơn so với các trang tĩnh truyền thống) và ứng dụng web.
Đọc thêm: Hiểu những gì JavaScript làm và các ứng dụng khác nhau của nó trong Hướng dẫn cơ bản về JS.
JS là một trong những ngôn ngữ máy tính phổ biến nhất cho web, cùng với HTML và CSS.
Các nhà phát triển web sử dụng JS để thêm chức năng cho một trang web, bao gồm:
- Nội dung động: Bất kỳ nội dung nào được tạo ra từ đầu vào của người dùng hoặc thay đổi trong cơ sở dữ liệu backend của trang web. Ví dụ, các gợi ý sản phẩm cá nhân hóa, bảng tin mạng xã hội và thông tin dự báo thời tiết.
- Hoạt hình: Các ví dụ bao gồm các vòng lặp hình ảnh, biểu tượng hoạt hình, hoạt hình tải trang và đồ họa thông tin tương tác
- Xác thực biểu mẫu: Các trang web xác thực đầu vào biểu mẫu của người dùng trước khi họ gửi biểu mẫu - để kiểm tra xem người dùng có sử dụng định dạng mật khẩu hợp lệ hay không, chẳng hạn. Điều này có thể cải thiện trải nghiệm người dùng (UX) và giảm bớt sự khó chịu do lỗi biểu mẫu.
Mẹo
Tải xuống bảng cheat hữu ích của chúng tôi dành cho người mới bắt đầu để học cách sử dụng mã JavaScript.
Cách các trình duyệt xử lý JavaScript
Khi bạn truy cập một trang, một trình duyệt web (phần mềm được sử dụng để truy cập các trang web) thường sẽ xử lý JavaScript theo ba bước:
- Phân tích cú pháp: Bộ xử lý JavaScript của trình duyệt phân tích mã kịch bản để hiểu cấu trúc và cú pháp của nó
- Biên dịch: Bộ xử lý chuyển đổi kịch bản thành mã mà trình duyệt có thể thực thi
- Thực thi: Trình duyệt thực thi mã, dẫn đến một trang web được render hoàn toàn
Cách các công cụ tìm kiếm render JavaScript
Một công cụ tìm kiếm là phần mềm được thiết kế để giúp người dùng tìm kiếm trên internet. Các công cụ tìm kiếm khác nhau xử lý JavaScript khác nhau. Hãy xem cách mà những công cụ phổ biến nhất thực hiện điều này.
Quá trình JavaScript rendering của Google diễn ra qua ba giai đoạn:
- Thu thập dữ liệu: Khám phá một trang mới và tải xuống văn bản và phương tiện mà nó chứa
- Render: Thực thi mã JavaScript để hiểu nội dung của trang
- Lập chỉ mục: Hiểu nội dung của trang và đưa nó vào chỉ mục Google
Dưới đây là một tóm tắt hình ảnh từ Google Search Central về những gì xảy ra khi Google render nội dung JS của một trang:
Bọ web của Google, Googlebot, xếp hàng các trang web để thu thập dữ liệu và render.
Đầu tiên, nó đánh giá xem mỗi trang có thể được thu thập dữ liệu hay không. Googlebot sau đó kiểm tra trang đã render để tìm các liên kết. Và xếp hàng bất kỳ URL nào nó tìm thấy ở đó để thu thập dữ liệu thêm.
Bing
Bing không hỗ trợ tất cả các framework JavaScript mới nhất (tập hợp các thư viện mã) để render.
Khuyến nghị chính thức của công cụ tìm kiếm là các trang web nên sử dụng dynamic rendering thay vì JavaScript.
Dynamic rendering là gì?
Một trang web phát hiện user agent của người truy cập (phần mềm xác định người dùng) để xác định xem đó là con người hay một bọ thu thập dữ liệu của công cụ tìm kiếm. Nó sẽ render nội dung khác nhau cho con người và các công cụ tìm kiếm.
Khi phát hiện bọ thu thập dữ liệu của Bing, các trang web nên pre-render nội dung thông qua server-side rendering (SSR). Và sau đó phục vụ một trang web HTML tĩnh cho người dùng.
Lợi thế là nó giảm thiểu các yêu cầu HTTP (các yêu cầu mà trình duyệt của người dùng gửi đến máy chủ) vì trang đã render hoàn toàn được cung cấp ngay lập tức.
Yahoo
Yahoo chưa công bố thông tin chính thức về cách mà công cụ tìm kiếm của nó render JavaScript. Nhưng nó cung cấp một số lời khuyên về cách mà các trang web nên xử lý JavaScript:
- Hoãn tải JavaScript: Thực thi mã JS sau khi nội dung chính của trang đã tải. Điều này có thể cải thiện tốc độ tải trang.
- Giảm kích thước tệp JavaScript: Giảm kích thước của các tệp JS bằng cách loại bỏ dữ liệu không cần thiết (như chú thích và khoảng trắng). Để giúp mã tải nhanh hơn.
- Loại bỏ các kịch bản trùng lặp: Các trang web có thể vô tình có các tệp JavaScript trùng lặp. Kiểm tra và loại bỏ các kịch bản trùng lặp để tránh xung đột mã và tăng thời gian tải trang.
Yandex
Yandex cho phép các quản trị viên web chọn liệu có cho phép công cụ tìm kiếm hiển thị mã JavaScript trên các trang của họ hay không.
Công cụ tìm kiếm khuyên rằng các trang web nên sử dụng việc hiển thị JavaScript phía máy chủ.
Cách kiểm tra xem Googlebot đã hiển thị trang web của bạn đúng cách chưa
Trong phần này, chúng ta sẽ tập trung vào công cụ tìm kiếm được sử dụng rộng rãi nhất—và là công cụ đóng vai trò chủ đạo trong SEO.
Bạn có thể sử dụng tính năng kiểm tra URL trong Google Search Console (GSC) để kiểm tra xem trình thu thập dữ liệu web của Google đã hiển thị trang web của bạn như mong đợi hay chưa.
Nhấp vào ô tìm kiếm ở đầu bảng điều khiển GSC, gõ URL trang web của bạn và nhấn “Nhập.”
Công cụ sẽ kiểm tra xem trang web của bạn đã được thu thập hay chưa. Và nếu nó đủ điều kiện để xuất hiện trong kết quả tìm kiếm của Google.
Nhấp vào “Xem Trang Đã Thu Thập.”
Tiếp theo, nhấp vào tab “Ảnh Chụp Màn Hình” và sau đó là “Kiểm Tra URL Trực Tiếp.”
Công cụ sẽ hiển thị cho bạn một ảnh chụp màn hình về cách Googlebot hiển thị trang web của bạn.
So sánh ảnh chụp màn hình với cách trang web của bạn được hiển thị trong trình duyệt để kiểm tra bất kỳ vấn đề nào.
JavaScript ảnh hưởng đến SEO như thế nào?
Việc hiển thị JavaScript có thể có cả tác động tích cực và tiêu cực đến hiệu suất SEO của trang web bạn.
Chẳng hạn, các yếu tố tương tác trên trang web và việc cập nhật nội dung động có thể mang lại trải nghiệm trang tốt hơn. Điều mà Google thường thưởng cho với khả năng hiển thị trên trang kết quả tìm kiếm (SERP) .
Các trang web cũng sử dụng JavaScript để tạo dữ liệu có cấu trúc một cách động—hoặc schema markup.
Lưu ý
Dữ liệu có cấu trúc là mã bạn thêm vào các trang của mình để giúp các công cụ tìm kiếm hiểu rõ hơn về nội dung của bạn. Bối cảnh này giúp họ hiển thị nội dung của bạn theo một định dạng phong phú—giúp trang web của bạn nổi bật trên các SERP. Nội dung phong phú có thể bao gồm hình ảnh, đánh giá sao, số lượng đánh giá, v.v.
Mặc dù không phải là một yếu tố xếp hạng của Google, dữ liệu có cấu trúc có thể đóng vai trò trong việc cải thiện khả năng hiển thị của bạn trên công cụ tìm kiếm.
Nhưng, nếu không thực hiện đúng mã JavaScript, việc hiển thị JS có thể có những nhược điểm SEO.
Kết quả là?
- Giảm tốc độ tải trang: Các trang web sẽ tải chậm hơn. Và chúng ta biết rằngtốc độ tải trang đã là một yếu tố xếp hạng của Google trong nhiều năm.
- Vấn đề thu thập dữ liệu: Các công cụ tìm kiếm đôi khi gặp khó khăn trong việc thu thập và lập chỉ mục các trang chứa JavaScript. Điều này có thể dẫn đến khả năng hiển thị trang web giảm trong kết quả tìm kiếm.
- Nội dung trùng lặp: Các vấn đề xảy ra khi cùng một trang web có nhiều định dạng khác nhau, ví dụ: như một trang với việc hiển thị JavaScript và như một trang HTML tĩnh. Các công cụ tìm kiếm sẽ không biết phiên bản nào nên hiển thị trong kết quả tìm kiếm và có thể kết thúc với việc hiển thị cả hai. Nội dung trùng lặp cũng có thể xuất hiện trên trang web.
Mẹo chuyên nghiệp
Giúp trang web JS của bạn dễ dàng hơn cho các công cụ tìm kiếm thu thập, hiển thị và lập chỉ mục bằng cách làm theo các thực hành tốt nhất trong hướng dẫn SEO JavaScript.
3 Phương Pháp Xử Lý Việc Hiển Thị JavaScript
Nếu trang web của bạn sử dụng JavaScript (và rất có thể là như vậy), một khía cạnh quan trọng bạn cần xác định là nó sẽ hiển thị mã JS như thế nào. Quyết định này có thể ảnh hưởng đến hiệu suất của trang web bạn và trải nghiệm tổng thể của người dùng. Có ba phương pháp hiển thị JavaScript mà bạn có thể chọn: hiển thị phía máy khách, hiển thị phía máy chủ và tạo trang tĩnh.
Cả ba phương pháp đều có ưu và nhược điểm riêng, mà chúng ta sẽ tìm hiểu tiếp theo.
Hiển Thị Phía Khách (CSR)
Trong CSR, mã JavaScript được thực thi trong trình duyệt của người dùng thay vì ở phía máy chủ.
Khi một người dùng truy cập vào một trang web, máy chủ của trang web phản hồi bằng một tệp HTML chỉ chứa cấu trúc cơ bản của trang. Cùng với các liên kết đến các tệp JS và CSS.
Trình duyệt của người dùng sau đó tải các tệp và thực thi chúng cục bộ, hiển thị trang web.
Ưu và Nhược Điểm của Hiển Thị Phía Khách (CSR)
Các lợi ích của CSR bao gồm:
Giảm tải cho máy chủ:
- Việc hiển thị JavaScript trong trình duyệt của người dùng giảm tải tổng thể trên máy chủ, điều này có thể tránh các vấn đề về hiệu suất của máy chủ Cải thiện hiệu suất trang web:
- Sau khi tải trang ban đầu, các cập nhật trang tiếp theo thường nhanh hơn. Lý do: CSR cho phép cập nhật nội dung trang mà không cần tải lại trang. Chức năng ngoại tuyến:
- Khi các tài nguyên ban đầu của một trang đã được tải xuống, CSR cho phép người dùng truy cập trang ngay cả khi không có kết nối internet. Nhưng CSR cũng đi kèm với một số nhược điểm:
Tăng thời gian tải ban đầu:
- Với CSR, cần phải tải xuống và thực thi mã JavaScript trên thiết bị của người dùng trước khi hiển thị một trang. Điều này có thể kéo dài thời gian tải trang ban đầu—có thể dẫn đến trải nghiệm người dùng kém hơn. Vấn đề thu thập và lập chỉ mục:
- CSR có thể làm cho việc thu thập và lập chỉ mục các trang chứa JavaScript trở nên khó khăn hơn cho các công cụ tìm kiếm. Có thể ảnh hưởng tiêu cực đến khả năng hiển thị của trang web trên công cụ tìm kiếm. Hiệu suất phụ thuộc vào thiết bị:
- Vì nó phụ thuộc vào việc thực thi mã trên thiết bị của người dùng, CSR có thể hoạt động kém trên các thiết bị cũ hơn. Vì nó phụ thuộc vào việc thực thi mã trên thiết bị của người dùng, CSR có thể hoạt động kém trên các thiết bị cũ.
Hiển Thị Phía Máy Chủ (SSR)
SSR hoạt động bằng cách thực thi JavaScript trên máy chủ của trang web.
Đầu tiên, một người dùng truy cập vào một URL bằng trình duyệt của họ. Trình duyệt yêu cầu trang web từ máy chủ. Và máy chủ hoàn toàn hiển thị trang, gửi lại cho trình duyệt.
Ưu và Nhược Điểm của Hiển Thị Phía Máy Chủ (SSR)
Việc hiển thị JavaScript phía máy chủ cung cấp:
- Cải thiện khả năng thu thập và lập chỉ mục: Các công cụ tìm kiếm sẽ có khả năng hiển thị nội dung HTML một cách đầy đủ khi thu thập thông tin các trang.
- Thời gian tải ban đầu nhanh hơn: Việc hiển thị toàn bộ trang trên máy chủ và sau đó gửi đến trình duyệt của người dùng giúp giảm thời gian tải ban đầu. Bởi vì trình duyệt của người dùng không cần phải tải xuống và thực thi JavaScript một cách độc lập.
- Tăng cường bảo mật: SSR giảm thiểu đầu vào từ phía người dùng. Điều này làm cho các trang web ít bị ảnh hưởng bởi các cuộc tấn công xuyên trang (các bên độc hại tiêm mã độc hại vào một trang web đáng tin cậy) và các loại tấn công mạng khác.
Trong khi đó, nhược điểm chính của việc hiển thị phía máy chủ là nó có thể gây ra tải nặng hơn cho máy chủ của trang web, đặc biệt trong các thời điểm có lưu lượng truy cập cao. Điều này có thể làm chậm trang web của bạn hoặc thậm chí khiến nó không thể truy cập được.
Tạo trang tĩnh (SSG)
Với SSG, các trang web được phục vụ dưới dạng tệp tĩnh—nghĩa là chính xác như đã lưu trên máy chủ của trang web mà không cần xử lý phía máy chủ.
Việc hiển thị diễn ra trên máy chủ của trang web. Nhưng không giống như trong SSR, nó xảy ra trước khi người dùng thực hiện yêu cầu.
Ưu và nhược điểm của Tạo trang tĩnh (SSG)
Tạo trang tĩnh cho phép:
- Cải thiện tốc độ tải trang: Tạo trang tĩnh có thể cải thiện đáng kể tốc độ tải so với các loại hiển thị khác.
- Thân thiện với SEO: Các công cụ tìm kiếm có thể thu thập thông tin các trang tĩnh dễ dàng hơn, giúp tăng tốc độ lập chỉ mục và xếp hạng.
- Chi phí hiệu quả: So với các trang web động, các trang tĩnh yêu cầu ít tài nguyên hơn để hoạt động.
Tạo trang tĩnh cũng có một vài nhược điểm:
- Thiếu chức năng động: Việc triển khai chức năng động (như nội dung cá nhân hóa hoặc do người dùng tạo) trên các trang web tĩnh có thể gặp khó khăn.
- Vấn đề quản lý nội dung: Việc quản lý nội dung trên các trang tĩnh phức tạp hơn vì mỗi thay đổi đều yêu cầu mã hóa. Khác với các trang động, có thể dễ dàng thực hiện cập nhật thông qua một hệ thống quản lý nội dung (CMS).
Cách phân tích trang web JavaScript của bạn
Sử dụng công cụ Site Audit của Semrush để phát hiện các vấn đề khác nhau có thể ngăn cản trang web sử dụng JS của bạn đạt được thứ hạng cao hơn trên công cụ tìm kiếm.
Nhập tên miền trang web của bạn và nhấp vào “Bắt đầu kiểm tra” để kiểm tra trang của bạn.
Bạn sẽ có thể tùy chỉnh các cài đặt cho việc kiểm tra, bao gồm:
- Đại diện người dùng mà bạn muốn công cụ sử dụng khi thu thập thông tin trang web của bạn
- Số lượng trang cần kiểm tra cho mỗi lần kiểm tra
- Các trang cụ thể mà bạn muốn phân tích (hoặc loại trừ)
Hãy chắc chắn bật hiển thị JavaScript trong phần “Cài đặt thu thập thông tin”.
Sau đó, nhấp vào “Bắt đầu kiểm tra trang web.” Công cụ sẽ tạo ra một báo cáo chi tiết về sức khỏe tổng thể của trang web của bạn.
Nhấp vào tab “Vấn đề”. Gõ “JavaScript” vào ô tìm kiếm để lọc theo các vấn đề liên quan đến JS.
Từ đây, chọn bất kỳ vấn đề nào để xem danh sách các trang có vấn đề đó. Một số vấn đề phổ biến mà bạn có thể gặp phải là:
- Tệp JavaScript bị hỏng: Các tệp JS đã ngừng chạy vì một lý do nào đó. Xem xét các tệp này và sửa bất kỳ vấn đề nào (hoặc loại bỏ chúng khỏi trang web của bạn hoàn toàn).
- Tệp JavaScript không nén: Các tệp chứa các dòng không cần thiết, khoảng trắng và chú thích làm tăng kích thước tệp. Sử dụng một công cụ như Minifier để giảm kích thước của chúng và giúp chúng tải nhanh hơn.
- Tệp JavaScript không được lưu vào bộ nhớ đệm: Vấn đề này xảy ra khi một trang web không có bộ nhớ đệm trình duyệt (một cơ chế để tải xuống và lưu trữ các tệp trên thiết bị của người dùng để sử dụng lại) được bật cho các tệp JS. Bật bộ nhớ đệm trình duyệt trên trang của bạn để các tệp không cần tải xuống nhiều lần bởi trình duyệt của người dùng, làm chậm thời gian tải trang.
Ngoài ra, nhấp vào “Tại sao và cách khắc phục” bên cạnh mỗi loại vấn đề để tìm hiểu cách giải quyết nó.
Đăng ký tài khoản Semrush miễn phí hôm nay để bắt đầu cải thiện hiệu suất kỹ thuật và traffic tự nhiên của trang web JS của bạn.
Đưa góc nhìn thành kế hoạch.
Chia sẻ website và mục tiêu để LionTech tư vấn giải pháp phù hợp.
Đăng ký tư vấn ↗