JavaScript SEO: Các trang web đang trong thời kỳ hoàng kim của sự phát triển front-end, JavaScript và Technical SEO đang trải qua thời kỳ phục hương.
Là một người làm SEO và là người đam mê phát triển web, tôi muốn chia sẻ với các bạn về JavaScript SEO hiện đại dựa trên các phương pháp hay nhất trong ngành.
Trong bài viết này chúng ta sẽ cùng tìm hiểu:
- JavaScript SEO là gì?
- JavaScript tốt hay xấu cho SEO?
- JavaScript ảnh hưởng đến SEO như thế nào?
- Cách Google xử lý các trang bằng JavaScript
- Cách kiểm tra và khắc phục sự cố các vấn đề về JavaScript SEO
- Render Options (Tùy chọn kết xuất)
- Làm cho trang web JavaScript của bạn thân thiện với SEO
JavaScript SEO là gì?
JavaScript SEO là một phần trong Technical SEO (Tối ưu hóa công cụ Tìm kiếm) với mục đích làm cho các trang web sử dụng nhiều JavaScript dễ dàng thu thập thông tin và lập chỉ mục, cũng như là thân thiện với tìm kiếm.
Mục đích chính là để các trang web này được tìm thấy và đạt được thứ hạng cao hơn trong các công cụ tìm kiếm. Nó chủ yếu liên quan đến:
- Tối ưu hóa nội dung được đưa qua JavaScript để thu thập thông tin, hiển thị và lập chỉ mục bởi các công cụ tìm kiếm.
- Ngăn ngừa, chẩn đoán và khắc phục sự cố xếp hạng cho các trang web và SPA (Single Page Applications) được xây dựng trên các khung JavaScript, chẳng hạn như React, Angular và Vue.
- Đảm bảo rằng các trang web có thể được khám phá bởi các công cụ tìm kiếm thông qua việc liên kết bởi các phương pháp hay nhất.
- Cải thiện thời gian tải trang để phân tích trang và mã thực thi JS để có trải nghiệm tốt với người dùng (UX) nhờ được tổ chức hợp lý.
JavaScript tốt hay xấu cho SEO?
JavaScript rất cần thiết với web hiện đại và giúp việc xây dựng trang web có thể mở rộng và dễ bảo trì hơn. Tuy nhiên, có một số triển khai JavaScript có thể gây bất lợi cho khả năng hiển thị của công cụ tìm kiếm.
JavaScript ảnh hưởng đến SEO như thế nào?
JavaScript có thể ảnh hưởng đến các yếu tố trên trang sau đây và các yếu tố xếp hạng quan trọng đối với SEO:
- Nội dung được kết xuất (Rendered content)
- Liên kết
- Hình ảnh tải chậm
- Thời gian tải trang
- Metadata
Các trang web hỗ trợ JavaScript là gì?
Khi chúng ta nói về các trang web được xây dựng trên JavaScript, chúng ta không đề cập đến việc chỉ đơn giản là thêm một lớp tương tác JS vào tài liệu HTML (Ví dụ: khi thêm loạt ảnh JS vào một trang web tĩnh).
Trong trường hợp này, các trang web hỗ trợ JavaScript đề cập đến thời điểm nội dung cốt lõi hoặc nội dung chính được đưa vào DOM thông qua Java Script.
Mẫu này được gọi là App Shell và là nền tảng cho các ứng dụng web tiến bộ (PWA). Chúng ta sẽ khám phá điều này tiếp theo.
Cách kiểm tra xem một trang web có được xây dựng bằng JavaScript hay không?
Bạn có thể nhanh chóng kiểm tra xem một trang web có được xây dựng trên khung JavaScript hay không bằng cách sử dụng công cụ tra cứu công nghệ như BuiltWith hoặc Wappalyzer.
Bạn cũng có thể “Kiểm tra phần tử” hoặc “Xem nguồn” trong trình duyệt để kiểm tra mã JS> Các khung JavaScript phổ biến mà bạn có thể tìm thấy bao gồm:
- Angular by Google
- React by Facebook
- Vue by Evan You
JavaScript SEO cho nội dung cốt lõi
Đây là một ví dụ: Các ứng dụng web hiện đại đang được xây dựng trên các khung JavaScript, như Angular, React và Vue. Các khung JavaScript cho phép các nhà phát triển nhanh chóng xây dựng và mở rộng các ứng dụng web tương tác.
Hãy cùng xem mẫu dự án mặc định cho Angular.js, một khuôn khổ phổ biến do Google sản xuất.
Khi được xem trong trình duyệt, trang này không giống như một trang web thông thường. Chúng ta có thể xem văn bản, hình ảnh và liên kết.
Tuy nhiên, hãy cùng đi sâu hơn và xem qua đoạn mã:
Bây giờ chúng ta có thể thấy rằng tài liệu HTML này gần như hoàn toàn không có bất kỳ nội dung nào.
Chỉ có gốc ứng dụng và một vài thẻ script trong phần nội dung của trang. Điều này do nội dung chính của ứng dụng trang đơn này được đưa vào DOM thông qua JavaScript.
Nói theo cách khác, ứng dụng này phụ thuộc vào JS để tải nội dung chính trên trang!
Các vấn đề tiềm ẩn về SEO: Bất kỳ nội dung cốt lõi này được hiển thị cho người dùng nhưng không hiển thị cho các bot của công cụ tìm kiếm đều có thể là vấn đề nghiêm trọng!
Nếu các công cụ tìm kiếm không thể thu thập đầy đủ tất cả nội dung của bạn, thì trang web của bạn có thể sẽ bị các đối thủ cạnh tranh bỏ qua. Chúng ta sẽ thảo luận chi tiết hơn về vấn đề đó sau.
JavaScript SEO cho các liên kết nội bộ
Bên cạnh việc tự động đưa nội dung vào DOM, JavaScript cũng có thể ảnh hưởng đến khả năng thu thập thông tin của các liên kết. Google phát hiện ra các trang mới bằng cách thu thập thông tin các liên kết mà nó tìm thấy trên các trang.
Như một cách hay nhất, Google đặc biệt khuyên bạn nên liên kết các trang bằng cách sử dụng HTML Anchor Tags với các thuộc tính href, cũng như bao gồm anchor text mô tả cho các siêu liên kết:
Tuy nhiên, Google cũng khuyến cáo rằng các nhà phát triển không nên dựa vào các phần tử HTML khác – như div hoặc span – hay các trình xử lý sự kiện JS cho các liên kết. Đây được gọi là các liên kết “giả” và chúng sẽ không được thu thập thông tin, theo Nguyên tắc chính thức của Google.
Bất chấp những nguyên tắc này, trong một nghiên cứu độc lập của bên thứ ba đã gợi ý rằng Googlebot có thể thu thập dữ liệu các liên kết JavaScript. Tuy nhiên, theo kinh nghiệm của tôi, tôi thấy rằng cách tốt nhất là giữ các liên kết dưới các dạng phần tử HTML tĩnh.
Các vấn đề tiềm ẩn về SEO: Nếu các công cụ tìm kiếm không thể thu thập thông tin và đi theo các liên kết đến các trang chính của bạn, thì các trang của bạn có thể đang bỏ lỡ các liên kết nội bộ có giá trị trỏ đến chúng.
Các liên kết nội bộ giúp các công cụ tìm kiếm thu thập dữ liệu trên trang web của bạn hiệu quả hơn và làm nổi bật các trang quan trọng nhất.
Trường hợp xấu nhất là nếu các liên kết nội bộ của bạn được triển khai không chính xác, thì Google có thể sẽ gặp khó khăn khi tìm ra các trang mới của bạn (bên ngoài sơ đồ trang XML).
JavaScript SEO cho lazy-loading images
JavaScript cũng có thể ảnh hưởng đến khả năng thu thập dữ liệu của các lazy-loading images. Đây là một ví dụ cơ bản.
Đoạn mã này dành cho lazy-loading images trọng DOM qua JavaScript:
Googlebot hỗ trợ tính năng tải chậm, nhưng nó không ”cuộn trang” giống như người dùng thường làm khi truy cập vào các trang web của bạn. Thay vào đó, Googlebot chỉ đơn giản là thay đổi kích thước chung của nó để dài hơn khi thu thập thông tin nội dung trên web.
Do đó, trình xử lý “cuộn” không bao giờ được kích hoạt và nội dung không bao giờ được trình thu thập thông tin hiển thị.
Dưới đây là một ví dụ về đoạn mã thân thiện với SEO hơn:
Đoạn mã này cho thấy rằng API Intersection Observe kích hoạt một lệnh gọi lại khi bất kỳ phần tử nào hiển thị. Nó linh hoạt và mạnh mẽ hơn trình nghe trên cuộn và được hỗ trợ bởi Googlebot hiện đại.
Mã này hoạt động nhờ cách Googlebot thay đổi kích thước cửa sổ xem của nó để có thể “xem” nội dung của bạn. (Xem hình bên dưới)
Bạn cũng có thể sử dụng tính năng native lazy-loading trong trình duyệt. Tính năng này được hỗ trợ bởi Google Chrome, nhưng lưu ý rằng nó vẫn là một tính năng ở mức thử nghiệm. Trong trường hợp xấu nhất, nó có thể sẽ bị Googlebot bỏ qua và tất cả hình ảnh vẫn sẽ được tải:
Các vấn đề tiềm ẩn về SEO: Tương tự như nội dung cốt lõi không được tải, điều quan trọng là bạn cần đảm bảo rằng Google có thể “nhìn thấy” tất cả nội dung trên một trang, bao gồm cả hình ảnh.
Ví dụ: trên một trang web thương mại điện tử có nhiều danh sách sản phẩm, lazy-loading images có thể cung cấp trải nghiệm người dùng nhanh hơn cho cả người dùng lẫn bot!
JavaScript SEO cho tốc độ trang
JavaScript cũng có thể ảnh hưởng đến thời gian tải trang, đây là một yếu tố xếp hạng chính thức trong chỉ mục Google’s mobile-first index. Điều này có nghĩa là một trang chậm có thể sẽ gây hại cho thứ hạng trong tìm kiếm.
Làm cách nào chúng tôi có thể giúp các nhà phát triển giảm thiểu được điều này?
- Giảm thiểu JavaScript
- Trì hoãn JS không quan trọng cho đến sau khi nội dung chính được hiển thị trong DOM
- Nội tuyến JS quan trọng
- Cung cấp JS với tải trọng nhỏ hơn
Các vấn đề tiềm ẩn về SEO: Một trang web chậm tạo ra trải nghiệm người dùng kém cho tất cả mọi người, ngay cả công cụ tìm kiếm. Bản thân Google định nghĩa việc tải JavaScript để tiết kiệm tài nguyên, vì vậy, điều quan trọng là đảm bảo rằng bất kỳ nội dung nào được cung cấp cho khách hàng đều được mã hóa và phân phối hiệu quả nhằm giúp bảo vệ thứ hạng.
JavaScript SEO cho dữ liệu meta
Ngoài ra, điều quan trọng cần lưu ý là các SPA sử dụng gói bộ định tuyến như react-router hoặc vue-router phải thực hiện thêm một số bước để xử lý những thứ như thay đổi meta tags khi điều hướng giữa các chế độ xem bộ định tuyến.
Điều này thường được xử lý với Node.js như vue-meta hoặc react-meta-tags.
Chế độ xem bộ định tuyến là gì? Dưới đây là các liên kết đến các “trang” khác nhau trong Single Page Application hoạt động trong React theo năm bước:
- Khi người dùng truy cập trang web React, một yêu cầu GET sẽ được gửi đến máy chủ cho tệp ./index.html.
- Sau đó, máy chủ sẽ gửi trang index.html đến máy khách, chứa các tập lệnh để khởi chạy React và React Router.
- Ứng dụng web sau đó được tải ở phía máy khách.
- Nếu người dùng nhấp vào liên kết để truy cập trang mới (/ example), một yêu cầu được gửi đến máy chủ cho URL mới.
- React Router chặn yêu cầu trước khi nó đến máy chủ và tự xử lý việc thay đổi trang. Điều này được thực hiện bằng cách cập nhật cục bộ các thành phần React được hiển thị và thay đổi phía máy khách URL.
Nói cách khác, khi người dùng hoặc bot liên kết đến URL trên trang web React, họ sẽ không được phân phát nhiều tệp HTML tĩnh. Thay vào đó, các thành phần React (như đầu trang, chân trang và phần nội dung) được lưu trữ trên tệp ./index.html gốc đang được tổ chức lại để hiển thị nội dung khác.
Đây là lý do vì sao chúng lại được gọi là Single Page Application!
Các vấn đề tiềm ẩn về SEO: Vậy nên, điều quan trọng là sử dụng một gói như React Helmet để đảm bảo rằng người dùng đang được cung cấp siêu dữ liệu duy nhất cho mỗi trang hoặc “chế độ xem khi duyệt các SPA. Nếu không, các công cụ tìm kiếm có thể đang thu thập cùng một siêu dữ liệu cho mọi trang, hoặc tệ hơn là không có gì cả!
Tất cả những điều này ảnh hưởng đến SEO trong một bức tranh toàn cảnh hơn như thế nào? Tiếp theo, chúng ta sẽ xem cách mà Google xử lý JavaScript như thế nào?
Cách Google xử lý các trang bằng JavaScript
Trong những ngày đầu của các công cụ tìm kiếm, một phản hồi HTML được tải xuống là đủ để xem nội dung của hầu hết các trang. Nhờ sự phát triển của JavaScript, các công cụ tìm kiếm hiện cần hiển thị nhiều trang như một trình duyệt để chúng có thể xem nội dung theo cách mà người dùng xem.
Hệ thống xử lý quá trình kết xuất tại Google được gọi là Web Rendering Service (WRS). Google đã cung cấp một sơ đồ đơn giản để trình bày cách thức hoạt động của quy trình này.
1. Trình thu thập thông tin
Trình thu thập thông tin gửi các yêu cầu GET đến máy chủ. Máy chủ phản hồi với các tiêu đề và nội dung của tệp, sau đó sẽ được lưu.
Yêu cầu có thể đến từ một tác nhân người dùng trên di động vì Google hiện chủ yếu dựa trên Mobile-First Indexing. Bạn có thể kiểm tra cách Google thu thập dữ liệu trang web của bạn bằng Công cụ kiểm tra URL (URL Inspection Tool) bên trong Search Console.
Khi bạn thực hiện điều này cho một URL, hãy kiểm tra Thông tin phù hợp cho “Crawled as” và nó sẽ cho bạn biết liệu bạn vẫn đang lập chỉ mục trên máy tính để bàn hay đã ưu tiên lập chỉ mục trên thiết bị di động.
Các yêu cầu chủ yếu đến từ Mountain View, CA, USA, nhưng họ cũng thực hiện thu thập thông tin cho một số trang thích ứng với ngôn ngữ bên ngoài Hoa Kỳ.
Tôi đề cập tới điều này bởi vì một số trang web sẽ chặn hoặc xử lý khách truy cập từ một quốc gia cụ thể hoặc sử dụng IP cụ thể theo những cách khác nhau, điều này có thể khiến nội dung của bạn không được Googlebot nhìn thấy.
Một số trang web cũng có thể sử dụng tính năng phát hiện tác nhân người dùng để hiển thị nội dung cho một trình thu thập thông tin cụ thể.
Đặc biệt với các trang web JavaScript, Google có thể nhìn thấy điều gì đó khác với người dùng. Đây là lý do vì sao các công cụ của Google như URL Inspection Tool trong Google Search Console, Kiểm tra tính thân thiện với thiết bị di động và Kiểm tra kết quả nhiều định dạng rất quan trọng để có thể khắc phục sự cố JavaScript SEO.
Chúng hiển thị cho bạn những gì Google nhìn thấy và hữu ích để kiểm tra xem Google có thể đã bị chặn hay không và liệu họ có thể xem nội dung trên trang hay không.
Tôi sẽ trình bày cách kiểm tra điều này trong phần Renderer (phần 4) vì có một số khác biệt chính giữa yêu cầu GET đã tải xuống, trang được Renderer và thậm chí cả các công cụ kiểm tra.
Cũng cần lưu ý rằng mặc dù Google tuyên bố đầu ra của quá trình thu thập thông tin là “HTML” trên hình ảnh trên, nhưng trong thực tế, họ đang thu thập dữ liệu và lưu trữ tất cả các tài nguyên cần thiết để xây dựng trang. Trang HTML, tệp JavaScript, CSS, yêu cầu XHR, điểm cuối API,.v..v
2. Processing
Có rất nhiều hệ thống bị xáo trộn bởi cụm từ “Processing” trong hình ảnh. Tôi sẽ đề cập đến một vài trong số này có liên quan đến JavaScript.
Tài nguyên và liên kết
Google không điều hướng từ trang này sang trang khác như người dùng thường làm. Một phần của Processing là kiểm tra trang để tìm các liên kết đến các trang khác và các tệp cần thiết để xây dựng trang.
Các liên kết này được kéo ra và thêm vào hàng thu thập thông tin, đây là thứ mà Google đang sử dụng để ưu tiên và lên lịch thu thập thông tin.
Google sẽ lấy các liên kết tài nguyên (CSS, JS,…) cần thiết để xây dựng một trang từ những thứ như <link> tag. Tuy nhiên, các liên kết đến các trang khác cần phải ở trong một định dạng cụ thể để Google coi chúng là liên kết.
Các liên kết bên trong và bên ngoài cần phải là một thẻ <a> có href thuộc tính. Có nhiều cách để bạn có thể thực hiện điều này hoạt động cho những người dùng có JavaScript không thân thiện với tìm kiếm.
Good:
<a href=”/page”>simple is good</a>
<a href=”/page” onclick=”goTo(‘page’)”>still okay</a>
Bad:
<a onclick=”goTo(‘page’)”>nope, no href</a>
<a href=”javascript:goTo(‘page’)”>nope, missing link</a>
<a href=”javascript:void(0)”>nope, missing link</a>
<span onclick=”goTo(‘page’)”>not the right HTML element</span>
<option value=”page”>nope, wrong HTML element</option>
<a href=”#”>no link</a>
Button, ng-click, there are many more ways this can be done incorrectly.
Cũng cần lưu ý rằng các liên kết nội bộ được thêm bằng JavaScript sẽ không được chọn cho đến khi Renderer. Điều đó sẽ diễn ra tương đối nhanh chóng và không phải là nguyên nhân đáng lo ngại trong hầu hết các trường hợp.
Bộ nhớ đệm
Mọi tệp mà Google tải xuống, bao gồm các trang HTML, tệp JavaScript, tệp CSS,.v.v. sẽ được lưu trữ mạnh mẽ. Google sẽ bỏ qua thời gian bộ nhớ cache của bạn và tìm nạp một bản sao mới khi họ muốn. Tôi sẽ nói thêm một chút về điều này và tại sao nó lại quan trọng trong phần Renderer.
Loại bỏ trùng lặp
Nội dung trùng lặp có thể bị loại bỏ hoặc bị tước quyền khỏi HTML đã tải xuống trước khi nó được hiển thị. Với các mô hình vỏ ứng dụng, rất ít nội dung và mã có thể được hiển thị trong phản hồi HTML.
Trên thực tế, mọi trang trên trang web có thể hiển thị cùng một mã và điều này đôi khi có thể khiến các trang bị coi là trùng lặp và không thể kết xuất ngay lập tức. Tệ hơn nữa, sai trang hoặc thậm chí sai trang web có thể hiển thị trong kết quả tìm kiếm. Điều này sẽ tự giải quyết theo thời gian nhưng có thể sẽ có vấn đề, đặc biệt là với các trang web mới.
Các chỉ thị hạn chế nhất
Google sẽ chọn các câu lệnh hạn chế nhất giữa HTML và phiên bản được hiển thị của một trang. Nếu JavaScript thay đổi một câu lệnh và điều đó xung đột với câu lệnh từ HTML, Google sẽ chỉ tuân theo điều nào là hạn chế nhất. Noindex sẽ ghi đè chỉ mục và noindex trong HTML sẽ hoàn toàn bỏ qua hiển thị.
3. Render queue
Mọi trang sẽ được chuyển đến trình kết xuất ngay bây giờ. Một trong những mối quan tâm lớn nhất của nhiều người làm SEO với JavaScript và lập chỉ mục hai giai đoạn (HTML sau đó hiển thị trang) là các trang có thể không được hiển thị trong nhiều ngày hay thậm chí là vài tuần.
Khi Google xem xét vấn đề này, họ nhận thấy rằng các trang được chuyển đến trình Render với thời gian trung bình là 5 giây và phân vị thứ 90 là phút. Vì vậy, khoảng thời gian giữa việc lấy HTML và hiển thị các trang không phải là mối quan tâm ở trong hầu hết các trường hợp.
4. Renderer
Renderer là nơi Google kết xuất một trang để xem những gì người dùng nhìn thấy. Đây là nơi mà họ sẽ xử lý JavaScript và bất kỳ thay đổi nào do JavaScript thực hiện đối với Document Object Model (DOM).
Đối với điều này, Google đang sử dụng trình duyệt Chrome không có head, hiện là “evergreen”, có nghĩa là trình duyệt này sẽ sử dụng phiên bản Chrome mới nhất và hỗ trợ các tính năng mới nhất.
Cho đến gần đây, Google đang hiển thị bằng Chrome 41, vì vậy nhiều tính năng sẽ không được hỗ trợ.
Google có thêm thông tin về Web Rendering Service (WRS), bao gồm những thứ như từ chối quyền, không có trạng thái, làm phẳng DOM tối và DOM sáng, và nhiều hơn thế nữa.
Renderer ở quy mô web có thể là ‘kỳ quan lớn của thế giới’. Đây là một công việc hết sức nghiêm túc và cần một lượng lớn tài nguyên. Do quy mô lớn, Google đang sử dụng nhiều lối tắt trong quá trình kết xuất để tăng tốc mọi thứ.
Hiện nay chỉ Ahrefs là công cụ SEO có thể hiển thị các trang web trên quy mô lớn và hệ thống của họ có khả năng quản lý ~150 triệu trang mỗi ngày để làm cho các chỉ mục liên kết được hoàn thiện hơn.
Nó cho phép họ có thể kiểm tra các chuyển hướng JavaScript và có thể hiển thị được các liên kết mà họ tìm thấy được chèn bằng JavaScript:
Tài nguyên được lưu trong bộ nhớ cache
Google hiện đang phụ thuộc rất nhiều vào tài nguyên bộ nhớ đệm. Các trang được lưu vào bộ nhớ đệm, các tập tin, các yêu cầu API cũng đều được lưu vào đó. Về cơ bản, mọi thứ đều được lưu vào trong bộ nhớ đệm trước khi được gửi tới trình Renderer.
Họ không đi ra ngoài và tải xuống từng tài nguyên cho mỗi lần tải trang; thay vào đó, họ sử dụng tài nguyên được lưu trong bộ nhớ cache để làm tăng tốc quá trình này.
Điều này có thể dẫn đến một số trạng thái không thể xảy ra khi các phiên bản tệp trước được sử dụng trong quá trình hiển thị và phiên bản được lập chỉ mục của một trang có thể chứa các phần của tệp cũ hơn.
Bạn có thể sử dụng tính năng lập phiên bản tệp hoặc lấy dấu nội dung (schema) để tạo tên tệp mới khi có những 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ị.
Không có thời gian chờ cố định
Một lầm tưởng phổ biến về SEO là trình Render chỉ đợi năm giây để tải trang của bạn. Mặc dù luôn luôn là một ý tưởng hay để làm cho trang web của bạn nhanh hơn, tuy nhiên điều lầm tưởng này không thực sự có ý nghĩa với cách Google lưu trữ các tệp được đề cập ở trên.
Về cơ bản, họ đang tải một trang với mọi thứ đã được lưu trong bộ nhớ cache. Lầm tưởng xuất phát từ các công cụ kiểm tra như URL Inspection Tool, nơi các tài nguyên được tìm nạp một cách trực tiếp và chúng cần đặt giới hạn hợp lý.
Không có thời gian chờ cố định cho Render. Những gì họ đang làm có khả năng tương tự như những gì Rendertron công khai làm. Họ có thể chờ đợi một thứ gì đó như networkidle0 khi không còn hoạt động mạng nào nữa và cũng đặt khoảng thời gian tối đa trong trường hợp có điều gì đó bị kẹt hoặc ai đó đang cố gắng khai thác bitcoin trên trang của họ.
Googlebot nhìn thấy gì?
Như tôi đã nói ở trên, Googlebot không thực hiện hành động trên các trang web giống như người dùng. Họ sẽ không nhấp vào mọi thứ hoặc ‘cuộn’, nhưng điều đó không có nghĩa rằng họ không có giải pháp thay thế.
Đối với nội dung, miễn là nó được tải trong DOM mà không cần thực hiện hành động cần thiết, họ sẽ thấy được nội dung đó. Tôi sẽ đề cập về vấn đề này nhiều hơn trong phần khắc phục sự cố, nhưng nhìn về cơ bản, nếu nội dung nằm trong DOM nhưng chỉ bị ẩn, nó sẽ được nhìn thấy. Nếu nó không được tải vào DOM cho đến sau một cú nhấp chuột, thì nó sẽ không được nhìn thấy.
Google cũng không cần phải cuộn xem nội dung của bạn vì họ có một giải pháp thông minh khác để có thể xem nội dung. Đối với thiết bị di động, họ tải trang với kích thước màn hình 411×731 pixel và thay đổi kích thước chiều dài khi đó thành 12.140 pixel.
Về cơ bản, nó trở thành một chiếc điện thoại thực sự ‘dài’ với kích thước màn hình 411×12140 pixel. Còn đối với máy tính để bàn, chúng cũng làm y như vậy và chuyển từ 1024×768 pixel thành 1024×9307 pixel.
Một lối tắt thú vị khác là Google không vẽ các pixel trong quá trình Render. Cần thời gian và tài nguyên bổ sung để có thể hoàn tất quá trình tải trang và họ không thực sự cần xem trạng thái cuối cùng với các pixel. Họ chỉ cần biết cấu trúc và bố cục, họ có được điều đó mà không cần phải thực sự ‘đếm’ các pixel. Như Martin Splitt từ Google đã nói:
“Trong tìm kiếm của Google, chúng tôi không thực sự quan tâm đến các pixel bởi vì chúng tôi không thực sự muốn hiển thị nó cho ai đó. Chúng tôi muốn xử lý thông tin và thông tin ngữ nghĩa, vì vậy chúng tôi cần một cái gì đó ở trạng thái trung gian. Chúng tôi thực sự không cần phải vẽ các pixel.”
Hình ảnh có thể giúp tôi giải thích tới các bạn tốt hơn chút. Trong công cụ dành cho nhà phát triển của Chrome, nếu bạn chạy thử nghiệm trên tab Performance, bạn sẽ nhận được biểu đồ tải.
Phần màu xanh lục ở đây đại diện cho giai đoạn ‘sơn’ và cho Googlebot, điều đó không bao giờ xảy ra để tiết kiệm tài nguyên.
Gray = downloads
Blue = HTML
Yellow = JavaScript
Purple = Layout
Green = Painting
5. Crawl queue
Google có một tài liệu nói về Crawl Budget và VietMoz cũng đã có một bài viết chia sẻ rõ về chủ đề Crawl Budget của Google này.
Tuy nhiên, bạn nên hiểu rằng mỗi trang web sẽ có Crawl Budget (Ngân sách thu thập thông tin) riêng và mỗi yêu cầu phải được ưu tiên. Google cũng phải cân bằng giữa việc thu thập dữ liệu trên trang web của bạn so với mọi trang web khác trên internet.
Các trang web mới hơn nói chung hoặc trang web có nhiều trang động có thể sẽ được thu thập thông tin chậm hơn. Một số trang sẽ được cập nhật ít thường xuyên hơn những trang khác và một số tài nguyên cũng có thể sẽ được yêu cầu cập nhật ít thường xuyên hơn.
Cách kiểm tra và khắc phục sự cố các vấn đề về JavaScript SEO
Một điểm đáng chú ý với các trang web JavaScript là chúng chỉ có thể cập nhật các phần của DOM. Duyệt đến một trang khác với tư cách người dùng có thể sẽ không cập nhật một số khía cạnh như thẻ title hoặc thẻ Canonical trong DOM, nhưng đây có thể không phải là vấn đề đối với các công cụ tìm kiếm.
Hãy nhớ rằng, Google tải từng trang không có trạng thái, vì vậy họ không lưu thông tin trước đó và không điều hướng giữa các trang.
Tôi đã thấy những người làm SEO bối rối khi nghĩ rằng có vấn đề vì những gì họ thấy sau khi điều hướng từ trang này sang trang khác, chẳng hạn như thẻ canonical không cập nhật, nhưng Google có thể không bao giờ nhìn thấy được trạng thái này.
Các nhà phát triển có thể khắc phục điều này bằng cách cập nhật trạng thái sử dụng, cái được gọi là API History, nhưng một lần nữa nhắc lại là có thể nó không phải là vấn đề. Làm mới trang và xem những gì bạn thấy hoặc tốt hơn là chạy nó thông qua một trong các công cụ kiểm tra của Google để xem những gì mà Google thấy.
View-source vs Inspect
Khi bạn nhấp chuột phải vào cửa sổ trình duyệt, bạn sẽ thấy một số tùy chọn để xem mã nguồn của trang và kiểm tra trang. View-Source sẽ hiển thị cho bạn giống như yêu cầu GET. Đây là HTML thô của trang.
Inspect sẽ hiển thị cho bạn DOM đã xử lý sau khi thực hiện các thay đổi và gần với nội dung mà Googlebot nhìn thấy hơn. Về cơ bản, đây là phiên bản cập nhật mới nhất của trang. Bạn nên sử dụng View page Source khi làm việc với JavaScript.
Google Cache
Bộ nhớ Cache của Google không phải là cách đáng tin cậy để kiểm tra những gì mà Googlebot nhìn thấy. Nó thường là HTML ban đầu, mặc dù đôi khi nó là HTML được Render hoặc một phiên bản cũ hơn.
Hệ thống được tạo ra để xem nội dung khi một trang web ngừng hoạt động. Nó không đặc biệt hữu ích như một công cụ chuyên gỡ lỗi.
Google Testing Tools
Các công cụ kiểm tra của Google như URL Inspector trong Google Search Console, Mobile Friendly Tester, Rich Results Tester rất hữu ích để gỡ lỗi.
Tuy nhiên, ngay cả những công cụ này cũng hơi khác so với những gì Google sẽ thấy. Tôi đã nói về thời gian chờ năm giây trong các công cụ này mà Renderer không có, nhưng các công cụ này cũng khác nhau ở chỗ chúng đang lấy tài nguyên trong thời gian thực và không sử dụng các phiên bản đã lưu trong bộ nhớ cache như trình Renderer sẽ làm.
Ảnh chụp màn hình trong các công cụ này bên dưới cũng hiển thị các trang có các pixel được vẽ mà Google không thấy ở trong trình Renderer.
Tuy nhiên, các công cụ này rất hữu ích để xem nội dung có được tải bằng DOM hay không. HTML được hiển thị trong các công cụ này là DOM được kết xuất (Render). Bạn có thể tìm kiếm một đoạn văn bản để xem nó có được tải vào theo mặc định hay không.
Các công cụ cũng sẽ hiển thị cho bạn các tài nguyên có thể bị chặn và thông báo lỗi bảng điều khiển có ích cho việc gỡ lỗi.
Searching Text in Google
Một cách kiểm tra nhanh khác mà bạn có thể làm là chỉ cần tìm kiếm một đoạn nội dung của bạn trong Google. Tìm kiếm “Một số cụm từ trong nội dung của bạn” và xem liệu trang có được trả lại hay không.
Nếu đúng như vậy, thì nội dung của bạn có thể đã được xem. Lưu ý rằng nội dung bị ẩn theo mặc định có thể không hiển thị trong đoạn mã của bạn trên SERPs.
Ahrefs
Cùng với các trang hiển thị chỉ mục liên kết, bạn có thể bật JavaScript trong thu thập thông tin Site Audit để mở khóa nhiều dữ liệu hơn trong kiểm tra của mình.
Các thanh công cụ Ahrefs cũng hỗ trợ JavaScript và cho phép bạn so sánh HTML với các phiên bản trả về.
Render options
Chúng ta có rất nhiều tùy chọn khi ‘kết xuất’ JavaScript. Google có một biểu đồ trình bày về điều này. Bất kỳ loại SSR nào, render tĩnh, thiết lập render trước đều sẽ tốt cho các công cụ tìm kiếm.
Nguyên nhân chính gây ra sự cố là render toàn bộ phía máy khách trong đó tất cả render xảy ra trong trình duyệt.
Mặc dù Google có thể sẽ ổn ngay cả khi render phía máy khách, nhưng tốt nhất bạn nên chọn một tùy chọn render khác để hỗ trợ các công cụ tìm kiếm khác. Bing cũng có hỗ trợ hiển thị JavaScript, nhưng quy mô không xác định.
Yandex và Baidu có sự hỗ trợ hạn chế so với những gì tôi đã thấy và nhiều công cụ tìm kiếm khác có rất ít hoặc không có hỗ trợ cho JavaScript.
Ngoài ra, còn có tùy chọn Render động, hiển thị cho một số tác nhân người dùng nhất định. Về cơ bản, đây là một giải pháp thay thế nhưng có thể hữu ích để hiển thị cho một số bot nhất định như công cụ tìm kiếm hoặc thậm chí là bot trên mạng xã hội.
Các bot trên mạng xã hội không chạy JavaScript, vì vậy những thứ như thẻ OG sẽ không được nhìn thấy trừ khi bạn hiển thị nội dung trước khi phân phát nội dung đó cho chúng.
Nếu bạn đang sử dụng lược đồ thu thập thông tin AJAX cũ, hãy lưu ý rằng lược đồ này đã không được dùng nữa và có thể sẽ không còn được hỗ trợ nữa.
Làm cho trang web JavaScript của bạn thân thiện với SEO
Ở đây có rất nhiều quy trình tương tự như những thứ mà người làm SEO đã cảm thấy quen thuộc, tuy nhiên có thể sẽ có một chút khác biệt. Hãy để ý nhé!
On-page SEO
Tất cả các quy tắc On- page SEO thông thường dành cho nội dung, thẻ title, mô tả meta, thuộc tính alt, thẻ meta robots,..v..v. vẫn được áp dụng.
Xem ngay: On-page SEO: Hướng dẫn tối ưu đầy đủ nhất
Một số vấn đề mà tôi nhiều lần gặp phải khi làm việc với các trang web JavaScript là tiêu đề và mô tả có thể được sử dụng lại và các thuộc tính alt trên hình ảnh hiếm khi được đặt.
Cho phép thu thập thông tin
Không chặn quyền truy cập vào tài nguyên. Google cần có khả năng truy cập và tải xuống các tài nguyên để chúng có thể hiển thị các trang một cách chính xác.
Trong tệp robots.txt của bạn, cách dễ nhất để cho phép thu thập thông tin các tài nguyên cần thiết là thêm:
User-Agent: Googlebot
Allow: .js
Allow: .css
URL
Thay đổi URL khi cập nhật nội dung. Tôi đã đề cập tới API History, nhưng bạn nên biết rằng với các khung JavaScript, chúng sẽ có một bộ định tuyến cho phép bạn ‘ánh xạ’ tới các URL ‘sạch’. Bạn không muốn sử dụng hàm băm (#) để định tuyến.
Đây đặc biệt là một vấn đề đối với Vue và một số phiên bản Angular trước đó. Vì vậy, đối với một URL như domain.com/#something, mọi thứ sau dấu # thường bị máy chủ bỏ qua. Để khắc phục điều này cho Vue, bạn có thể làm việc với nhà phát triển của mình để thay đổi những điều sau:
Vue router:
Use ‘History’ Mode instead of the traditional ‘Hash’ Mode.
const router = new VueRouter ({
mode: ‘history’,
router: [] //the array of router links
)}
Nội dung trùng lặp
Với JavaScript, có thể có một số URL cho cùng một nội dung, điều này dẫn đến các vấn đề về nội dung trùng lặp. Điều này có thể là do viết hoa, ID, tham số có ID,… Vì vậy, tất cả những điều này có thể tồn tại:
domain.com/Abc
domain.com/abc
domain.com/123
domain.com/?id=123
Giải pháp xử lý việc này rất đơn giản. Bạn chỉ cần chọn một phiên bản mà bạn muốn lập chỉ mục và cài đặt thẻ Canonical.
Tùy chọn loại plugin SEO
Đối với các khung JavaScript, chúng thường được gọi là các mô-đun. Bạn sẽ tìm thấy các phiên bản cho nhiều khung phổ biến như React, Vue và Angular bằng cách tìm kiếm “khung + tên mô-đun” như “React Helmet”.
Các trang lỗi
Bởi vì các khung JavaScript không phải từ phía máy chủ, chúng thực sự không thể gây ra lỗi máy chủ như 404. Bạn có một số tùy chọn khác nhau cho các trang lỗi:
Sử dụng chuyển hướng JavaScript đến một trang phản hồi với mã trạng thái 404.
Thêm thẻ Noindex vào trang bị lỗi cùng với một số loại thông báo lỗi như “không tìm thấy trang 404”. Đây sẽ được coi là 404 soft vì mã trạng thái thực tế được trả về sẽ là 200.
Sơ đồ trang web
Các khung JavaScript thường có các bộ định tuyến ánh xạ tới các URL ‘sạch’. Các bộ định tuyến này thường có một mô-đun bổ sung cũng có thể tạo sơ đồ trang web.
Bạn có thể tìm thấy chúng bằng cách tìm kiếm sơ đồ trang web hệ thống + bộ định tuyến của mình, chẳng hạn như “Sơ đồ trang web bộ định tuyến Vue”.
Nhiều giải pháp kết xuất cũng có thể có các tùy chọn sơ đồ trang web. Một lần nữa, chỉ cần tìm hệ thống bạn sử dụng và Google hệ thống + sơ đồ trang web và bạn chắc chắn sẽ tìm thấy được giải pháp đã tồn tại.
Redirects
Người làm SEO đã quen với Redirect 301/302, là redirect phía máy chủ. Nhưng JavaScript thường được chạy phía máy khác. Điều này không sao vì Google xử lý trang như sau chuyển hướng.
Các chuyển hướng vẫn vượt qua tất cả các tín hiệu như PageRank. Bạn thường có thể tìm thấy các chuyển hướng này trong mã bằng cách tìm kiếm “window.location.href”.
Internationalization
Thường có một vài tùy chọn mô-đun cho các khung khác nhau hỗ trợ một số tính năng cần thiết cho quá trình Internationalization như hreflang.
Chúng thường được chuyển sang các hệ thống khác nhau và bao gồm i18n, intl, hoặc nhiều khi các mô-đun giống nhau được sử dụng cho các thẻ title như Helmet có thể được sử dụng để thêm các thẻ cần thiết.
Lazy loading
Thường có các mô-đun chuyên để xử lý vấn đề Lazy Loading. Nếu bạn chưa để ý, có những mô-đun xử lý được khá nhiều thứ mà bạn cần làm khi làm việc với các khung JavaScript.
Lazy và Suspense là những mô-đun phổ biến nhất để xử lý vấn đề tải chậm. Bạn sẽ muốn tải hình ảnh một cách chậm rãi, nhưng hãy cẩn thận khi không tải nội dung một cách chậm rãi.
Điều này có thể được thực hiện với JavaScript, nhưng nó có thể có nghĩa là nó không được các công cụ tìm kiếm chọn một cách chính xác.
Tóm lại
JavaScript là một công cụ được sử dụng một cách khôn ngoan, không phải là thứ để mà người làm SEO nên lo sợ. Hy vọng rằng, bài viết này đã giúp bạn hiểu được cách làm việc với nó tốt hơn, nhưng đừng ngại việc liên hệ với các 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 minh lớn nhất của bạn trong việc giúp cải thiện trang web JavaScript của bạn cho các công cụ tìm kiếm.
Nếu có bất kỳ câu hỏi nào cho VietMoz Academy, hãy để lại bình luận ở phía bên dưới nhé!
