Angular SSR 不包括页面源代码中的 SEO

Question

我一直在对试图实现 SEO 的页面进行一些测试，但我的 SEO 标签似乎并未仅在已经是客户端的检查器中插入到页面源中。

我已经在不同版本的 Angular 中进行了尝试（对于新的 SSR，Universal 将 16 中的页面升级到 17，但我在 19 应用程序上运行的测试产生了相同的结果）。

我也在这个测试应用程序中启用了客户端水合作用。

我的 SEO 服务如下所示：

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Injectable({
  providedIn: 'root',
})
export class SeoService {
  constructor(private titleService: Title, private meta: Meta) {}

  setTitle(title: string) {
    this.titleService.setTitle(title);
  }

  updateMetaTags(description: string) {
    this.meta.addTag({ name: 'description', content: description });
  }
}

我在Home之类的组件中这样称呼它：

import { Component, OnInit } from '@angular/core';
import { SeoService } from '../seo.service';

@Component({
  selector: 'app-home',
  imports: [],
  providers: [SeoService],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss',
})
export class HomeComponent implements OnInit {
  constructor(private seoService: SeoService) {}

  ngOnInit(): void {
    this.seoService.setTitle('SEO - BUT THE HOME PAGE');
    this.seoService.updateMetaTags('This is the home page for the SEO app!!!');
  }
}

例如主页组件，渲染页面源更新的标题，但不渲染描述的元标记：

<!DOCTYPE html><html lang="en" data-beasties-container><head>
    <meta charset="utf-8">
    <title>SEO - BUT THE HOME PAGE</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="styles-5INURTSO.css"><meta name="description" content="This is the home page for the SEO app!!!"></head>
  <body><!--nghm-->
    <app-root ng-version="19.0.5" ngh="1" ng-server-context="ssr"><a href="/">Base</a><a href="/home">Home</a><a href="/topics">Topics</a><router-outlet></router-outlet><app-home ngh="0"><p>home works!</p></app-home><!----></app-root></html>

在检查器中虽然它显示正确（我猜已经是客户端）：

如何让服务器呈现我的动态描述标签（以及其他动态标签，例如关键字和规范 URL）？

Answer 1

对于SEO来说，meta标签不一定需要在SSR上渲染。

最重要的是，您预渲染的静态页面应该包含元标记。

确保您已配置要预渲染的页面。使用以下指南。

预渲染（SSG）

配置此选项后，谷歌和其他提供商的网络爬虫将读取这些静态生成的页面并为其建立索引。

Angular SSR 不包括页面源代码中的 SEO

问题描述投票：0回答：1

1个回答

预渲染（SSG）

最新问题

Angular SSR 不包括页面源代码中的 SEO

问题描述 投票：0回答：1

1个回答

预渲染（SSG）

最新问题

问题描述投票：0回答：1