Angular Universal：如何構(gòu)建 Angular SEO 友好的應(yīng)用程序？

言鼎科技 2023-06-17 489

想知道在哪里可以了解 Angular SEO 并構(gòu)建 Angular SEO 友好的應(yīng)用程序？我們是來幫你的。幾天前，我們收到了一個關(guān)于如何使 Angular 應(yīng)用程序 SEO 友好的查詢，這促使我們編寫了本教程。

本教程涵蓋的主題：

什么是 Angular SEO？
為什么選擇 Angular SEO，為什么它很重要？
使您的應(yīng)用程序 SEO 友好的兩種方法：
? 設(shè)置標(biāo)題和元數(shù)據(jù)
? 使用 Angular Universal
演示應(yīng)用程序的 Github 存儲庫

什么是 Angular SEO？

SEO 是指搜索引擎優(yōu)化。它用于使您的 Web 應(yīng)用程序位于搜索引擎上用戶搜索列表的頂部。為了讓您的應(yīng)用程序成為熱門搜索之一，我們需要將某些內(nèi)容添加到我們的應(yīng)用程序中，我們將在我們的博客中進一步詳細(xì)討論這些內(nèi)容。

Angular SEO 的重要性是什么？

搜索者相信搜索引擎會提供盡可能最好的結(jié)果，并且在搜索結(jié)果中排名靠前的位置之一為您的應(yīng)用程序提供了可靠的方法。SEO 可幫助您提高 Web 應(yīng)用程序的在線知名度和在線流量。它還增加了向更多人提供網(wǎng)站服務(wù)的機會

當(dāng)你擁有最好的時候，為什么要滿足于更好的呢？
聯(lián)系 Bacancy 并從我們這里聘請 Angular 開發(fā)人員來構(gòu)建高性能應(yīng)用程序。我們向您保證我們一流的開發(fā)人員的奉獻(xiàn)精神和代碼質(zhì)量。

如何構(gòu)建 Angular SEO 友好的應(yīng)用程序？

以下是使 Angular 網(wǎng)站 SEO 友好的方法。讓我們詳細(xì)討論一下。

1.設(shè)置標(biāo)題和元數(shù)據(jù)

Angular 提供了一種元服務(wù)，用于更改 Web 應(yīng)用程序上的標(biāo)題和元數(shù)據(jù)。搜索引擎抓取這些數(shù)據(jù)以提供有效的搜索結(jié)果。有多種元服務(wù)方法-

更新標(biāo)簽()
添加標(biāo)簽()
刪除標(biāo)簽（）
獲取標(biāo)簽()
添加標(biāo)簽（）
獲取標(biāo)簽()
移除標(biāo)簽元素()

Angular 還會檢查元標(biāo)記的重復(fù)項，如果元標(biāo)記已經(jīng)存在，它將不允許您添加它。

使用元服務(wù)創(chuàng)建標(biāo)準(zhǔn) Angular 應(yīng)用程序

步驟1

使用以下命令創(chuàng)建一個新的 Angular 應(yīng)用程序

Angular Universal：如何構(gòu)建 Angular SEO 友好的應(yīng)用程序？

ng 新的角度元服務(wù)

使用以下命令運行應(yīng)用程序

服務(wù)

服務(wù)應(yīng)用后，你可以在http://localhost:4200/看到它，現(xiàn)在查看網(wǎng)頁的查看源。沒有主要內(nèi)容標(biāo)簽。

第2步

在 app.module.ts 的提供者中添加元數(shù)據(jù)。

從'@angular/core'導(dǎo)入{NgModule}；從'@angular/platform-browser'導(dǎo)入{BrowserModule，Meta}；從'./app-routing.module'導(dǎo)入{AppRoutingModule}；從 './app.component' 導(dǎo)入 { AppComponent }；@NgModule({
  聲明：[ AppComponent ],
  進口：[ BrowserModule，AppRoutingModule ]，
  提供者：[ Meta ]，引導(dǎo)程序：[AppComponent]})導(dǎo)出類 AppModule { }

要添加新標(biāo)簽，我們在 Angular 中使用addTag()方法，讓我們在app.components.ts中實現(xiàn) addTag() 。

從'@angular/core'導(dǎo)入{組件}；從“@angular/platform-browser”導(dǎo)入{元}；
 @成分（{
  選擇器：'app-root'，
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']})導(dǎo)出類 AppComponent {
  title = 'angular-universal';
 
  構(gòu)造函數(shù)（私有元服務(wù)：元）{
    這個.addTag();
  }
 
  添加標(biāo)簽(){
    this.metaService.addTags([
      { 名稱：'描述'，
        content: '文章描述'
      },
      { name: 'robots', content: 'index,follow' },
      { property: 'og:title', content: '內(nèi)容標(biāo)題' }
   ]);
  }}

步驟 3

使用以下命令創(chuàng)建構(gòu)建

npm 運行構(gòu)建

您可以看到我們在下面的標(biāo)簽中添加了描述、機器人和 og:title 。

2. 角通用

Angular Universal 是一種 SSR，可以讓您在一個應(yīng)用程序中同時進行服務(wù)器端和客戶端渲染。服務(wù)器端呈現(xiàn) (SSR) 是一種現(xiàn)代技術(shù)，可將在瀏覽器中運行的單頁應(yīng)用程序 (SPA) 轉(zhuǎn)換為基于服務(wù)器的應(yīng)用程序。請訪問我們的教程SSR with Angular Universal以了解更多信息。

使用 SSR 創(chuàng)建標(biāo)準(zhǔn) Angular 應(yīng)用程序

步驟1