💥 Angular Universal SEO - 自訂頁面標題與描述

💥 Angular Universal SEO - 自訂頁面標題與描述

目錄

1. 引言
2. 修改首頁的標題和描述
3. 在特定頁面上設置自定義標題
4. 如何設置頁面標題
5. 從搜索引擎的角度，標題是如何設定的？
6. 了解動態標題更新與搜索引擎的關係
7. 運行具有服務器端渲染的Angular應用
8. 在服務器端渲染的Angular應用中設置標題
9. 服務器端渲染與搜索引擎優化
10. 結論

引言

在開發網站時，標題和描述是非常重要的元素，它們不僅可以吸引用戶，還可以影響搜索引擎的排名。在本課程中，我們將學習如何使用Angular來為每個頁面創建自定義的標題和描述。

修改首頁的標題和描述

通常情況下，網站的標題和描述是在index.html文件中設置的。然而，如果我們想要頁面有自己的標題和描述，則需要進行一些修改。

首先，我們需要打開index.html文件並找到<title>和<meta>標籤。我們可以更改這些標籤的內容，以更準確地描述頁面的內容。

<title>我的網站 - Angular通用應用</title>
<meta name="description" content="這是一個Angular通用應用的示例應用程序。">

在上面的代碼中，我們將標題設置為"我的網站 - Angular通用應用"，並將描述設置為"這是一個Angular通用應用的示例應用程序"。

保存文件後，重新加載網頁，你將看到瀏覽器標籤中的新標題和描述。

Pros

• 通過修改index.html文件，我們可以輕鬆地更改網站的標題和描述。
• 使用固定的標題和描述，可以確保網站在沒有特定標題和描述的頁面上有一個回退標題和描述。

Cons

• 修改index.html文件可能需要重新建構網站，並且需要在每個頁面上進行相同的更改。

在特定頁面上設置自定義標題

有時我們希望特定頁面有自己獨特的標題和描述，而不是使用index.html中的通用標題和描述。在Angular中，我們可以通過注入Title服務並在頁面上設置標題來實現這一點。

首先，在要設置標題的組件的構造函數中注入Title服務。

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
  constructor(private titleService: Title) {}

  ngOnInit(): void {}
}

在上面的代碼中，我們將Title服務注入了HomeComponent組件的構造函數中。

接下來，在ngOnInit方法中，我們可以使用Title服務的setTitle方法來設置頁面的標題。

ngOnInit(): void {
  this.titleService.setTitle('Angular通用應用 - 所有課程');
}

在上面的代碼中，我們將頁面的標題設置為"Angular通用應用 - 所有課程"。

保存文件後，重新加載網頁，你將看到瀏覽器標籤中的新標題。

Pros

• 通過在特定頁面上設置自定義標題，我們可以讓每個頁面都具有獨特的標題和描述。
• 當搜索引擎網爬器訪問特定頁面時，將使用該頁面的自定義標題和描述。

Cons

• 需要在每個頁面的組件中進行設置，可能會增加代碼的複雜性。

如何設置頁面標題

在使用Angular時，我們可以通過注入Title服務並使用setTitle方法來設置頁面的標題。

首先，我們需要在要設置標題的組件中引入Title服務。

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
})
export class MyComponentComponent implements OnInit {
  constructor(private titleService: Title) {}

  ngOnInit(): void {
    this.titleService.setTitle('這是我的頁面標題');
  }
}

在上面的代碼中，我們引入了Title服務並將其注入到MyComponentComponent組件的構造函數中。

然後，在ngOnInit方法中，我們使用setTitle方法設置頁面的標題。在這個例子中，我們將頁面標題設置為"這是我的頁面標題"。

保存文件後，重新加載網頁，你將看到瀏覽器標籤中的新標題。

從搜索引擎的角度，標題是如何設定的？

當搜索引擎訪問我們的網站時，它會從兩個地方獲取頁面的標題和描述。

首先，當搜索引擎訪問我們的網站時，它會讀取index.html文件中的標題和描述。這是由於在搜索引擎網爬器訪問網站時，index.html文件是第一個被下載和處理的文件。

<title>我的網站 - Angular通用應用</title>
<meta name="description" content="這是一個Angular通用應用的示例應用程序。">

