SEO góc cạnh: Cách tạo các trang thân thiện với tìm kiếm

[ad_1]

            

  1. SEO cho các ứng dụng web thông thường
  2. SEO ứng dụng một trang (SPA)
  3. Phát triển các trang thân thiện với tìm kiếm trong Angular
  4. Thực hiện việc chuẩn bị trước cho ứng dụng Angular
  5. Xác thực Angular SPA thân thiện với SEO của bạn

Giới thiệu về Khung góc

Angular Framework, khung dựa trên javascript cấu trúc cho các ứng dụng web, được sử dụng để tạo các trang web động với nội dung được hiển thị thông qua các dịch vụ web. Khung góc cạnh rất thân thiện với nhà phát triển và đã tồn tại được vài năm.

Các ứng dụng được xây dựng bằng Angular Framework được gọi là Ứng dụng một trang được cung cấp theo cách chúng hoạt động. Một ứng dụng Angular, sau khi được tải, sẽ hiển thị lại các trang khác một cách linh hoạt mà không cần tải lại các trang web một lần nữa. Trải nghiệm này được cung cấp với sức mạnh của khung javascript Angular. Nó tự động sửa đổi các trang bằng cách chạy mã javascript hoặc chỉ tải nội dung được yêu cầu. Điều này mang lại cho người dùng trải nghiệm mượt mà mà không cần chờ tải lại. Tuy nhiên, có những tác động bất lợi đối với việc tối ưu hóa các trang Angular cho các công cụ tìm kiếm.

Trong bài viết này, chúng tôi nói rõ cách các ứng dụng Angular cần xử lý tối ưu hóa công cụ tìm kiếm đặc biệt và cung cấp hướng dẫn triển khai.

Hoạt động của các thuật toán tối ưu hóa công cụ tìm kiếm

Trước khi chúng tôi giải quyết giải pháp, hãy cho chúng tôi hiểu cách các bot công cụ tìm kiếm thực sự hoạt động. Các công cụ tìm kiếm trên toàn thế giới bò qua các trang web của bạn để hiểu các trang và mục tiêu cuối cùng của doanh nghiệp của bạn. Đối với điều này, các trình thu thập thông tin đọc qua siêu dữ liệu của các trang như tiêu đề, mô tả, thẻ hình ảnh và danh mục. Siêu dữ liệu này cần phải khác nhau cho mỗi trang để cho phép các công cụ tìm kiếm hiểu rõ hơn về doanh nghiệp của bạn.

Một bot công cụ tìm kiếm đến một trang cụ thể, tìm các siêu liên kết trên trang, đọc siêu dữ liệu trên trang và bắt đầu duyệt qua các siêu liên kết. Nó cứ lặp đi lặp lại quá trình này trên trang web của bạn cho đến khi không thể có được bất kỳ liên kết mới nào. Trong quá trình này, bot tải xuống nội dung tĩnh của trang web của bạn và hiểu về trang. Do đó, điều tối quan trọng là tối đa hóa các chi tiết về từng trang trong siêu dữ liệu và nội dung tĩnh.

1. SEO cho các ứng dụng web thông thường

Tối ưu hóa công cụ tìm kiếm (SEO) đã trở thành một trong những khoản đầu tư quan trọng nhất cho bất kỳ doanh nghiệp trực tuyến nào hiện nay. Trước đây, các ứng dụng web đang được phát triển khá đơn giản và chứa hầu hết các trang tĩnh. Các trang này chứa tất cả các thông tin cần thiết được mã hóa trước vào chúng. Khi sự phát triển ứng dụng web phát triển, chúng tôi đã bước vào kỷ nguyên kết xuất nội dung động nơi nội dung cho các trang web được lưu trữ ở đâu đó và được tìm nạp khi cần.

Có hai cách để thực hiện việc này:

  1. Kết xuất phía máy chủ
  2. Kết xuất phía máy khách

Do thiếu khung kết xuất phía máy khách tinh vi trong quá khứ, kết xuất trang phía máy chủ là xu hướng. Có rất nhiều ngôn ngữ và khung để xử lý giống nhau. Chẳng hạn, PHP, Java Spring, NodeJS với Tay cầm và các khung công tác khác hiển thị các trang trước và chỉ gửi nội dung HTML đơn giản đến giao diện.

Cách tiếp cận này đảm bảo rằng trang có các thẻ meta phù hợp và tất cả nội dung được hiển thị trước khi được trình thu thập công cụ tìm kiếm nhận được. Do đó, các ứng dụng web thông thường thực tế rất đơn giản khi nói đến SEO. Tuy nhiên, nó chắc chắn có một nhược điểm của thời gian tải. Với các máy chủ cấp thấp, việc xử lý hàng ngàn yêu cầu cho các trang cũng trở nên khó khăn đối với các máy chủ. Điều này đưa vào khuôn khổ frontend như Angular.

