JavaScript & SEO: Tạo trải nghiệm BOT tốt tương tự như trải nghiệm người dùng

20/11/13
394
176
43
#1
(WayToMarketing) - Việc hiểu về JavaScript và những tác động tiềm ẩn đến hiệu suất tìm kiếm là một kỹ năng cốt lõi của chuyên gia SEO. Nếu công cụ tìm kiếm không thể thu thập trang web hoặc không thể phân tích và hiểu nội dung thì sẽ không có gì được index và trang web sẽ không được xếp hạng.

Câu hỏi quan trọng nhất của SEO liên quan đến JavaScript: công cụ tìm kiếm có thể xem nội dung và nắm bắt được những trải nghiệm web hay không? Nếu không, những giải pháp nào có thể được tận dụng để khắc phục điều này?

Nguyên tắc cơ bản

JavaScript là gì?

Khi tạo một trang web hiện đại, có ba thành phần chính:

1. HTML - Hypertext Markup Language là xương sống hoặc người tổ chức nội dung trên một trang web. Đó là cấu trúc của một trang web (ví dụ như headings, paragraphs, list elements...) và xác định nội dung tĩnh.

2. CSS – Cascading Style Sheets là thiết kế, glitz, glam và style được thêm vào một trang web.

3. JavaScript – JavaScript là sự tương tác và là thành phần cốt lõi của web động.
Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung.gif
JavaScript được đặt trong tài liệu HTML với thẻ <script> (nghĩa là nó được nhúng trong HTML) hoặc được liên kết/được tham chiếu. Hiện có rất nhiều thư viện JavaScript bao gồm jQuery, AngularJS, ReactJS, EmberJS...

Thư viện JavaScript và frameworks:

Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung.png

AJAX là gì?

AJAX hay còn gọi là Asynchronous JavaScript và XML là một tập các kỹ thuật phát triển web kết hợp JavaScript và XML cho phép các ứng dụng web giao tiếp với máy chủ trong background mà không can thiệp vào trang hiện tại. Asynchronous có nghĩa là các chức năng khác hoặc các dòng code khác có thể chạy trong khi async script đang chạy. XML được sử dụng là ngôn ngữ chính để chuyển dữ liệu. Tuy nhiên, thuật ngữ AJAX được sử dụng cho tất cả các loại chuyển giao dữ liệu (bao gồm JSON).

AJAX được sử dụng phổ biến là để cập nhật nội dung hoặc layout của một webpage mà không khởi tạo mới một trang đầy đủ. Thông thường, khi tải trang tất cả nội dung trên trang phải được yêu cầu và nạp từ máy chủ và sau đó render trên trang. Tuy nhiên, với AJAX chỉ cần tải các nội dung khác nhau giữa các trang giúp cải thiện trải nghiệm người dùng vì chúng không phải là làm mới toàn bộ.

Người ta có thể nghĩ đến AJAX như các cuộc gọi máy chủ mini. Một ví dụ điển hình về AJAX là Google Maps. Trang được cập nhật mà không tải lại toàn bộ trang (nghĩa là mini server calls đang được sử dụng để tải nội dung khi người dùng điều hướng).
Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 2.png
Document Object Model (DOM) là gì?

Là một chuyên gia SEO, bạn cần phải hiểu DOM là gì bởi vì đó là những gì Google đang sử dụng để phân tích và hiểu các trang web.

DOM là những gì bạn thấy khi bạn “Inspect Element” trong một trình duyệt. Đơn giản, bạn có thể nghĩ về DOM như các bước mà trình duyệt sẽ mất sau khi nhận HTML document để render trang.

Điều đầu tiên mà trình duyệt nhận được là HTML document. Sau đó, nó sẽ bắt đầu phân tích nội dung trong tài liệu này và fetch các nguồn tài nguyên bổ sung chẳng hạn như hình ảnh, CSS và JavaScript.

DOM là hình thức phân tích cú pháp thông tin và nguồn tài nguyên. Người ta có thể nghĩ đó là một phiên bản có cấu trúc và được tổ chức của code trang web.