其次，當Angular應用程序完全加載後，它會更新頁面的標題和描述。這是由於Angular應用程序具有動態生成HTML的能力，並且可以在運行時修改頁面的標題和描述。

從搜索引擎的角度來看，它會優先選擇從index.html文件中獲取的標題和描述。這是因為搜索引擎通常會在網站的首次索引期間下載和處理index.html文件。

然而，對於一些現代化的搜索引擎，它們也會考慮在運行時通過JavaScript生成的標題和描述。這意味著當搜索引擎訪問網站並執行JavaScript代碼時，它們也會獲取在運行時設置的標題和描述。

所以，總的來說，搜索引擎會綜合考慮兩個來源的標題和描述，並根據各自的算法達成最終的結論。

了解動態標題更新與搜索引擎的關係

動態標題的更新對於搜索引擎排名至關重要。一些搜索引擎可以識別並考慮在運行時更新的標題和描述，這樣可以使你的網站在搜索結果中更加吸引人。

使用Angular時，我們可以通過注入Title服務並在適當的地方動態更新頁面的標題。這使我們可以在頁面載入後更改標題，並提供更具吸引力和有價值的內容。

適當地更新動態標題和描述可以使我們的網站在搜索引擎結果中更具競爭力。這將吸引更多的用戶點擊鏈接，並提高網站的曝光率。

運行具有服務器端渲染的Angular應用

服務器端渲染（Server Side Rendering，SSR）是一種技術，通過在服務器端渲染Angular應用，可以提供更快的首次加載時間和更好的搜索引擎優化。

要運行具有服務器端渲染的Angular應用，我們需要做一些额外的配置。

首先，我們需要更新package.json文件中的腳本，以包括服務器端渲染的命令。

"scripts": {
  "dev:ssr": "ng run my-app:serve-ssr",
  "build:ssr": "ng build --prod && ng run my-app:server:production",
  "serve:ssr": "node dist/my-app/server/main.js"
}

上面的代碼中，我們添加了dev:ssr、build:ssr和serve:ssr這三個服務器端渲染的命令。

接下來，我們可以在終端中運行npm run dev:ssr命令來啓動具有服務器端渲染的Angular應用。

npm run dev:ssr

服務器將在選定的端口上運行，你可以在瀏覽器中打開http://localhost:4200查看應用程序。

在服務器端渲染的Angular應用中設置標題

在服務器端渲染的Angular應用中，我們可以使用相同的方式設置頁面的標題，即注入Title服務並使用setTitle方法。

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
  constructor(private titleService: Title) {}

  ngOnInit(): void {
    this.titleService.setTitle('Angular Universal - 所有課程');
  }
}

在上面的代碼中，我們使用相同的方式注入和設置標題，並將頁面的標題設置為"Angular Universal - 所有課程"。

當使用服務器端渲染運行應用程序時，搜索引擎將獲取在服務器端渲染期間設置的標題。這意味著當搜索引擎訪問我們的網站時，將直接獲取包含正確標題的HTML。

在運行具有服務器端渲染的Angular應用時，網站的標題和描述將由服務器動態生成並提供給搜索引擎。這意味著搜索引擎可以正確索引網站的內容，並考慮到每個頁面的獨特標題和描述。

服務器端渲染有助於改善網站的搜索引擎優化，提高它們在搜索結果中的排名。

服務器端渲染與搜索引擎優化

有許多搜索引擎會考慮在服務器端渲染應用程序時動態生成的標題和描述。這使得將Angular應用程序部署為服務器端渲染變得更加重要，特別是對於那些重視搜索引擎優化的網站。

服務器端渲染可以改善網站的搜索引擎可見性，並使搜索引擎能夠正確索引網站的內容。

使用Angular時，通過在服務器端渲染應用程序中設置標題和描述，我們可以確保搜索引擎能夠看到網站的正確內容，並將其考慮進搜索結果中。

結論

在本課程中，我們學習了如何使用Angular來創建自定義標題和描述，以及如何在特定頁面上設置自定義標題。我們還瞭解了動態標題更新對搜索引擎排名的重要性，並探討了如何通過服務器端渲染改善搜索引擎優化。希望這些知識對你在開發網站時非常有用！