Những điều bạn cần biết cho SEO khi sử dụng Angular

Nếu bạn sử dụng Angular để tăng sức mạnh cho trang web của mình, thì bạn có thêm một trở ngại để vượt qua khi nói đến SEO. May mắn thay, Angular Universal giúp bạn dễ dàng vượt qua nó.

Hãy nhớ rằng, Easy là một thuật ngữ tương đối ở đây. Có rất nhiều giải pháp kỹ thuật liên quan.

Bạn gần như chắc chắn cần phải có một nhóm phát triển tham gia.

Nhưng một khi sản phẩm hoàn thành được phân phối, trang web của bạn sẽ phục vụ các trang được tối ưu hóa mà công cụ tìm kiếm sẽ dễ dàng định vị và lập chỉ mục.

Trong hướng dẫn này, tôi sẽ giải thích Angular Universal và tại sao nó lại quan trọng đối với các nhà tiếp thị.

Vấn đề SEO

Angular là một khung tuyệt vời để cung cấp các ứng dụng web thân thiện với mô-đun. Thật không may, nó có một chút thù địch với SEO.

Điều đó vì hai lý do.

Đầu tiên, Angular phụ thuộc rất nhiều vào kịch bản để cung cấp nội dung. Do đó, một số bot tìm kiếm không có giá trị, xem các nội dung mà người dùng nhìn thấy.

Hãy xem tài liệu Angular Universal. Trang đó, không ngạc nhiên, được hiển thị với Angular.

Khi bạn cuộn xuống, bạn sẽ thấy khá nhiều nội dung. Bạn nghĩ rằng nó có thể lập chỉ mục.

Không cần thiết. Nhấp chuột phải vào trang và chọn Nguồn Xem trang nguồn Xem từ menu ngữ cảnh xuất hiện.

Chỉ có 100 dòng mã nguồn. Không ở đâu trong đó bạn sẽ thấy nội dung mà bạn đã thấy khi bạn xem trang bình thường.

Tóm lại, đó là vấn đề với Angular. Khách truy cập của con người sẽ thấy nội dung, nhưng các bot tìm kiếm sẽ thấy nguồn.

Và nguồn không có nội dung!

Có một vấn đề SEO khác: tốc độ. Các ứng dụng góc thường không tải nhanh chóng.

Một số trang web sẽ hiển thị một màn hình trống trong vài giây trước khi hiển thị trang chủ. Điều đó có thể khiến du khách được tại ngoại vì họ thiếu kiên nhẫn.

Tốc độ trang web là một yếu tố xếp hạng trên thiết bị di động, vì vậy thứ hạng của bạn sẽ bị ảnh hưởng nếu trang web của bạn không tải nhanh trên nền tảng di động.

Nhưng Google nói rằng
Google tuyên bố bot của họ có thể lập chỉ mục các trang web dựa trên tập lệnh. Có rất nhiều bằng chứng để hỗ trợ điều đó, nhưng điều đó không có nghĩa là bạn có thể tránh đi xa hơn khi tối ưu hóa một trang web Angular.

Để bắt đầu, Google không phải là công cụ tìm kiếm duy nhất trong thị trấn. Nếu bạn muốn ứng dụng Angular của mình được xếp hạng trên Bing và DuckDuckGo, bạn sẽ phải thực hiện các bước để thực hiện điều đó.

Tiếp theo, đó có thể là trường hợp Google có thể lập chỉ mục một số trang Angular, nhưng không phải của bạn. Không phải tất cả các ứng dụng Angular đều được tạo ra như nhau. Bạn có thể là ngoại lệ đối với thuật toán lập chỉ mục Google Google.

Theo kinh nghiệm của tôi, các trang web chuyển từ HTML sang Angular mất lưu lượng lớn từ công cụ tìm kiếm phần lớn thời gian. Trên thực tế, tôi đã có ba khách hàng đến vào năm ngoái, nơi chúng tôi phải sửa chữa trang web trở lại sau khi giảm do Angular.

Có giải pháp
May mắn thay, có nhiều cách để làm cho trang web Angular của bạn thân thiện với SEO.

Một trong những tùy chọn phổ biến là sử dụng kết xuất động. Điều đó khi bạn sử dụng một công cụ như Puppeteer để tạo các tệp HTML tĩnh mà trình thu thập dữ liệu web có thể dễ dàng tiêu thụ hơn.

Sau đó, định cấu hình máy chủ web của bạn để hướng các bot tìm kiếm đến các trang được kết xuất trước trong khi khách truy cập của con người điều hướng xung quanh ứng dụng Angular bình thường.

