Seo web reactjs là gì? Có seo được những website code reactjs không?

ReactJS là gì?

Trước khi tiến hành SEO web ReactJS thì bạn cần biết ReactJS là gì trước đã. ReactJS là một thư viện mã nguồn mở của JavaScript được phát triển bởi Meta (trước đây là Facebook) với mục đích hỗ trợ các doanh nghiệp và nhà phát triển bên ngoài có thể tạo và xây dựng ứng dụng cho web và di động. Nó xuất hiện đầu tiên vào năm 2011, với tên gọi là FaxJS.

Không lâu sau khi được công bố, ReactJS đã nhanh chóng trở thành một công cụ quan trọng để phát triển giao diện người dùng cho các dự án của Facebook, bao gồm New Feed vào năm 2011 và sau đó là Instagram vào năm 2012. Tính năng lớn nhất của ReactJS chính là sự linh hoạt, tập trung vào các thành phần, và sự thuận tiện trong thao tác với giao diện lập trình ứng dụng (gọi tắt là DOM).

Bạn có thể hình dung ReactJS như là một plugin được cài đặt trong WordPress vậy. Chúng cho phép nhà phát triển nhanh hơn trong quá trình tạo và quản lý các thành phần trong thiết kế giao diện người người dùng (UI library).

Tại sao bạn nên thực hiện ReactJS?

Hồi trước, khi chúng ta mới bắt đầu tìm hiểu làm web, phía front end (giao diện người dùng - UI) thường đòi hỏi chúng ta phải học HTML, CSS, JavaScript và jQuery. Để tạo ra giao diện đẹp như các trang web phức tạp, chúng ta thường phải viết rất nhiều mã, và việc tái sử dụng mã cũng như bảo trì mã trở nên khá khó khăn.

Để tạo trải nghiệm người dùng tốt hơn (UX), chúng ta thường sử dụng AJAX từ thư viện jQuery để tạo hiệu ứng và thay đổi dữ liệu hiển thị mà không cần tải lại toàn bộ trang web. Ví dụ như khi chúng ta mua sắm trực tuyến, khi chúng ta thêm một sản phẩm vào giỏ hàng, giỏ hàng được cập nhật ngay lập tức mà không cần tải lại toàn bộ trang web. Hoặc bạn có thể thấy rõ hơn ở Facebook, khi bạn cuộn xuống để đọc tin tức, các bài đăng mới được hiển thị một cách mượt mà mà không có hiện tượng tải lại trang khi bạn nhấn F5.

ReactJS ra đời để tạo ứng dụng trang duy nhất (Single Page Application), có nghĩa là tất cả tương tác của người dùng diễn ra trên cùng một trang mà không cần phải tải lại trang web toàn bộ. ReactJS giúp quản lý giao diện thông qua khái niệm cây DOM ảo (Virtual DOM). Các thành phần giao diện được quản lý trong cây DOM ảo này và thay đổi dựa trên trạng thái. Khi các trạng thái của các thành phần thay đổi, cây DOM ảo cũng thay đổi theo.

ReactJS cũng giúp mã nguồn dễ bảo trì và mở rộng hơn. Nó cho phép chia giao diện lớn thành các thành phần nhỏ hơn, mỗi thành phần có trách nhiệm riêng. Sự giao tiếp giữa các thành phần này thông qua các thuộc tính hoặc trạng thái. Khi bạn chia nhỏ một giao diện phức tạp thành các thành phần, bạn có thể dễ dàng quản lý mã nguồn hơn và có khả năng sử dụng lại chúng trong các dự án khác hoặc trang web khác, làm cho mã nguồn trở nên ngắn gọn và dễ quản lý hơn.

Xem thêm: Thiết kế lại website có ảnh hưởng SEO không? Cách để không giảm ranking ít ai biết

Cách test SEO web ReactJS

Đối với ứng dụng viết bằng JavaScript, một cách thông thường để giải quyết vấn đề SEO là thực hiện render nội dung HTML trên máy chủ trước khi gửi nó đến trình duyệt. Thay vì chỉ đơn giản trả về một tệp tham chiếu đến file .js (như ví dụ trước), và cho trình duyệt tự render thành mã HTML, ta sẽ render mã HTML ngay trên máy chủ và gửi mã HTML đó về cho Googlebot có thể đọc và lập chỉ mục. 

Một cách làm khá hay khác là khi bạn nhận yêu cầu từ Crawler-Bot, bạn sẽ trả về mã HTML đã được render từ phía server. Còn đối với các yêu cầu từ người dùng cuối, bạn vẫn thực hiện việc render như thông thường để đảm bảo tốc độ xử lý và hiển thị. Hoặc đơn giản hơn, bạn có thể sử dụng thư viện như Next.js để xây dựng ứng dụng.

