幾秒內快速建立Angular 6的SEO?看我怎麼做
目錄
- SEO和Angular的概述
- 如何使用Angular CLI創建新的項目
- 添加路由和組件
- 查看未經渲染的HTML源碼
- 使用ng-toolkit/universal使Angular項目支持SEO
- 安裝和配置ng-toolkit/universal
- 創建與SEO兼容的組件
- 編譯和運行具有SEO支持的Angular項目
- 附加功能和注意事項
- 結論和下一步行動
🌐 1. SEO和Angular的概述
現在,當我們開發具有豐富內容的網站時,對於搜索引擎優化(SEO)的重要性是不言而喻的。然而,由於Angular是一個單頁應用程序(SPA)框架,它通常無法在初始載入時被搜索引擎爬取和索引。這是因為Angular應用程序在客戶端生成內容,而大多數搜索引擎爬取器僅查看網頁源碼。
因此,我們需要一種方法來使我們的Angular應用程序列入搜索引擎的索引中,並將所有內容都出現在搜索結果中。在本文中,將介紹一種稱為ng-toolkit/universal的工具,它可以使我們的Angular項目完全支持SEO。我們將看看如何使用Angular CLI創建新的項目,添加路由和組件,編譯並運行具有SEO支持的Angular應用程序,並提供一些其他功能和注意事項。
讓我們開始吧!
✨ 2. 如何使用Angular CLI創建新的項目
在開始之前,確保您已經安裝了最新版本的Angular CLI。您可以通過以下命令在終端中檢查CLI的版本:
ng -v
如果您尚未安裝Angular CLI,請參閱Angular CLI官方網站進行安裝指南。
一旦確定您的CLI已經安裝完成,我們可以創建一個全新的Angular項目。在終端中運行以下命令:
ng new awesome-seo --routing
這將使用Angular CLI創建一個名為"awesome-seo"的新項目,並且我們還通過"--routing"選項添加了路由支持。這將為我們的應用程序創建一個基本結構,包括一個根模塊和一個根組件。
現在,我們可以將目錄切換到新創建的項目文件夾中:
cd awesome-seo
讓我們繼續添加路由和組件!
➕ 3. 添加路由和組件
為了演示ng-toolkit/universal的功能,我們將創建一個簡單的用戶頁面。首先,讓我們使用Angular CLI創建一個用戶組件:
ng generate component users
這將為我們的項目創建一個名為"users"的新組件。現在,打開您的代碼編輯器並導航到"src/app/app-routing.module.ts"文件。在該文件的頂部導入我們剛剛創建的用戶組件:
import { UsersComponent } from './users/users.component';
然後,在路由定義中添加用戶組件的路由:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users', component: UsersComponent }
];
這將使我們的應用程序在根URL('/')和"/users"路徑下顯示不同的組件。
現在,在我們的"src/app/app.component.html"文件中,修改預設生成的內容。我們將添加一個連接到用戶頁面的簡單鏈接:
<h1>Welcome to my awesome SEO-friendly Angular app!</h1>
<p>Check out our <a routerLink="/users">users</a> page</p>
<router-outlet></router-outlet>
這將在應用程序的首頁上顯示一個歡迎消息,並提供一個連結到用戶頁面的鏈接。
我們已經設置好了基本的路由和組件。現在,讓我們檢查源代碼中的未渲染的HTML內容!
👀 4. 查看未經渲染的HTML源碼
在命令行中運行以下命令以啟動Angular開發服務器:
ng serve --open
這將啟動開發服務器並自動打開您的瀏覽器,顯示Angular應用程序。
現在,在您的瀏覽器中,右鍵單擊並選擇"檢查"(或者使用快捷鍵Ctrl+Shift+I)以打開開發者工具。在開發者工具中,切換到"Elements"選項卡,並查看頁面源碼。
如果您仔細觀察,您將注意到在這個源碼中並沒有顯示我們剛剛添加的用戶組件內容。這是因為Angular應用程序在Client端生成內容,而通常的搜索引擎爬取程序只能看到頁面源碼。這將導致搜索引擎無法找到並收錄我們應用程序中的內容。
現在,我們可以開始使用ng-toolkit/universal,使我們的Angular應用程序支持SEO。
🚀 5. 使用ng-toolkit/universal使Angular項目支持SEO
ng-toolkit/universal是一個強大的庫,可以幫助我們使Angular應用程序支持SEO。它使用Angular Universal在第一次載入時在服務器端渲染HTML,然後將其返回給客戶端。這使得搜索引擎能夠看到完整的HTML源碼,從而將我們的應用程序正確地收錄到搜索結果中。
接下來,我們將安裝和配置ng-toolkit/universal,以使我們的Angular應用程序獲得SEO支持。
⚙️ 5.1 安裝和配置ng-toolkit/universal
首先,使用以下命令來安裝ng-toolkit/universal:
ng add @ng-toolkit/universal
這將自動安裝和配置ng-toolkit/universal庫以支持Angular應用程序的伺服器端渲染。
安裝完成後,我們需要執行一些其他命令以編譯並運行具有SEO支持的Angular應用程序。
🛠️ 5.2 創建與SEO兼容的組件
在我們運行應用程序之前,需要對我們的組件進行一些修改,以使其與SEO兼容。
首先,打開我們的用戶組件文件"src/app/users/users.component.ts",並按以下所示進行更改:
import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit {
constructor(private meta: Meta, private title: Title) { }
ngOnInit() {
this.title.setTitle('Users Page');
this.meta.updateTag({ name: 'description', content: 'This is the page where you can find all our users' });
}
}
在這個組件中,我們使用Angular的"Meta"和"Title"服務來設置頁面的標題和描述。這些信息將被搜索引擎用作為對我們頁面的索引和顯示的參考。
接下來,打開我們的用戶組件模板文件"src/app/users/users.component.html",並按以下所示進行更改:
<h2>My Secondary Content</h2>
<ol>
<li>User 1</li>
<li>User 2</li>
<li>User 3</li>
<!-- Add more users if needed -->
</ol>
這是一個簡單的用戶組件模板,其中包含一個帶有項目清單的副標題。
我們已經對我們的用戶組件進行了必要的更改,現在讓我們編譯和運行具有SEO支持的Angular應用程序!
🏃 5.3 編譯和運行具有SEO支持的Angular應用程序
科技