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

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

12/03/2024

1424

0

Chia sẻ lên Facebook
Seo web reactjs là gì? Có seo được những website code reactjs không?

Hiện nay, quá trình SEO web ReactJS là một trong những phương pháp phát triển ứng dụng web phổ biến thông dụng nhất đã giúp hàng ngàn dự án của doanh nghiệp được hiệu suất và linh hoạt hơn bao giờ hết. Vậy ReactJS là gì và làm sao để thực hiện tối ưu SEO thông qua ứng dụng này? Hãy cùng Topchuyengia khám phá ngay trong bài viết phân tích dưới đây nhé!

 

Để thực hiện SEO web ReactJS là một công việc cực kỳ phức tạp và cần có một đội ngũ chuyên gia có chuyên môn cao thì mới có thể thực hiện một cách thành công và trọn vẹn nhất. Do đó, bạn hãy tận dụng ngay cơ hội này để trao đổi với các chuyên gia SEO tại Askany, nhờ đó mà quá trình tối ưu web của bạn sẽ không tốn quá nhiều thời gian, công sức mà vẫn đạt được hiệu quả cao.

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.

ReactJS là gì?
ReactJS cho phép nhà phát triển tạo và quản lý trong thiết kế

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.

Tại sao nên SEO web ReactJS
ReactJS giúp quản lý giao diện thông qua Virtual DOM

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. 

Cách test SEO web ReactJS
Test SEO web ReactJS

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:

Seo web reactjs là gì

 

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".

 

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

 

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.

 

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

 

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.

 

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

 

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.

 

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

 

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:

 

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

 

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.

Hướng dẫn thực hiện SEO web ReactJS

Ở phần này, mình sẽ hướng dẫn bạn cách thực hiện Server Rendering trong ứng dụng ReactJS thay vì phụ thuộc vào việc render bởi trình duyệt. Phương pháp này có thể giúp tối ưu hóa SEO web ReactJS, đặc biệt là khi tải trang chậm hoặc khi Googlebot không thể lấy thông tin và chỉ index trang trống do chờ đợi kết quả từ API.

Hướng dẫn thực hiện SEO web ReactJS
Quy trình thực hiện SEO web ReactJS

Server rendering là gì?

Server rendering (hoặc còn gọi là server-side rendering) là quá trình tạo và cung cấp mã HTML hoặc DOM từ phía máy chủ, thay vì tạo và cập nhật DOM hoặc mã HTML trên trình duyệt của người dùng bằng JavaScript. Máy chủ sẽ xử lý việc tạo mã HTML ban đầu và gửi nó đến trình duyệt để hiển thị.


Các thư viện giao diện người dùng như React sử dụng Virtual DOM để quản lý trạng thái của ứng dụng và cách hiển thị nó. Virtual DOM giúp tối ưu hóa quá trình cập nhật giao diện bằng cách chỉ cập nhật các phần thay đổi trong giao diện thay vì cả trang.


Chẳng hạn, khi có một sự kiện xảy ra, như khi người dùng nhấn vào một nút, Virtual DOM chỉ cập nhật các phần giao diện cần thay đổi, chẳng hạn như giá trị của những nhãn (label) hiển thị, thay vì cập nhật toàn bộ trang web. 


Mô hình làm việc này khác với cách trước đây mà máy chủ tạo mã HTML, sau đó gửi nó đến trình duyệt để hiển thị, sau đó trình duyệt tạo một cây DOM từ mã HTML. 


Tuy nhiên, phương pháp này có nhược điểm và không hỗ trợ việc quản lý trạng thái (state) một cách hiệu quả, trong khi các thư viện giao diện người dùng cung cấp cách làm mới & hỗ trợ tốt việc quản lý trạng thái.
Vấn đề nảy sinh khi chúng ta sử dụng các thư viện DOM dựa trên JavaScript là kết quả khi xem mã nguồn (view-source) sẽ trông như sau:

 

Server rendering là gì?

 

Dù là khi bạn view thông qua trình duyệt, thì rõ ràng nó hiện định dạng text:

 

Server rendering là gì?

 

Khi triển khai ứng dụng lên máy chủ web, chúng ta thường mong đợi rằng các công cụ tìm kiếm sẽ duyệt nội dung của trang web và lập chỉ mục nó.


Hiện nay, Google Search Engine đã hỗ trợ việc duyệt nội dung của các trang web được tạo bằng JavaScript để tạo mã HTML. Tuy nhiên, nếu quá trình tạo mã HTML mất nhiều thời gian, thì Google có thể chỉ duyệt và lập chỉ mục nội dung ban đầu được hiển thị trong mã nguồn của trang.