2. SEO ứng dụng một trang (SPA)

Ứng dụng một trang là một khái niệm trong đó bố cục cơ sở ứng dụng chỉ được tải một lần và phần còn lại của các trang và thành phần chỉ được tải khi cần. Điều này được thực hiện với sức mạnh của Javascript quyết định linh hoạt nội dung nào được yêu cầu, tìm nạp dữ liệu và hiển thị nó ở định dạng mong muốn.

Đăng ký để nhận bài viết về Angular SEO.

a. Lợi ích của ứng dụng một trang

Do tính chất năng động của nó, Ứng dụng một trang có rất nhiều lợi ích vốn có liên quan đến nó. Một số trong số này được liệt kê dưới đây:

  • Thời gian chuyển tiếp nhanh hơn một khi ứng dụng đã tải
  • Trải nghiệm mượt mà hơn so với một ứng dụng web thông thường
  • Tải ít hơn trên máy chủ web xử lý các trang
  • Thời gian phát triển nhanh hơn do các khung tinh vi như Angular

Mặc dù có những lợi ích này, một thách thức đáng kể với Ứng dụng Trang đơn là SEO.

b. Thử thách SEO với một ứng dụng trang đơn

Như đã hiểu, Angular không tải lại các trang trừ khi được yêu cầu rõ ràng. Angular không hỗ trợ thay đổi siêu dữ liệu cho các trang một cách linh hoạt nhưng nó hoàn toàn phụ thuộc vào JavaScript. Như đã thảo luận trước đây, trình thu thập thông tin của công cụ tìm kiếm thường không giải trí Javascript. Điều này khiến các ứng dụng Angular thất bại trong việc hiển thị đúng nội dung hoặc siêu dữ liệu.

Tuy nhiên, qua nhiều năm, Angular SEO đã phát triển và cộng đồng đã mang đến một giải pháp để khắc phục điều này. Giải pháp cho phép chúng tôi tạo các trang tĩnh trong số các trang Angular. Các trang tĩnh này chứa siêu dữ liệu phù hợp và nội dung được kết xuất sẵn. Sau đó trong bài viết này, chúng ta sẽ đi sâu vào quá trình này để hiểu những thách thức liên quan và thực hiện các quy trình để tối ưu hóa SEO.

3. Phát triển các trang thân thiện với tìm kiếm trong Angular

Trước khi chúng tôi bắt đầu xây dựng một giải pháp thân thiện với SEO Angular, chúng ta hãy bắt đầu bằng cách tạo một ứng dụng Angular JS trống.

  ng seo-Friendly-app mới  

Lệnh tạo một ứng dụng Angular JS mới, nơi chúng tôi sẽ tạo một trang chủ và trang blog đơn giản, hiển thị một số nội dung trên trang blog bằng API ButterCMS và làm cho chúng thân thiện với SEO.

Hãy bắt đầu bằng cách tạo các trang và tuyến đường giống nhau. Thực hiện các lệnh dưới đây trong thiết bị đầu cuối để tạo trang chủ và trang blog của bạn.

  ng g c trang / home --skipTests = true
ng g c trang / blog --skipTests = true  


Điều này sẽ tạo ra các thành phần và nhập chúng vào tệp
app.module.ts . Bây giờ, thêm các trang vào mô-đun định tuyến để cho phép chúng tôi định tuyến đến các trang này. Sửa đổi tệp app-định tuyến.module.ts .

  nhập {NgModule} từ '@ angular / core';
nhập {Routes, RouterModule} từ '@ angular / router';
nhập {HomeComponent} từ './pages/home/home.component';
nhập {BlogComponent} từ './pages/blog/blog.component';
const tuyến: Tuyến đường = [
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path:'blog',
    component: BlogComponent
  },
  {
    path:'**',
    component: HomeComponent
  }
];

@NgModule ({
nhập khẩu: [RouterModule.forRoot(routes)],
xuất khẩu: [RouterModule]
})
lớp xuất khẩu AppRoutingModule {}  


Đoạn mã trên ánh xạ các thành phần tương ứng với các tuyến đường và bộ HomeComponent làm thành phần mặc định. Bây giờ, hãy sửa đổi tệp
app.component.html để chỉ chứa một dòng mã.

     


