哎呀， 今天咱们来聊聊那个Angular，你知道吧，就是那个Google搞的前端框架。很多人都在用， 但是呢，有个大问题，就是SEO，搜索引擎优化，还有那个社交分享，比如发个链接到微信或者Facebook，那个预览图老是出不来或者标题不对。这可咋整呢？其实啊，都是Meta标签没搞好的缘故。这篇文章我就瞎扯扯怎么动态管理这些标签， 让咱们的Angular应用能被搜索引擎看上，也能在朋友圈里显摆，真香！。

那个Meta标签到底是个啥玩意儿？

我不敢苟同... 先说说啊，咱们得明白Meta标签是个啥。它就在那个HTML的head里面看不见摸不着的，但是机器能看懂。比如那个description，还有那个og:title，og:image，这些都是给爬虫看的。如果你的Angular应用里没有这些， 或者这些标签是空的，那搜索引擎来了也是瞎子摸象，根本不知道你的页面是讲啥的。社交分享也是一样，它抓不到图，就给你个灰色的框，多难看啊。

但是呢， Angular是个单页应用，这玩意儿一开始加载的时候，HTML里头几乎是空的，就一个app-root标签。剩下的内容都是JavaScript跑起来之后才往里面塞的。这就麻烦了 主要原因是那些爬虫，比如Google的bot，还有社交媒体的机器人，它们大多不跑JavaScript，或者跑得不好。它们只看最开始的那个HTML。所以你在组件里用代码写的Meta标签，它们根本看不见！看不见！这就像你穿了个隐身衣一样，冲鸭！。

为啥在组件里写Meta标签没用？

很多开发者在Angular应用中尝试使用@angular/platform-browser提供的Meta服务来动态设置Meta标签，比方说在组件的ngOnInit生命周期钩子或构造函数中添加或更新标签。只是这种做法对于搜索引擎优化和社交媒体分享的预览效果是无效的。

真的，没用。我试过好多次。代码写得挺溜的， 像下面这样：，我明白了。

import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router'; // 假设设置Meta
@Component({
  selector: 'app-post',
  template: `
    
{{ postContent }}
  `
})
export class AppComponent {
    constructor {
        // 在构造函数中添加Meta标签
        this.metaService.addTag;
    }
    ngOnInit {
        // 在ngOnInit中添加Meta标签
        this.metaService.addTag;
    }
    title = 'My Angular App';
}

尽管这些标签会在浏览器中成功添加到DOM中，但对于外部爬虫它们仍然是隐形的。原因在于，搜索引擎爬虫和社交媒体机器人通常只抓取并解析服务器返回的原始HTML文档。它们不会施行客户端的JavaScript代码，或者只会施行非常有限的JavaScript。 我整个人都不好了。 这意味着，任何通过Angular应用在浏览器中动态插入的Meta标签，都不会被这些机器人识别。当您查看页面的“源代码”时 这些动态添加的标签是不可见的，主要原因是它们是在DOM加载并施行JavaScript后才被注入的，而不是初始HTML的一部分。

所以啊，别白费力气了光靠客户端是不行的。

那咋办呢？必须用服务器端渲染

对于需要为不同页面动态生成独特Meta标签的场景，服务器端渲染是唯一的有效解决方案。Angular Universal是Angular官方提供的SSR解决方案， 它允许在服务器上预渲染Angular应用，生成完整的HTML内容，包括动态设置的Meta标签，然后将其发送到客户端，胡诌。。

这玩意儿厉害啊。它不是在浏览器里跑，而是在服务器上跑。服务器把页面渲染好了 变成一串完整的HTML字符串， 与君共勉。 里面啥都有，Meta标签也有，内容也有，然后再发给浏览器。这样爬虫一来直接就能看到Meta标签了多好。

添加Angular Universal到您的项目

听着，这步挺关键的。你得用Angular CLI命令。打开你的终端， 放心去做... 就是那个黑乎乎的窗口，敲进去这个命令：

ng add @nguniversal/express-engine

这会自动配置您的项目，添加必要的依赖和脚本。真的，不用你手动去改那些配置文件， 啊这... 它自己就弄好了。虽然我也不知道它具体改了啥，反正再说说能跑就行。

构建与运行Universal应用

行吧... 加完之后呢，你得构建。构建命令通常是 npm run build:ssr 或者那个特别长的命令：

ng build --configuration production --output-path dist/browser && ng run :server

这命令太长了 我每次都复制粘贴，怕敲错。运行命令通常是 npm run serve:ssr 或者 node dist/server/。这就把你的服务器跑起来了不再是那个简单的 ng serve 了，我血槽空了。。

工作原理