Next.js là một công cụ được hỗ trợ ngay trên React, cho phép tự động tạo mã trang web trên máy chủ. Không cần cài đặt hoặc thiết lập bất kỳ thư viện máy chủ nào.


Để thiết lập Next.js, bạn cần đã cài đặt Node và npm trước. 

Các bước thực hiện Server Rendering trong ReactJS

Để tạo một dự án Node mới bằng npm, bạn hãy thực hiện đầy đủ các bước được liệt kê sau đây nhé:
Bước 1: Bạn tiến hành sử dụng lệnh: npm init -y
Bước 2: Trong file package.json sẽ được tạo với lệnh như sau:

{
    "name": "next-first-step",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

Bước 3: Cài đặt tool Next.js ngay tại project mới bằng lệnh: npm install --save next
Bước 4: Cài đặt React & React DOM: npm install --save react react-dom
Bước 5: Thêm đoạn lệnh vào file package.json để có script khởi động app:

...
"scripts": {
  "dev": "next"
},
...

Bước 6: Start ứng dụng bằng lệnh này: npm run dev. Sau bước này, màn hình sẽ hiện lỗi như sau:

Các bước thực hiện Server Rendering trong ReactJS

Lý do có lỗi này là vì bạn đang không có thư mục pages nào trong project (Thư mục này có nhiệm vụ lưu trữ toàn bộ thư mục .js ứng dụng của bạn.

Bước 7: Create folder pages & tiến hành chạy lại nhé, màn hình sẽ hiển thị thành công như thế này:

Các bước thực hiện Server Rendering trong ReactJS

Bước 8: Mở trình duyệt và sao chép đường dẫn URL này: localhost:3000

Các bước thực hiện Server Rendering trong ReactJS

Vì thư mục "pages" đang không chứa bất kỳ tệp nào, nên đã gây ra lỗi 404 rất khó chịu. Để giải quyết vấn đề này, bạn có thể thêm tệp "index.js" vào thư mục và cung cấp nội dung sau:

Seo web reactjs

Bước 9: Hãy tải lại trang, giờ thì page sẽ hiện như thế này:

Các bước thực hiện Server Rendering trong ReactJS

Bước 10: Sử dụng tính năng Implicit routing trong Next.js, chỉ cần tạo một tệp JS trong thư mục "pages", nó sẽ tự động được ánh xạ thành một route. Ví dụ, nếu bạn tạo một tệp có tên "about.js", nó sẽ tự động ánh xạ vào đường dẫn "/about". Trừ khi tệp có tên là "index.js", thì sẽ ánh xạ vào "/". 

Seo web reactjs

 

Khi bạn truy cập qua URL localhost:3000/about, màn hình hiển thị như sau sẽ là thành công:

Các bước thực hiện Server Rendering trong ReactJS

Bước 11: Thao tác cuối cùng bạn cần làm là khi kiểm tra SEO bằng cách xem mã nguồn (view-source), bạn sẽ thấy toàn bộ nội dung HTML đã được render từ phía máy chủ (server), thay vì chỉ có các tệp JS như trước đây, màn hình sẽ hiển thị kiểu như sau:

Các bước thực hiện Server Rendering trong ReactJS

 

HƯỚNG DẪN THÊM: 

Cách đánh Index trong SQL giúp giảm tới 90% thời gian truy vấn

Cách phòng chống và khắc phục khi website bị DDOS nhanh và triệt để nhất

 

Tóm lại, bài viết này đã chia sẻ toàn bộ thông tin về SEO web ReactJS mà bạn nên nắm để biết cách áp dụng trong công việc SEO của chính bạn. Tuy nhiên, đây chỉ là phương pháp và tính năng đơn giản nhất mà ReactJS có thể thực hiện, ngoài ra nó còn làm được nhiều thứ khác hay ho hơn như là Parameterized routing, API calls, và, route queries,... Liên hệ ngay với các chuyên gia SEO tại Askany để được cập nhật và nhận ngay nhiều phương pháp giá trị khác từ ứng dụng này, bạn sẽ được tiếp cận nguồn kiến thức khổng lồ chỉ với giá tư vấn SEO vô cùng rẻ và hợp lý.

Bình luận

Kinh nghiệm thực tế

Tư vấn 1:1

Uy tín

Đây là 3 tiêu chí mà TOPCHUYENGIA luôn muốn hướng tới để đem lại những thông tin hữu ích cho cộng đồng