Ngày nay, DOM thường khác so với HTML document ban đầu, do đó nó được gọi chung là dynamic HTML. Dynamic HTML là khả năng thay đổi nội dung của một trang tùy thuộc vào đầu vào của người dùng, điều kiện môi trường (ví dụ như thời gian trong ngày) các các biến khác nhau, tận dụng HTML, CSS và JavaScript.

Ví dụ đơn giản với thẻ <title> được cư trú thông qua JavaScript:
Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 5.png
Headless browsing là gì?

Headless browsing chỉ đơn giản là hành động fetch webpage mà không có giao diện người dùng. Điều quan trọng là phải hiểu bởi Google và bây giờ là Baidu tận dụng headless browsing để hiểu rõ hơn về trải nghiệm người dùng và nội dung của webpage.

PhantomJS và Zombie.js là headless browsers được đọc theo kịch bản thường được sử dụng để tự động hóa tương tác web cho mục đích thử nghiệm và render HTML tĩnh cho các yêu cầu ban đầu (trước khi render).

Tại sao JavaScript có thể là thách thức đối với SEO? (Và cách khắc phục vấn đề)

Có ba (3) lý do chính để quan tâm đến JavaScript trên trang web của bạn:

- Khả năng thu thập: Khả năng của bot để thu thập trang web của bạn
- Tính khả dụng: tính khả dụng của bots để truy cập thông tin và phân tích nội dung của bạn.
- Dự đoán độ trễ của trang web: AKA the Critical Rendering Path.

Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 6.png
Khả năng thu thập

Liệu bots có thể tìm ra các URL và hiểu kiến trúc trang web của bạn? Có 2 yếu tố quan trọng ở đây:

- Ngăn chặn công cụ tìm kiếm từ JavaScript của bạn
- Internal linking phù hợp, không sử dụng các sự kiện JavaScript để thay thế cho các thẻ HTML.

Tại sao việc JavaScript bị chặn lại là một vấn đề lớn?

Nếu công cụ tìm kiếm bị chặn không thu thập JavaScript, chúng sẽ không nhận được trải nghiệm đầy đủ của trang web. Điều này có nghĩa là công cụ tìm kiếm không nhìn thấy những gì người dùng cuối nhìn thấy. Điều này có thể làm giảm sự hấp dẫn trang web của bạn với công cụ tìm kiếm và cuối cùng nó có thể được coi là cloaking (nếu mục đích thực sự là độc hại),

Công cụ Fetch as Google và robots.txt của TechnicalSEO.com và thử nghiệm Fetch and Render có thể giúp xác định các nguồn tài nguyên mà Google đang bị chặn.

Cách đơn giản nhất để giải quyết vấn đề này là thông qua việc cung cấp cho các công cụ tìm kiếm quyền truy cập vào các nguồn tài nguyên họ cần để hiểu được trải nghiệm người dùng của bạn.

Internal linking

Internal linking phải được thực hiện với các thẻ anchor thông thường trong HTML hoặc DOM (sử dụng thẻ HTML hrefs="www.waytomarketing.com") cùng với việc sử dụng chức năng JavaScript t để cho phép người dùng đi qua trang web.

Về cơ bản: Không sử dụng sự kiện onclick của JavaScript như một sự thay thế cho internal linking. Mặc dù có thể tìm thấy và thu thập URL cuối cùng (thông qua chuỗi trong mã JavaScript hoặc XML sitemaps), chúng sẽ không được liên kết để điều hướng toàn bộ trang web.

Internal linking là tín hiệu mạnh mẽ đối với các công cụ tìm kiếm liên quan đến kiến trúc và tầm quan trọng của các trang. Trên thực tế, internal link là khá mạnh đến nỗi chúng có thể (trong một số trường hợp) ghi đè "gợi ý về SEO" như các thẻ canonical.

Cấu trúc URL