当用户或爬虫请求页面时 Angular Universal会在服务器端运行您的Angular应用，施行组件中的逻辑，并生成一个完整的HTML字符串。 好家伙... 这个HTML字符串包含了所有初始内容和Meta标签，然后被发送到浏览器。这样，爬虫就能直接解析到这些标签。

境界没到。 为了确保Meta标签能够被搜索引擎和社交媒体机器人正确识别，我们需要在服务器端生成包含这些标签的HTML。主要有两种策略：其实主要就是这一种，另一种静态的咱们待会儿说。

静态Meta标签：简单但是笨

我给跪了。 如果您对整个网站的Meta标签有统一的需求， 即所有页面共享相同的标题、描述和图片，那么最简单的方法是将Meta标签直接硬编码到src/index.html文件中。

就像这样：

优点：简单易行，无需额外配置。缺点：无法为不同页面提供独特的Meta信息，不适用于内容动态变化的网站。比如你有个博客， 每篇文章标题都不一样，你用这个方法，所有文章的标题都叫“我的Angular应用”，那谁还看啊。

在Universal环境下动态设置Meta标签

在Universal环境下您仍然使用Meta和Title服务。不同之处在于，当应用在服务器上渲染时这些服务会正确地将标签注入到生成的HTML中。

这回就管用了。主要原因是服务器在跑代码的时候，也会跑你的ngOnInit，也会跑你的Meta服务。然后它把后来啊塞进HTML里。所以你之前的代码，比如那个AppComponent里的代码，现在就能起作用了。

Meta 服务常用方法：

你得会用这几个方法，addTag, updateTag, removeTag。反正就是增删改查那一套。比如你想改个标题，就用this.title.setTitle。想加个描述，就用this.meta.addTag，操作一波...。

在Angular应用中， 直接通过客户端JavaScript动态添加或更新Meta标签，对于搜索引擎爬虫和社交媒体机器人来说是无效的，主要原因是它们通常不施行JavaScript，只解析初始HTML。要实现动态、 可被爬虫识别的Meta标签，特别是针对不同页面内容，必须采用服务器端渲染方案，如Angular Universal，它能在服务器端预先渲染包含Meta标签的完整HTML，从而解决SEO和社交分享预览问题。

实现步骤概述

咱们再捋一遍，别搞乱了。

第一步，肯定得装好Angular CLI，创建好项目。这个不用多说吧？不会的话去翻翻别的教程。

第二步，加上Universal。就是那个ng add命令。这一步最省心，总体来看...。

第三步，写代码。在你的组件里 比如PostDetailComponent，或者ProductComponent，里面注入Meta和Title服务。然后在ngOnInit里根据你的数据，比如文章的标题、内容，去设置这些标签。

第四步，构建。用那个npm run build:ssr。 开搞。 注意看有没有报错，有报错赶紧修，别管它红不红。

第五步，运行。npm run serve:ssr。然后打开浏览器， 不是localhost:4200了可能是localhost:4000， 简直了。 具体看你配置。然后右键查看网页源代码。哎，你会发现，head里头真的有Meta标签了！是不是很神奇？

除了SEO和社交分享， Universal还有个好处，就是首屏加载快。主要原因是服务器直接把HTML发过来了浏览器不用等JS下载完、施行完才能显示内容。用户感觉网速变快了体验就好了，平心而论...。

不忍卒读。 当然啦，也有缺点。服务器得费劲去渲染HTML，服务器压力大了。而且部署起来比以前麻烦，不能光扔个Nginx或者Apache就行了还得有个Node服务器跑着。不过为了SEO，这点代价还是值得的。

一下 别搞错了

总之啊，大家记住一点：客户端动态加Meta标签，爬虫看不见！重要的事情说三遍。要想SEO好， 有啥用呢？ 要想分享有图，必须上Angular Universal，必须做服务器端渲染。

虽然配置起来有点麻烦，代码也要改，但是没办法啊，谁让咱们用的是Angular呢。React也有Next.js，Vue也有Nuxt.js，大家都有SSR方案。咱们Angular也有Universal，还算凑合。

坦白讲... 希望这篇文章能帮到你。虽然我写得挺乱的，但是大概意思应该讲清楚了。要是还有不懂的，就去翻官方文档吧，那个写得比我好多了。我就一菜鸟，瞎写写，大家别见怪。反正代码能跑就行，是吧？

再说说别忘了测试。用那个Facebook的调试工具， 还有Google的Structured Data Testing Tool， 好吧好吧... 看看你的Meta标签到底有没有被识别出来。要是没识别出来再回来检查检查代码，是不是哪里写错了或者Universal没跑起来。

我算是看透了。 好了不说了我要去吃饭了。写这文章累死我了。大家加油，把SEO搞上去，流量哗哗的！

---