Hướng dẫn SEO Angular - URL thân thiện với SEO, lập chỉ mục và hơn thế nữa cho AngularJS

Một trong những khung ứng dụng web dựa trên JavaScript phổ biến nhất, AngularJS cung cấp chức năng động cho tiện ích mở rộng HTML để có thể tạo 'ứng dụng trang đơn' nhằm nâng cao trải nghiệm người dùng. AngularJS được giới thiệu lần đầu tiên vào năm 2012 và đã trở nên phổ biến trong những năm qua do khả năng tạo các trang web động mà người dùng có thể tương tác trong thời gian thực.

 

AngularJS đặc biệt hữu ích trong các trường hợp có nhiều hình ảnh, dữ liệu hoặc các yếu tố khác. Tăng tốc độ mà người dùng tương tác với các sản phẩm của trang web dẫn đến tỷ lệ chuyển đổi cao hơn và tăng lưu lượng truy cập và doanh thu. Tuy nhiên, các công cụ tìm kiếm thấy khó hiển thị nội dung hoặc liên kết được phân phát bằng AngularJS. Nó thậm chí có thể ẩn nội dung trang của bạn hoàn toàn khỏi các công cụ tìm kiếm và làm giảm đáng kể lưu lượng truy cập của bạn.

Hôm nay, trong bài đăng này, chúng tôi xem xét các thách thức SEO của AngularJS và các giải pháp khả thi để hưởng lợi từ khung này mà không có bất kỳ giới hạn nào.

Hướng dẫn SEO AngularJS

Javascript cho phép bạn làm được nhiều việc và sự ra đời của AngularJS framework đã làm cho nó trở nên mạnh mẽ và phổ biến hơn. Nhưng Javascript luôn là một trong những kẻ thù lớn nhất của SEO. Googlebot nhận thấy việc hiển thị nội dung được phân phát thông qua Javascript là một thách thức. Vấn đề chính là khả năng hiển thị điều hướng nội bộ và nội dung có thể lập chỉ mục thành mã HTML để các chương trình tìm kiếm thu thập thông tin và lập chỉ mục. Google đã thực hiện một số nỗ lực để cải thiện khả năng thu thập dữ liệu và lập chỉ mục Javascript nhưng nó vẫn gặp phải những thách thức với việc lập chỉ mục AngularJS.

Khi AngularJS được sử dụng để hiển thị các trang web và công cụ tìm kiếm không lập chỉ mục các trang một cách chính xác, trang web bị mất lưu lượng truy cập tìm kiếm không phải trả tiền và do đó, mất doanh thu.

Tuy nhiên, các công cụ tìm kiếm nên xem các phần tử của trang trong mã nguồn HTML để có thể lập chỉ mục đúng cách. Một giải pháp để khắc phục vấn đề này là sử dụng nền tảng kết xuất trước thu thập thông tin trang web và thực thi tất cả các tệp javascript. Nó lưu trữ phiên bản đã lưu trong bộ nhớ cache của trang AngularJS của bạn trên mạng phân phối nội dung của họ và theo yêu cầu từ công cụ tìm kiếm, nó sẽ hiển thị phiên bản đã lưu trong bộ nhớ cache và khách truy cập có thể xem trang AngularJS.

Khắc phục các vấn đề về SEO AngularJS

Chìa khóa của AngularJS SEO là kết xuất trước. Bạn không bao giờ nên để việc lập chỉ mục trang web của mình cho các công cụ tìm kiếm. Luôn lưu ý về cách các trang web được hiển thị cho các công cụ tìm kiếm. Dưới đây là một số công cụ hữu ích để thực hiện việc này dễ dàng hơn.