Đó là một giải pháp tốt, nhưng nó vẫn không giải quyết được vấn đề tốc độ. Đối với điều đó, bạn có thể muốn đi với Angular Universal.

Thế giới góc là gì?
Angular Universal chạy ứng dụng web của bạn trên máy chủ thay vì chạy nó trong trình duyệt.

Đó là một sự khác biệt quan trọng. Thông thường, các ứng dụng Angular là các ứng dụng phía khách hàng.

Vấn đề đối với các bot tìm kiếm là chúng không phải luôn luôn xử lý mã phía máy khách giống như trình duyệt của bạn khi nó phục vụ bạn một trang web. Đó là lý do tại sao bạn thấy sự khác biệt giữa trang tài liệu Angular Universal và mã nguồn của nó.

Angular Universal xử lý kết xuất phía máy chủ (SSR). Nó hiển thị trước nội dung HTML và CSS được hiển thị cho người dùng trước thời hạn.

Điều đó có nghĩa là người dùng sẽ tải một trang HTML tĩnh thay vì mã phía máy khách. Do đó, trang sẽ tải nhanh hơn.

Ngoài ra, vì nó HTML tĩnh, các bot tìm kiếm có thể lập chỉ mục nội dung.

Mọi người đều thắng.

Tại sao nó lại quan trọng

Nếu bạn tham gia tiếp thị kỹ thuật số, thì bạn đã biết rằng phần lớn cuộc chiến liên quan đến việc tiếp xúc trực tuyến. Đó là lý do tại sao bạn tiếp cận với những người có ảnh hưởng, đăng cập nhật trên phương tiện truyền thông xã hội và tối ưu hóa trang web của bạn để xếp hạng tốt.

Nói một cách đơn giản: trang web của bạn có thể xếp hạng nếu trang này có thể được xếp hạng. Nếu Angular cung cấp năng lượng cho trang web của bạn, bạn cần thực hiện thêm các bước để đảm bảo rằng nội dung của nó xuất hiện trong các công cụ tìm kiếm.

Đó là lý do tại sao bạn cần một giải pháp Angular Universal.

Nhược điểm, tất nhiên, là nó sẽ tốn tiền. Bạn cần phải thuê một nhóm phát triển đủ điều kiện để thêm SSR vào trang web của mình.

Đó là một chi phí đáng lẽ phải trả nhiều hơn theo thời gian nếu trang web của bạn xếp hạng tốt cho các cụm từ tìm kiếm chính liên quan đến thị trường ngách của bạn.

Cách chạy Ứng dụng Angular trên Angular Universal
Nếu bạn là ai đó thích làm bẩn tay bằng mã hoặc bạn chỉ muốn tiết kiệm chi phí phát triển, bạn có thể tự mình triển khai một ứng dụng phía máy chủ.

Trước khi bạn làm điều đó, nó tốt nhất nếu bạn có hiểu biết cơ bản về Angular, giao diện dòng lệnh (CLI), TypeScript và máy chủ web. Nếu không, bạn sẽ có khả năng đấu tranh.

Các bước để triển khai ứng dụng Angular Universal như sau:

• Cài đặt các phụ thuộc cần thiết
• Cập nhật ứng dụng Angular
• Sử dụng CLI để xây dựng gói Universal
• Thiết lập máy chủ để chạy gói Universal
• Chạy ứng dụng trên máy chủ

Có một chút khá nhiều trong năm bước đó, vì vậy tôi sẽ lần lượt trình bày từng bước trong các phần sau.

Cài đặt các phụ thuộc
Nếu bạn có bất kỳ kinh nghiệm nào với Angular, thì bạn đã biết về Node.js. Đó là thời gian chạy mà dịch mã CodeScript thành một ứng dụng JavaScript.

Node.js đi kèm với trình quản lý gói, tên ngắn gọn là Node Gói Manager hoặc npm. Bạn sẽ sử dụng nó để cài đặt các phụ thuộc.

Bật cửa sổ dòng lệnh của bạn và chạy đoạn mã sau:

cài đặt npmsave @ angular / platform-server @ nguniversal / module-map-ngfactory-loader ts-loader

Cung cấp cho nó một vài khoảnh khắc (hoặc nhiều khoảnh khắc) để cài đặt mọi thứ.

Cập nhật ứng dụng Angular của bạn
Tiếp theo, bạn sẽ cần chuẩn bị ứng dụng Angular để triển khai Universal. Điều đó bao gồm bốn bước:

Thêm hỗ trợ phổ quát. Mở mô-đun gốc của bạn (thường là AppModule) và thêm ID ứng dụng vào quá trình nhập BrowserModule. Bạn có thể làm điều đó trong phần nhập khẩu trên mạng ngay dưới phần khai báo @NgModule.
Tạo mô đun gốc của máy chủ. Tiếp theo, bạn cần tạo một mô-đun mới có tên AppServerModule. Đảm bảo rằng nó nhập ServerModule từ phụ thuộc máy chủ nền tảng mà bạn đã thêm trong bước trước.
Tạo tập tin chính. Bạn sẽ cần một tập tin chính cho gói Universal của bạn. Tạo nó trong thư mục gốc (trong thư mục src) và xuất lớp AppServerModule từ tệp đó.
Tạo một tập tin cấu hình. Lớp AppServerModule cần một tệp cấu hình. Tạo một định dạng JSON. Nó sẽ trông giống như thế này:

Tạo mục tiêu xây dựng mới

Thư mục nguồn Angular của bạn nên bao gồm một tệp có tên angular.json. Bạn cần phải cập nhật tập tin đó trong phần Kiến trúc sư của Cameron.

Nó sẽ trông giống như thế này:

“architect”: {
 “build”: { … }
 “server”: {
   “builder”: “@angular-devkit/build-angular:server”,
   “options”: {
     “outputPath”: “dist/my-project-server”,
     “main”: “src/main.server.ts”,
     “tsConfig”: “src/tsconfig.server.json”
   }
 }
}

Lưu ý thuộc tính của người xây dựng thành công trên đường xuống. Giá trị sau dấu hai chấm (máy chủ trực tuyến) là tên của máy chủ. Bạn có thể cập nhật rằng nếu bạn muốn đặt tên cho nó một cái gì đó khác.

Bây giờ, bạn có thể xây dựng ứng dụng của bạn. Giả sử bạn giữ máy chủ có tên là máy chủ, thì bạn chỉ cần đi tới dòng lệnh của bạn và gõ như sau:

ng run my-project:server

Bạn sẽ thấy đầu ra trông giống như thế này:

Date: 2018-12-12T12:42:09.601Z
Hash: 1caced0e9434007fd7ac
Time: 4122ms
chunk {0} main.js (main) 9.49 kB [entry] [rendered]
chunk {1} styles.css (styles) 0 bytes [entry] [rendered]

Thiết lập máy chủ
Tiếp theo, bạn cần thiết lập một máy chủ Universal để chạy gói. Đó là cách mà bạn sẽ tuần tự hóa ứng dụng và đưa nó trở lại trình duyệt.

Để thực hiện điều đó, hãy tạo một tệp mới gọi là server.ts. Trong tập tin đó, bạn sẽ xác định công cụ ứng dụng của mình.

Các chi tiết của mã đó là một chút ngoài phạm vi của hướng dẫn này. Hãy xem ví dụ trong các tài liệu Angular Universal.

Chạy ứng dụng trên máy chủ
Sau tất cả những điều đó, cuối cùng bạn cũng có thể chạy ứng dụng trên máy chủ.

Để làm điều đó, hãy thiết lập một gói web xử lý tệp server.ts bạn đã tạo ở bước trước.

Đặt tên cho tệp cấu hình webpack.server.config.js. Một lần nữa, hãy kiểm tra các tài liệu Angular Universal để biết loại mã chính xác thuộc về tệp. Bạn có thể cần phải điều chỉnh mã đó theo quy ước đặt tên của riêng bạn.

Khi bạn đã hoàn thành với tệp, bạn sẽ có hai thư mục trong thư mục dist: trình duyệt và máy chủ.

Để chạy mã máy chủ, chỉ cần gõ như sau vào dòng lệnh:

node dist/server.js

Xin chúc mừng! Bạn hiện đang chạy mã phía máy chủ.

Gói nó lên
Mặc dù Angular cho phép các nhà phát triển nhanh chóng tạo ra các ứng dụng chất lượng cao, nhưng nó không chơi luôn tốt với các bot công cụ tìm kiếm.

May mắn thay, Angular Universal có thể kết xuất trước các trang ứng dụng Angular dưới dạng HTML tĩnh để chúng có thể khám phá và lập chỉ mục. Họ cũng sẽ tải nhanh hơn.

Tôi luôn có một cơ sở HTML và sử dụng Angular để phân phối các yếu tố khác trên trang. Tôi đã đưa ra khuyến nghị này về mọi thứ liên quan đến JavaScript kể từ năm 2010. Quá trình này của Angular Universal là cùng một hiệu trưởng. Tôi có thể nói với bạn rằng có rất nhiều trang web Thiết kế lại Angular và JavaScript đã bị phá hủy. Hãy cẩn thận với bạn và luôn luôn kiểm tra nó bởi một công ty SEO trước khi ra mắt.