Về mặt lịch sử, các trang web dựa trên JavaScript (còn gọi là "các trang web AJAX") đang sử dụng các định danh mảng (#) trong URL.

Không được khuyến cáo

- Kí hiệu (#) - ký hiệu này không thể được thu thập. Nó được sử dụng để xác định anchor link. Đây là những liên kết cho phép chuyển đến một phần nội dung trên một trang. Google khuyến cáo không sử dụng # trong URL.

- Hashbang (#!) - Hashbang (#!) là một cách để hỗ trợ trình thu thập. Google và Bing đã phát triển một giải pháp AJAX phức tạp và những URL (#!) đẹp với UX cùng tồn tại với một trải nghiệm tương đương với trải nghiệm escaped_fragment HTML-based dành cho các bots. Google đã từ chối đề xuất này, muốn nhận trải nghiệm người dùng chính xác. Có 2 trải nghiệm tại đây.

+ Original Experience (aka Pretty URL): URL này phải có một #! (hashbang) trong URL để chỉ ra rằng có một escaped fragment hoặc meta element cho thấy escaped fragment tồn tại (<meta name="fragment" content="!">).

+ Escaped Fragment (aka Ugly URL, HTML snapshot): URL này thay thế hashbang (#!) với “_escaped_fragment_” và phục vụ HTML snapshot. Nó được gọi là URL xấu vì nó dài và có vẻ như nó là một kẻ tấn công.
Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 7.png
Khuyến cáo

- pushState History API dựa vào điều hướng và là một phần của History API. Về cơ bản, pushState cập nhật URL trong thanh địa chỉ và chỉ những gì cần thay đổi trên trang được cập nhật. Nó cho phép các trang web của JS tận dụng URL "sạch". PushState hiện đang được hỗ trợ bởi Google.

+ Sử dụng pushState tốt cho việc cuộn vô hạn. Lý tưởng là nếu người dùng làm mới trang, trải nghiệm sẽ đưa họ đến vị trí chính xác. Tuy nhiên, họ không cần làm mới trang, khi nội dung cập nhật sẽ kéo họ xuống trong khi URL được cập nhật trong thanh địa chỉ.

+ Ví dụ: một ví dụ về việc triển khai thực hiện của search engine-friendly infinite scroll được tạo ra bởi John Mueller có thể được tìm thấy ở đây. Ông thúc đẩy kỹ thuật replaceState (), mà không bao gồm các chức năng nút back như pushState.

+ Đọc thêm: Mozilla PushState History API Documents.

slide.jpg
Khả năng thu được

Các công cụ tìm kiếm đã được hiển thị để sử dụng headless browsing khi render DOM để hiểu rõ hơn về trải nghiệm của người dùng và nội dung trên trang. Tức là, Google có thể xử lý một số JavaScript và sử dụng DOM (thay vì tài liệu HTML).

Đồng thời, có những tình huống mà các công cụ tìm kiếm phải vật lộn để hiểu JavaScript. Không ai muốn tình huống Hulu xảy ra với trang web của họ hoặc trang web của khách hàng. Điều quan trọng là phải hiểu cách các chương trình tương tác với nội dung của bạn. Khi bạn không chắc chắn, hãy kiểm tra.

Giả sử chúng ta đang nói về một bot công cụ tìm kiếm thực hiện JavaScript, có một vài yếu tố quan trọng cho các công cụ tìm kiếm để có thể có được nội dung:

- Nếu người dùng phải tương tác để có cái gì đó, công cụ tìm kiếm có thể không nhìn thấy nó.

+ Google là người dùng lười biếng. Nó không nhấp chuột, nó không di chuyển và nó không đăng nhập. Nếu UX đầy đủ yêu cầu hành động từ người dùng, cần phải đặc biệt đề phòng để đảm bảo rằng bots đang nhận được trải nghiệm tương đương.

- Nếu JavaScript xảy ra sau sự kiện tải JavaScript chạy thêm khoảng ~5-seconds*, có thể công cụ tìm kiếm không nhìn thấy nó.

* John Mueller đã đề cập rằng không có giá trị thời gian chờ cụ thể; Tuy nhiên, các trang web nên tải trong vòng năm giây.

* Các thử nghiệm Screaming Frog cho thấy tương quan với 5s để hiển thị nội dung.

* Sự kiện tải cộng với 5 giây là những gì mà PageSpeed Insights, Mobile Friendliness Tool, and Fetch as Google sử dụng. Kiểm tra test timer của Max Prin.

- Nếu có lỗi trong JavaScript, cả trình duyệt và công cụ tìm kiếm sẽ không thể đi qua và có khả năng bị mất các phần của trang nếu toàn bộ mã không được thực hiện.

Cách đảm bảo Google và các công cụ tìm kiếm khác có thể tải nội dung của bạn.

1. Kiểm tra

Giải pháp phổ biến nhất để giải quyết JavaScript là cung cấp cho Google trải nghiệm giống như người tìm kiếm là tình huống được yêu thích của Google.

Lần đầu tiên Google thông báo rằng có thể hiểu rõ hơn về web (tức là JavaScript) vào tháng 5 năm 2014. Các chuyên gia trong ngành đã đề xuất rằng Google có thể thu thập thông tin về cách sử dụng JavaScript trước thông báo này. Nhóm iPullRank đã đưa ra hai tác phẩm tuyệt vời trong năm 2011: Googlebot là Chrome và Googlebots thông minh như thế nào? (Cảm ơn bạn, Josh và Mike). Google của Adam Audette có thể thu thập JavaScript và thúc đẩy DOM trong năm 2015. Do đó, nếu bạn có thể xem nội dung của bạn trong DOM, rất có thể nội dung của bạn đang được phân tích cú pháp trong Google.

Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 9.jpg

Gần đây, Bartosz Goralewicz đã thực hiện một thử nghiệm thú vị về sự kết hợp của nhiều thư viện JavaScript và các frameworks để xác định cách Google tương tác với các trang (ví dụ: họ có đang lập chỉ mục URL / nội dung không? GSC tương tác như thế nào?...). Cuối cùng cho thấy rằng Google có thể tương tác với nhiều hình thức của JavaScript. Thậm chí John Mueller đã bắt đầu với một nhóm tìm kiếm JavaScript.

Tất cả các nghiên cứu này là tuyệt vời và giúp SEO hiểu khi nào cần được quan tâm và có một vai trò chủ động. Tuy nhiên, trước khi bạn xác định giải pháp đúng đắn cho trang web của bạn, tôi khuyên bạn hãy cẩn trọng khi thử nghiệm.

Xem xét thử nghiệm và đánh giá thông qua những điều sau:

1. Xác nhận rằng nội dung của bạn đang xuất hiện trong DOM.

2. Kiểm tra tập hợp con các trang để xem liệu Google có thể lập chỉ mục nội dung hay không.

+ Kiểm tra thủ công từ nội dung của bạn.

+ Fetch với Google và xem nếu nội dung xuất hiện.

+ Fetch với Google được cho là xảy ra xung quanh sự kiện tải hoặc trước thời gian chờ. Đó là một thử nghiệm tuyệt vời để kiểm tra xem liệu Google có thể xem nội dung của bạn hay không và bạn đang chặn JavaScript trong robots.txt của bạn hay không.

+ Lưu ý: nếu bạn chưa được xác minh trong GSC, hãy thử Fetch and Render của Technicalseo.com.

Sau khi bạn đã kiểm tra tất cả điều này, nếu điều gì đó không làm việc và công cụ tìm kiếm và bots đang đấu tranh và index để có được nội dung của bạn. Có lẽ bạn đang quan tâm đến các công cụ tìm kiếm thay thế (DuckDuckGo, Facebook, LinkedIn...) hoặc có thể bạn đang tận dụng thông tin meta cần được phân tích bởi các chương trình khác, chẳng hạn như các thẻ Twitter summary hoặc Facebook Open Graph.

2. HTML SNAPSHOTS

HTML SNAPSHOTS là gì?

HTML snapshots là một trang được hiển thị đầy đủ (như người ta có thể thấy trong DOM) có thể được trả về cho các bots tìm kiếm.

Google đã giới thiệu HTML snapshots vào năm 2009 nhưng vẫn được hỗ trợ trong năm 2015 và họ đã lúng túng đề cập đến chúng như là một phần tử cần tránh vào cuối năm 2016. HTML snapshots là chủ đề gây tranh cãi với Google. Tuy nhiên, chúng rất quan trọng để hiểu, bởi vì trong những tình huống nhất định chúng là cần thiết.

Nếu các công cụ tìm kiếm (hoặc các trang web như Facebook) không thể nắm bắt được JavaScript của bạn, tốt hơn là quay lại HTML snapshot chứ không phải để nội dung của bạn được lập chỉ mục. Lý tưởng nhất là trang web của bạn sẽ tận dụng một số dạng phát hiện tác nhân người dùng ở phía máy chủ và trả về HTML snapshot cho bot.

Đồng thời, người ta cũng phải thừa nhận rằng Google muốn có cùng trải nghiệm với người dùng (nghĩa là chỉ cung cấp cho Google một HTML snapshot nếu các cuộc thử nghiệm là xấu và nhóm tìm kiếm JavaScript không thể hỗ trợ cho tình huống của bạn).

Những cân nhắc

Khi cân nhắc HTML snapshot, bạn phải xem xét rằng Google đã không chấp nhận đề xuất AJAX này. Mặc dù Google vẫn hỗ trợ kỹ thuật này nhưng Google khuyên bạn nên tránh nó. Vâng, Google đã thay đổi ý định và bây giờ muốn nhận được trải nghiệm tương tự như người dùng. Định hướng này là có ý nghĩa vì nó cho phép bot nhận được trải nghiệm chân thực hơn với trải nghiệm của người dùng.

Một yếu tố xem xét thứ hai liên quan đến nguy cơ cloaking. Nếu HTML snapshot được tìm thấy không đại diện cho trải nghiệm trên trang, nó được coi là một nguy cơ cloaking.

LỢI ÍCH

HTML snapshot có những ưu điểm khá mạnh:

- Hiểu được rằng công cụ tìm kiếm và trình thu thập sẽ hiểu được những trải nghiệm.

- Các công cụ tìm kiếm khác và trình thu thập thông tin (Bing và Facebook) có thể hiểu được trải nghiệm.

Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 10.jpg

Độ trễ của trang web


Khi các trình duyệt nhận được một tài liệu HTML và tạo DOM, hầu hết các tài nguyên được tải khi chúng xuất hiện trong tài liệu HTML. Điều này có nghĩa là nếu bạn có một tập tin lớn ở phía trên cùng của tài liệu HTML của bạn, trình duyệt sẽ tải tập tin lớn đó lên trước.

Khái niệm critical rendering path của Google là tải những gì người dùng cần càng sớm càng tốt.

Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 11.png

Tuy nhiên, nếu bạn có các nguồn tài nguyên không cần thiết hoặc các tập tin JavaScript làm tắc nghẽn khả năng tải của trang, bạn nhận được “render-blocking JavaScript" nghĩa là JavaScript của bạn đang chặn khả năng xuất hiện của trang như thể để tải nhanh hơn.

Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 12.png
Giải pháp

Nếu bạn phân tích kết quả tốc độ trang của mình (thông qua các công cụ như Page Speed Insights Tool, WebPageTest.org, CatchPoint...) và xác định rằng có vấn đề render-blocking JavaScript, dưới đây là ba giải pháp tiềm năng:

- Inline: Thêm JavaScript vào tài liệu HTML.
- Async: Đặt JavaScript không đồng bộ (nghĩa là thêm thuộc tính "async" vào thẻ HTML).

Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 13.png

- Hoãn: Bằng cách đặt JavaScript trong HTML.

Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 14.png

TL;DR

Trình thu thập thông tin và công cụ tìm kiếm sẽ cố gắng thu thập dữ liệu, thực hiện và giải thích JavaScript của bạn nhưng không đảm bảo. Đảm bảo rằng nội dung của bạn có thể thu thập, có thể lấy được và không phát triển các chướng ngại vật tiềm ẩn trong trang web. Mấu chốt = mọi tình huống đều cần thử nghiệm. Dựa vào kết quả, đánh giá các giải pháp tiềm năng.

Javascript vs Seo tao trai nghiem bot tot nhu nguoi dung 15.png

 
Sửa lần cuối:

Donate

Thống kê diễn đàn

Chủ đề
19,286
Bài viết
21,111
Thành viên
89,397
Thành viên mới
bichphuong02