Cuối cùng, hãy chạy ứng dụng bằng lệnh bên dưới và kiểm tra để đảm bảo rằng ứng dụng của bạn được thiết lập chính xác. Khi lệnh được thực hiện, bạn có thể nhấn URL
localhost: 4200 để đảm bảo mọi thứ được thiết lập tốt. Bạn sẽ thấy văn bản nhà làm việc tại nhà! Hồi.

  ng phục vụ  

Bây giờ chúng ta hãy thêm một tiêu đề cho phép chúng ta điều hướng qua các trang. Tạo một thành phần tiêu đề bằng cách sử dụng lệnh dưới đây.

  ng g c tiêu đề --skipTests = true  

Tiếp theo, sửa đổi nội dung của header.component.html để chứa các thành phần điều hướng.

     

Cuối cùng, bạn có một ứng dụng hoàn chỉnh, nơi bạn có hai trang và một điều hướng đơn giản cho phép bạn di chuyển giữa các trang. Bây giờ, hãy để chúng tôi phân tích ứng dụng này từ góc độ SEO. Nhấp chuột phải vào trình duyệt và chọn nguồn Xem trên trang Xem. Bạn sẽ có thể thấy các trình thu thập thông tin của công cụ tìm kiếm sẽ thấy trang của bạn mà không cần Javascript. Mã này trông giống như đoạn trích dưới đây.

  



 SeoFriendlyApp 





 
     
  

Bây giờ, thực hiện cùng một hành động và chú ý nội dung trang. Nó là tương tự. Điều này bao gồm tiêu đề trang cũng như cơ thể. Điều này là do Angular sửa đổi DOM của bạn bằng cách sử dụng javascript.

a. Tạo các trang động

Bằng cách này, chúng tôi đã quản lý để thực hiện điều này trên các trang tĩnh. Bây giờ chúng ta hãy kết xuất blog và trang nội dung blog của mình bằng API ButterCMS . Điều này sẽ cho phép chúng tôi thực hiện SEO trên nội dung web tĩnh cũng như động. Trước khi bắt đầu, hãy đăng ký tài khoản dùng thử miễn phí với ButterCMS để có thể tạo nội dung động một cách dễ dàng.

Để thực hiện việc này, hãy cài đặt B utterCMS plugin bằng NPM.

  cài đặt npm - lưu bơ  


Sau khi cài đặt, hãy tạo tệp dịch vụ trên đường dẫn
services / butterCMS.service.ts và đưa vào nội dung bên dưới tệp.

  nhập * dưới dạng Bơ từ 'buttercms';
export const butterService = Bơ ('your_api_token');  


Thay thế mã thông báo của bạn trong mã trên. Tệp dịch vụ này đảm bảo rằng mã thông báo được quản lý toàn cầu trong một tệp duy nhất. Chúng tôi có thể nhập tệp này bất cứ nơi nào chúng tôi cần để sử dụng các dịch vụ ButterCMS. Bây giờ, chúng ta hãy nhanh chóng thực hiện mã dưới đây trong tệp
blog.component.ts để có danh sách bài viết.

  nhập {Thành phần, OnInit} từ '@ angular / core';
nhập {butterService} từ '../../service/butter-cms.service';
@Component ({
bộ chọn: 'blog ứng dụng',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.css']
})
lớp xuất khẩu BlogComponent thực hiện OnInit {
bài viết: bất kỳ [];
constructor() {
this .fetchPosts ();
}
fetchPosts riêng () {
butterService.post.list ({
trang: 1,
trang_size: 10
})
.then ((độ phân giải) => {
console.log ('Nội dung từ ButterCMS');
console.log (res);
this .posts = res.data.data;
});
}
ngOnInit () {
}
}  

Bây giờ, hãy vào trình duyệt và kiểm tra đầu ra của bàn điều khiển trong bàn điều khiển. Bạn sẽ có thể xem danh sách các bài đăng của bạn trong bảng điều khiển trình duyệt. Như bạn có thể thấy trong đoạn mã dưới đây, điều này thể hiện hai trong số các bài đăng mà tôi đã tạo cho hướng dẫn này.

Bây giờ, chúng ta hãy kết xuất nội dung này trên trang blog. Để làm như vậy, hãy cập nhật tệp blog.component.html với mã dưới đây:

  

{{post.title}}

Điều này sẽ hiển thị các bài đăng từ nền tảng ButterCMS của bạn lên trang web. Bây giờ chúng ta hãy hiểu cách đặt tiêu đề và thẻ meta tùy chỉnh cho mỗi trang.

b. Đặt thẻ tiêu đề và thẻ meta cho SEO góc

