Google với JavaScript
Chúng ta có thể thấy rõ rằng, trong năm vừa qua Google tập trung chủ yếu vào việc hỗ trợ hiệu suất và trải nghiệm người dùng.Rõ ràng, các website trong Google AMP tập trung vào sự nhanh chóng và hiệu quả, như Single Page Apps (Ứng Dụng một trang - SPA), hay Progressive Web Apps (Ứng dụng Web).
Google tuyên bố rằng họ đã cải tiến hơn rất nhiều trong việc dò tìm dữ liệu (crawl) cũng như lập chỉ mục (Index) JavaScript. Tuy nhiên, kết quả hiện tại vẫn chưa thực sự hoàn thiện. Có rất nhiều ví dụ để khẳng định điều này, một trong số đó là sự thất bại của JavaScript SEO trên trang Hulu.com.
Đây là lý do tại sao SEO thường có xu hướng kết hợp công cụ server-side rendering truyền thống với các mảng nhỏ của JavaScript được thêm vào trình duyệt như một giải pháp tổng quát tạo ra các ứng dụng có thể dò tìm dữ liệu và lập chỉ mục bằng các công cụ tìm kiếm.
Thật không may khi điều này lại không hoàn hảo như chúng ta nghĩ, rất khó khăn để duy trì nó và không phải tất cả các ứng dụng đều có thể thực hiện được theo cách này. Trải nghiệm người dùng cũng không hẳn là tất cả những gì tuyệt vời nhất bởi của một website phải mất nhiều thời gian để load tất cả các thư viện JavaScript cũng như các ứng dụng.
Có một cách khác có thể thay thế là sử dụng dịch vụ Render trước khi chạy ứng dụng JavaScript / website của bạn và ghi lại các HTML output có thể hỗ trợ cho các công cụ dò tìm sử dụng một mảng phụ của phần mềm chạy trên máy chủ của bạn.Theo lý thuyết, lợi ích của phương pháp này là bạn có thể coi như các vấn đề không tồn tại và xây dựng ứng dụng của mình trong JavaScript theo bất kỳ cách nào bạn muốn.
Tuy nhiên, trong thực tế, nó không hẳn là luôn luôn hoạt động và đòi hỏi quá trình rà soát lỗi rất phức tạp nếu muốn sửa chữa.Chẳng có một phần nào của ứng dụng có thể dành ra một ngăn xếp – Stack (cấu trúc dữ liệu trừu tượng giới hạn việc thêm vào hoặc loại bỏ một phần tử chỉ thực hiện tại một đầu của danh sách) để duy trì nó, và có thể có một vài vấn đề về khả năng tương thích với các ứng dụng của bạn là nguyên nhân dẫn đến HTML output trở nên không chính xác. Đây là một lỗi rất khó để nhận thấy và đến khi phát hiện được thì thứ hạng của bạn đã bị ảnh hưởng.
Bạn thấy đấy, tất cả đều rất phức tạp.
Sẽ ra sao nếu có một ứng dụng lai có thể kết nối tất cả các đặc quyền của một JavaScript nhanh chóng và bùng nổ với một HTML / CSS dễ dò tìm? May mắn thay, có một yếu tố mới đã xuất hiện, và nó được gọi là Isomorphic Application (ứng dụng đẳng cấu).
Ứng dụng Isomorphic (còn gọi là ứng dụng vạn năng) giải quyết vấn các đề về dò tìm dữ liệu (Crawl) và lập chỉ mục (Index) bằng cách thực hiện các bước xử lý ban đầu trên máy chủ và sau đó sử dụng HTML như một cơ sở để khởi tạo các ứng dụng JavaScript trong trình duyệt. Phương pháp Isomorphic đã dung hòa hai thế giới (HTML tĩnh và JavaScript), cung cấp các website hoàn toàn có thể index nhanh chóng và thân thiện.
Nó hoạt động như thế nào?
Isomorphic có ý nghĩa rằng code JavaScript được sử dụng bởi ứng dụng của bạn có thể chạy trên cả máy chủ và máy khách (trong trình duyệt).
Nhờ vào tính năng này, bạn có thể sử dụng các ứng dụng của mình với một số dữ liệu từ cơ sở dữ liệu trên máy chủ, chạy nó, và nắm bắt được các kết quả HTML output mà thông thường sẽ đòi hỏi phải có hẳn một trình duyệt để tập hợp và ráp nối lại.Dữ liệu đầu ra này có thể được sử dụng như HTML ban đầu của bạn đến tất cả những ai yêu cầu nó (bao gồm cả quá trình crawl, chẳng hạn như các Google Bot).
Sau đó, ứng dụng của bạn có thể sử dụng HTML này như là một cơ sở ban đầu và tiếp tục tự động hoạt động trong trình duyệt như thể nó được tạo ra từ các trình duyệt ngày từ đầu.
Lợi ích của ứng dụng Isomorphic
Công cụ tìm kiếm có khả năng Index
Quá trình dò tìm dữ liệu website (Web Crawler)gặp rất nhiều khó khăn trong việc thu thập dữ liệu và lập chỉ mục nội dung JavaScript. Crawler phân tích mã gốc mà không thay đổi nó. Những gì bạn nhìn thấy trong trình duyệt của mình đều đã được xử lý. Render, xử lý DOM, vv… đòi hỏi nhiều công sức tính toán và phức tạp hơn nhiều so với việc chỉ phân tích văn bản đơn giản, vì vậy nó sẽ làm cho phương thức dò tìm hiện tại trở nên tốn kém hơn cho công cụ tìm kiếm.
Ứng dụng Isomorphic giải quyết vấn đề này bằng cách thực thi mã code trên máy chủ để kết xuất các trang tĩnh và sau đó để lại tất cả các JS chịu trách nhiệm thực hiện tương tác với người dùng thông qua trình duyệt.
Kết quả là, các Crawler cho thấy đầu ra chính xác giống như những gì các trình duyệt cho thấy, và hoàn toàn giải quyết được vấn đề về index SEO. Tất cả content được cung cấp khi một công cụ tìm kiếm truy cập trang.
Thời gian load nhìn thấy được diễn ra nhanh hơn.
Download các mã code JS nặng có thể cần một lượng thời gian không nhỏ, đặc biệt là ở các khu vực có kết nối Internet chậm. Quá trình Render tất cả các mã code tải về DOM (Mô hình đối tượng tài liệu trong HTML), việc chờ đợi cho các ứng dụng / website tự khởi động và thực hiện các yêu cầu AJAX (JavaScript và XML không đồng bộ) ban đầu cũng phải mất một thời gian. Điều này thường dẫn đến một quá trình khởi chạy chậm chạp của các website hoặc ứng dụng, khiến cho người dùng không hài lòng, và giảm thu nhập của website. May mắn thay, phương thức tiếp cận Isomorphic đã giải quyết phần nào vấn đề này.
Bằng các ứng dụng render trên server-side, sẽ không có nhu cầu nào đối với hầu hết các cuộc gọi AJAX và có rất ít quá trình render diễn ra trên các client side (do đã được xử ký ban đầu trên máy chủ).Điều này làm giảm thời gian load nhìn thấy xuống khoảng 40%.
Chẳng ai cho không ai cái gì cả!
Câu nói nổi tiếng này cho thấy – không có gì tốt mà lại miễn phí.Phương thức tiếp cận Isomorphic là một phương thức rất hữu hiệu vì nó giải quyết được vấn đề lập chỉ mục trong SEO, đưa ra kết quả trong thời gian load ngắn hơn, và đơn giản hóa các ứng dụng ngăn xếp (Stack) .Ngoài ra, nó có thể mang lại lợi ích về mã code cơ sở khá lớn ( như duy trì dễ dàng hơn, phân biệt giữa máy khách và mã máy chủ, vv).Tuy nhiên, nó lại luôn đi kèm với một mức giá nhất định.
Bạn buộc phải áp dụng một vài công nghệ
Việc đầu tiên và trước hết chính là máy chủ của bạn cần được hỗ trợ chạy ứng dụng nền tảng NodeJS (đối với server-side rendering của JavaScript).
Các khung ứng dụng bạn sử dụng để xây dựng các ứng dụng của mình cũng phải hỗ trợ cho phương pháp này (những ứng dụng chủ chốt này sẽ thực hiện hoặc hỗ trợ thực hiện như Angular JS , React JS).Như bạn đã thấy, không hề có Ruby on Rails hay Djangotrên danh sách liệt kê. Các framework này không thể được sử dụng để xây dựng các ứng dụng Isomorphic JavaScript, nhưng chúng có thể được sử dụng để xây dựng các ứng dụng giao diện lập trình (API) cung cấp các ứng dụng Javascript, đó là một phương thức tuyệt vời để tách mã code xử lý dữ liệu từ giao diện người dùng được cung cấp bởi JavaScript .
Tất cả điều này không có nghĩa là phương pháp này hoàn toàn thích hợp cho các dự án hiện có, vì nó không phải là một giải pháp plug-and-play (Tính năng “Cắm vào và chạy”).Nó có thể làm việc tốt với các ứng dụng dựa trên các API hiện tại, nhưng vẫn sẽ yêu cầu phải thực hiện một lượng công việc đáng kể.
Bạn cần có chuyên môn
Đây vẫn còn là một cách tiếp cận khá mới, khác hẳn với cách thức cũ (ví dụ như các server-side rendering/kết hợp jQuery), những thứ đòi hỏi phải có công nghệ tiên tiến. Kết quả là, bạn cần phát triển mình hơn trong công việc và cảm thấy thoải mái khi làm việc với các công nghệ mới; phát triển những con người không ngần ngại với những thử nghiệm mới và không sợ vấp ngã.
Đôi khi các thư viện có sẵn lại không thể kết hợp để cùng nhau hoạt động tốt, đôi khi bạn cần phải tự mình giải quyết các vấn đề, và bạn cần có những kinh nghiệm và kỹ năng cần thiết để có được ứng dụng mang tình quyết định.
Hãy bắt đầu với cấu trúc JavaScript
Trong khi phương thức tiếp cận Isomorphic chưa được phổ biến rộng rãi, thì nó vẫn có rất nhiều tiềm năng để phát triển.Tại thời điểm này, đây có thể là phương thức hữu hiệu nhất để xây dựng một ứng dụng vĩ đại và bùng nổ, mang đến các trải nghiệm người dùng êm ái mà không làm ảnh hưởng đến SEO.
Đó có lẽ không phải là một ý tưởng tuyệt vời cho các dự án nhỏ bởi vì nó đòi hỏi rất nhiều kỹ thuật và kinh nghiệm để thực hiện một cách đúng đắn, nhưng theo thời gian, điều này sẽ dần trở nên dễ dàng hơn khi các thư viện và công cụ mới được phát triển để phục vụ cho các bộ phận phức tạp hơn.
Nói chung, đó là một cách thức rất hứa hẹn giải quyết các vấn đề về lập chỉ mục SEO mà dư luận đã rất quan tâm trong nhiều năm qua.Nếu bạn đang xây dựng một công trình mới, một ứng dụng lớn đòi hỏi khả năng tương thích tuyệt vời, bạn chắc chắn nên xem xét phương thức này.
Người làm SEO & các Developer
Trong lúc thực hiện nghiên cứu cho bài viết này, tôi nhận ra rằng mặc dù những gì chúng tôi (SEO) cho rằng, cộng đồng các Developers sẽ thực sự vui mừng về việc tạo ra các website SEO thân thiện dựa trên JavaScript.
Chúng ta cần bắt đầu khai thác tiềm năng của Isomorphic JavaScript và các công nghệ mới tuyệt vời khác. Trên đây là những chia sẻ của chúng tôi về vấn đề làm thế nào để kết hợp JavaScript với SEO bằng Isomorphic JS. Hi vọng sẽ giúp ích cho các bạn trong quá trình làm SEO. Hãy cho chúng tôi biết ý kiến của các bạn và đừng quên theo dõi các bài tiếp theo của chúng tôi nhé!
0 nhận xét:
Đăng nhận xét