Trước hết, bạn hãy tiến hành kiểm tra xem liệu Googlebot có khả năng tự động render thành mã HTML từ các thành phần React hay không. Nếu không, thì bạn sẽ phải tìm cách giải quyết vấn đề này càng sớm càng tốt. Thông thường, Google sẽ crawl trang web từ một liên kết (có thể được thu thập từ các nguồn khác nhau), sau đó phân tích nội dung và lập chỉ mục. 

Hiện nay Google đang cung cấp một công cụ trực tuyến cho người dùng để kiểm tra quá trình crawl này có tên là "Google’s Fetch as Google tool". Đây là công cụ chính dùng cho việc kiểm tra quá trình crawl bởi Googlebot, tool cho phép bạn thực hiện quá trình hiển thị nội dung sau khi Googlebot đã crawl một liên kết cụ thể.

Bạn có thể sử dụng tool này để làm các công việc như sau:

• Kiểm tra xem Googlebot có thể truy cập được vào liên kết đầu vào hay không.
• Xem cách Googlebot hiển thị trang web sau khi đã crawl.
• Kiểm tra xem có bất kỳ tài nguyên nào (ảnh, video, JS, vv.) mà Googlebot không thể truy cập được hay không.

Đầu tiên, bạn cần tạo một ứng dụng ReactJS và sau đó triển khai nó lên máy chủ nào đó (Heroku hoặc bất kỳ dịch vụ máy chủ đám mây cloud nào cũng đều được) miễn là bạn có một liên kết công khai để truy cập vào ứng dụng:

XEM THÊM:  Cách chuyển đổi HTTP sang HTTPs siêu dễ, tăng thứ hạng SEO cho web

Các bước kiểm tra crawl và render website để SEO web ReactJS

Để sử dụng công cụ "Fetch as Google" để kiểm tra việc crawl và render trang web của bạn, bạn cần truy cập vào Google Search Console. Sau đó hãy tham khảo thử một số bước sau đây nha bạn:
Bước 1: Chọn loại trang web và nhập miền của ứng dụng của bạn vào ô văn bản. Ví dụ, bạn có thể nhập "react-seo-app.herokuapp.com" và sau đó nhấn nút "Add a Property".

Bước 2: Sau đó, Google sẽ yêu cầu bạn xác nhận trang web bạn muốn kiểm tra. Bạn sẽ phải xác nhận thông tin theo hướng dẫn.

Bước 3: Khi xác nhận đã hoàn tất, bạn sẽ thấy một menu bên trái (Sidebar)  gồm các mục khác nhau.

Bước 4: Nhấn vào phần "Crawl" tại Sidebar này. Màn hình sau đó sẽ hiển thị các tùy chọn liên quan đến crawl.

Bước 5: Sử dụng công cụ "Fetch as Google," bạn có thể kiểm tra một liên kết cụ thể bằng cách nhập URI (đường dẫn) vào ô văn bản, sau đó nhấn một trong hai nút "FETCH" (Crawl) hoặc "FETCH AND RENDER" (Crawl và Render).

• "FETCH": Công cụ sẽ crawl liên kết bạn đã nhập và hiển thị phản hồi HTTP, nhưng không hiển thị nội dung.
• "FETCH AND RENDER": Tương tự như "FETCH," nhưng cũng hiển thị nội dung mà Googlebot đã crawl.

Trong ví dụ này, mình sẽ thử chọn "FETCH AND RENDER" để kiểm tra cách Googlebot xử lý trang web. Kết quả sẽ hiển thị nội dung mà Googlebot đã crawl như sau:

Một số lưu ý

Nếu bạn gặp trường hợp Googlebot chỉ hiển thị trang trắng mà không có nội dung (trong trường hợp trang web quá chậm hoặc sử dụng Ajax để tải dữ liệu sau khi gọi API máy chủ), bạn có thể cân nhắc thực hiện một số thay đổi:

• Ưu tiên việc render ra các nội dung mà bạn muốn Googlebot hiển thị một cách nhanh chóng.
• Nếu không thành công, hãy xem xét việc render mã HTML trên máy chủ trước khi trả về trình duyệt.
• Sử dụng các cuộc gọi không đồng bộ trong ứng dụng của bạn.
• Kiểm tra lại trang web sau mỗi thay đổi bằng "Fetch as Google" để xem cách Googlebot xử lý.

Phương pháp tốt nhất là render mã HTML trên máy chủ, đặc biệt khi trang web của bạn khá nặng. Cách này đảm bảo rằng Googlebot sẽ crawl và hiển thị trang web của bạn trên trang tìm kiếm Google. Trong phần tiếp theo, bạn có thể sử dụng các cách và thư viện khác để thực hiện việc render mã HTML trên máy chủ và tối ưu hóa việc chỉ render trên máy chủ cho các yêu cầu từ Googlebot.