Angular hiểu vấn đề này và đã có giải pháp cho vấn đề này. Để thêm siêu dữ liệu và sửa đổi tiêu đề trang một cách linh hoạt, tất cả những gì bạn cần làm là sử dụng các mô-đun này từ Angular. Cập nhật mã cho tệp home.component.ts với bên dưới. Thực hiện các thay đổi tương tự trên blog.component.ts của bạn.

  nhập {Thành phần, OnInit} từ '@ angular / core';
nhập {Meta, Title} từ '@ angular / platform-browser';
@Component ({
bộ chọn: 'ứng dụng-nhà',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
lớp xuất khẩu HomeComponent thực hiện OnInit {

constructor (meta riêng: Meta, tiêu đề riêng: Tiêu đề) {
this .meta.addTags ([
      {name: 'description', content: 'Home page of SEO friendly app'},
      {name: 'author', content: 'buttercms'},
      {name: 'keywords', content: 'Angular, ButterCMS'}
    ]);
this .setTitle ('Trang chủ');
}
công khai setTitle (newTitle: chuỗi) {
this.title.setTitle (newTitle);
}
ngOnInit () {
}
}  

Khi những thay đổi này được lưu, hãy quan sát tiêu đề trên tab trình duyệt. Nó thay đổi linh hoạt khi bạn điều hướng qua các trang. Ngoài ra, nếu bạn kiểm tra mã trong bảng điều khiển trình duyệt, bạn sẽ thấy siêu dữ liệu tương ứng cũng đã được đính kèm. Tuy nhiên, nếu bạn kiểm tra nguồn trang thì nội dung vẫn như cũ. Điều này có nghĩa là nếu Javascript được cho phép, chúng tôi có thể tạo một tiêu đề và meta động, nhưng không phải không có nó.

Vì vậy, chúng tôi cần một cách để lấy nội dung của trang hiển thị này và gửi cho người dùng. Quá trình này được gọi là kết xuất trước của nội dung. Có một số phương pháp để thực hiện kết xuất trước. Trong phần tiếp theo, chúng ta sẽ khám phá một trong số họ.

c. Hiểu nhu cầu kết xuất trước

Kết xuất trước về cơ bản có nghĩa là nội dung HTML của trang sẽ được biên dịch trước. Điều này sẽ đảm bảo rằng tiêu đề và siêu dữ liệu của trang có mặt khi nó đến phía máy khách. Với kết xuất trước, chúng tôi có thể hiển thị nội dung HTML cuối cùng cho trình thu thập thông tin thay vì hiển thị HTML trống.

4. Triển khai kết xuất trước cho các ứng dụng Angular

Với các nâng cấp trong Angular, giờ đây nó đi kèm với một giải pháp tiêu chuẩn hóa để kết xuất trước. Quá trình này khá đơn giản. Chúng tôi sẽ tận dụng gói Angular Universal để hỗ trợ kết xuất trước các trang. Để thêm gói phổ quát Angular, hãy thực hiện lệnh bên dưới với tên dự án mà bạn đã sử dụng trong khi tạo ứng dụng Angular của mình.

  ng thêm @ nguniversal / express-engine --clientProject seo-Friendly-app  

Điều này sẽ tạo một số tệp trong dự án và định cấu hình dự án của bạn để hỗ trợ kết xuất trước bằng máy chủ NodeJS. Để chạy lệnh này, hãy thực hiện lệnh bên dưới.

  npm run build: ssr && npm run phục vụ: ssr  

Lệnh này biên dịch, xây dựng các trang tĩnh của bạn, đặt chúng vào thư mục dist và phục vụ chúng bằng cách chạy máy chủ NodeJS. Với điều này, chúng tôi đã đảm bảo rằng ứng dụng Angular của chúng tôi được xây dựng theo cách thân thiện với SEO và tất cả nội dung của nó được hiển thị động.

5. Xác thực Angular SPA thân thiện với SEO của bạn

Để xác thực việc triển khai, bạn có thể truy cập trình duyệt và xem nguồn trang cho mỗi trang. Bây giờ, bạn sẽ có thể thấy rằng trình duyệt hiển thị nội dung HTML chính xác như bạn mong đợi. Với điều này, chúng tôi đã thiết lập việc triển khai một blog đơn giản với một kết xuất thân thiện với SEO trên khung Angular. Với ButterCMS, bạn có thể thực hiện nhiều hơn như tìm nạp động các thẻ SEO, mô tả meta và thậm chí chính nội dung trang. Quan tâm để biết thêm? Hãy xem những hướng dẫn này để biết thêm.

Đăng ký để nhận bài viết và hướng dẫn về Angular SEO.

          

[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *

.
.
.
.