幾秒內快速建立Angular 6的SEO?看我怎麼做

Try Proseoai — it's free
AI SEO Assistant
SEO Link Building
SEO Writing

幾秒內快速建立Angular 6的SEO?看我怎麼做

目錄

  1. SEO和Angular的概述
  2. 如何使用Angular CLI創建新的項目
  3. 添加路由和組件
  4. 查看未經渲染的HTML源碼
  5. 使用ng-toolkit/universal使Angular項目支持SEO
  6. 安裝和配置ng-toolkit/universal
  7. 創建與SEO兼容的組件
  8. 編譯和運行具有SEO支持的Angular項目
  9. 附加功能和注意事項
  10. 結論和下一步行動

🌐 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應用程序

科技

Are you spending too much time on seo writing?

SEO Course
1M+
SEO Link Building
5M+
SEO Writing
800K+
WHY YOU SHOULD CHOOSE Proseoai

Proseoai has the world's largest selection of seo courses for you to learn. Each seo course has tons of seo writing for you to choose from, so you can choose Proseoai for your seo work!

Browse More Content