• Chỉ mục công cụ tìm kiếm - Thực hiện truy vấn “site: [domain]” với công cụ tìm kiếm để kiểm tra phiên bản được lưu trong bộ nhớ cache mới nhất của bất kỳ trang web nào. Tìm nút thả xuống ở cuối URL trong kết quả tìm kiếm và nhấp vào Bộ nhớ cache để xem bot nhận được gì với lần thu thập thông tin gần đây trên trang web của bạn.
• Tìm nạp như Google - Công cụ này của Google cho phép bạn kiểm tra cách Google hiển thị URL trên trang web của bạn. Bạn có thể sử dụng công cụ này để tìm hiểu liệu bot có thể truy cập một trang cụ thể trên trang web của bạn hay không, cách nó hiển thị trang và liệu có bất kỳ tài nguyên trang nào bị chặn đối với nó hay không. Tìm nạp như Google được thiết kế để kích thích thu thập thông tin và hiển thị như được thực hiện trong các quy trình thông thường của Google. Bạn có thể dễ dàng gỡ lỗi bất kỳ sự cố thu thập thông tin nào trên trang web của mình với sự trợ giúp của công cụ này.
• Browseo - Công cụ này cho phép bạn xem một trang web mà không có bất kỳ phiền nhiễu nào phát sinh do kiểu dáng. Đây là một ứng dụng rất hữu ích, không chỉ hiển thị tất cả các thành phần của trang mà còn liệt kê tổng số từ, nội dung quan trọng như từ khóa, tiêu đề và mô tả meta, liên kết nội bộ và bên ngoài, bản xem trước SERP và các thẻ Facebook và Twitter. Nó làm nổi bật tất cả các dữ liệu quan trọng cho SEO và hỗ trợ SEO tốt hơn.

Các URL thân thiện với SEO của AngularJS

Mặc dù điều quan trọng là phải kết xuất trước nội dung của bạn, nhưng đảm bảo URL thân thiện với SEO cho các trang AngularJS của bạn cũng là một thành phần quan trọng. Về cơ bản, điều này có nghĩa là tránh nội dung băm trong URL - một trong những tùy chọn hiệu quả nhất để hiển thị URL trong AngularJS. Để có thể thiết lập URL thân thiện với SEO, bạn nên đặt định tuyến ở chế độ HTML5 bằng cách cấu hình $ locationProvider và thiết lập $ routeProvider.

Trong AngularJS, dịch vụ $ location chuyển URL trên thanh địa chỉ để thực hiện các thay đổi đối với ứng dụng và ngược lại. Sử dụng mô-đun $ locationProvider và đặt chế độ HTML5 thành true trong khi xác định ứng dụng AngularJS và định cấu hình các tuyến sẽ thiết lập các URL thân thiện với SEO.

Bạn cũng nên đảm bảo rằng bạn tạo các sơ đồ trang web XML bao gồm các URL chuẩn của bạn và chúng được gửi trong bảng điều khiển tìm kiếm. Điều này đảm bảo rằng các công cụ tìm kiếm có thể tìm và thu thập thông tin tất cả các URL quan trọng cho trang web của bạn.
Lập chỉ mục SEO

Nói chung, người làm SEO kiểm tra mã nguồn của trang để xác định xem nội dung trên trang có thể lập chỉ mục được hay không. Nếu nó nằm trong mã nguồn thì nó phải tốt. Các trang web dựa trên AngularJS thường không có nhiều nội dung trong mã nguồn. Vì các công cụ tìm kiếm không hoạt động tốt trong việc lập chỉ mục nội dung AngularJS, bạn không thể dựa vào mã nguồn để đánh giá hiệu suất lập chỉ mục AngularJS của một trang web. Bạn cần một giải pháp để đảm bảo rằng hiệu suất SEO của trang web không giảm chỉ vì bạn hiển thị nội dung bằng AngularJS.

Giải pháp là kết xuất trước, có nghĩa là tạo một ảnh chụp nhanh HTML phục vụ trong mã nguồn thay vì dựa vào các công cụ tìm kiếm để kết xuất các trang AngularJS. Điều này giải quyết vấn đề công cụ tìm kiếm không thể lập chỉ mục nội dung ẩn trong một cú nhấp chuột và sẽ tạo điều kiện thuận lợi cho việc lập chỉ mục nội dung AngularJS trên trang web của bạn. Khi sử dụng kết xuất trước, bạn có thể xem trực tiếp nội dung trong mã nguồn và không cần sử dụng chức năng 'Kiểm tra phần tử' của Chrome.

 

Để tạo phiên bản kết xuất trước của các trang AngularJS, bạn nên đảm bảo rằng bạn sử dụng Angular2 chứ không phải phiên bản AngularJS ban đầu. Điều này là do Angular2 hỗ trợ kết xuất phía máy chủ và cho phép bạn dễ dàng tạo ảnh chụp nhanh HTML để thực hiện kết xuất trước cho SEO.

Với việc Google hoàn toàn cam kết hỗ trợ AngularJS, nó chắc chắn sẽ chứng tỏ là một nền tảng rất hữu ích để tạo ra các trang web tương tác, thân thiện với người dùng hơn. Sử dụng các chiến lược được thảo luận ở đây để đảm bảo bạn không hy sinh lưu lượng truy cập tìm kiếm không phải trả tiền của mình trong khi dịch vụ vẫn phát triển.