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

Admin 08:48 13-02-2019 116

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 tốt với các BOT công cụ tìm kiếm.

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.



Cảm ơn bạn đã đánh giá
5 Sao 1 Đánh giá


Các tin khác

Kế hoạch SEO trong 9 bước để xếp hạng cao hơn trong tìm kiếm google năm 2019

Kế hoạch SEO trong 9 bước để xếp hạng cao hơn trong tìm kiếm google năm 2019

Khi các nhà tiếp thị lên kế hoạch cho chiến lược và kế hoạch seo tiếp thị nội dung của họ cho năm 2019, SEO là ưu tiên hàng đầu - hoặc ít nhất là phải như vậy! 

Admin 03-08-2019 16:39 41

Cách tối ưu hóa cho Tìm kiếm bằng giọng nói

Cách tối ưu hóa cho Tìm kiếm bằng giọng nói

Các nghiên cứu cho thấy vào năm 2020 , 50 phần trăm tìm kiếm trên internet sẽ được hỗ trợ bởi các loa thông minh. Hiện tại, 58 phần trăm người tiêu dùng sử dụng các công cụ tìm kiếm kích hoạt bằng giọng nói để nghiên cứu các doanh nghiệp

Admin 02-08-2019 14:50 38

Cách nhận biết và thiết lập 1 PBN chất lượng

Cách nhận biết và thiết lập 1 PBN chất lượng

Cách nhận biết và thiết lập 1 PBN chất lượng là thuộc sở hữu của cùng một người và tất cả được sử dụng để quảng bá một trang web mục tiêu nhất thiết phải được giữ bí mật

Admin 02-08-2019 14:01 36

Điểm tốc độ trang di động thấp có thể sẽ giết chết lưu lượng truy cập của bạn

Điểm tốc độ trang di động thấp có thể sẽ giết chết lưu lượng truy cập của bạn

Đây là một số bước bạn có thể tự quyết định xem tốc độ trang trên thiết bị di động có ảnh hưởng xấu đến lưu lượng truy cập của bạn hay không:

Admin 28-07-2019 13:19 32

Cách viết nội dung tốt nhất để xây dựng liên kết

Cách viết nội dung tốt nhất để xây dựng liên kết

Một trong những bài viết trước đây của chúng tôi đã nói về việc các yếu tố khác nhau có thể ảnh hưởng đến sự thành công của chiến dịch xây dựng liên kết của bạn như thế nào

Admin 28-07-2019 13:15 29

Các liên kết ngoài có quan trọng đối với SEO không

Các liên kết ngoài có quan trọng đối với SEO không

Liên kết với các trang web khác có giúp ích hay làm ảnh hưởng tới SEO không? Trong video, Mueller nói rằng các liên kết giúp người dùng tìm hiểu thêm về một chủ đề và có thể kiểm tra các nguồn của bạn

Admin 28-07-2019 13:07 31

Các kỹ thuật SEO trên trang tốt nhất 2019 là gì

Các kỹ thuật SEO trên trang tốt nhất 2019 là gì

Đọc các kỹ thuật SEO trên trang tốt nhất 2019 sau đây của chúng tôi để cải thiện kết quả tìm kiếm trên google của bạn

Admin 28-07-2019 13:01 631

Bing hiện hỗ trợ chế độ gửi hàng loạt URL tới Bing

Bing hiện hỗ trợ chế độ gửi hàng loạt URL tới Bing

Giờ đây, bạn có thể sử dụng một yêu cầu API Bing duy nhất để gửi tối đa 500 URL tới Bing, thay vì thực hiện 500 yêu cầu API riêng lẻ.

Admin 01-07-2019 23:50 55

8 công cụ nghiên cứu từ khóa miễn phí cho SEO 2019

8 công cụ nghiên cứu từ khóa miễn phí cho SEO 2019

Hôm nay chúng ta sẽ khám phá 8 công cụ nghiên cứu từ khóa miễn phí tốt nhất. Mỗi người trong số họ phù hợp nhất với một nhiệm vụ nghiên cứu từ khóa cụ thể và thực hiện công việc không tệ hơn các lựa chọn thay thế được trả tiền của họ .

Admin 01-07-2019 23:46 50

Làm cách nào để Xây dựng lại trang web mà không mất lưu lượng truy cập

Xây dựng lại trang web có thể là một nhiệm vụ khó khăn vì tất cả những từ khóa có thể bị mất hoặc bị bỏ qua trong quá trình xây dựng lại. Nếu không được lên kế hoạch và thực hiện đúng cách

Admin 01-07-2019 23:23 29