为啥 Meta 标签重要？

哎呀，Meta 标签这东西，搜索引擎啊、社交媒体啊，都喜欢看它。 它就像给搜索引擎看房子的户型图，告诉它你这页面是干啥用的。 不写好，人家搜不着你的网站！而且发到微信朋友圈或者脸书上，显示的标题和图片啥的也是靠它。你说重要不重要？

Angular 单页应用的问题

现在都流行单页应用了比如用 Angular 写的那种。 这种应用的内容都是 JavaScript 在客户端跑出来的，不是一开始就在 HTML 里面的。 我给跪了。 搜索引擎爬虫它可不会施行 JavaScript 啊！所以它看到的 HTML 可能就只有个空壳子了！那 Meta 标签肯定也抓不到啊！ 这就麻烦了。

简单粗暴的方法

我们都经历过... 有人说直接在 index.html 文件里把 Meta 标签写死就行了。嗯... 这倒也是个办法... 但是如果每个页面都要不一样呢？难道要改 index.html 文件？ 那岂不是疯了？而且那样也没法根据用户行为或者路由动态改变 Meta 信息。

Angular MetaService

Angular 自带一个 MetaService，可以让你在代码里面动态地修改 Meta 标签。 你可以在组件里面写几行代码就能改标题、描述啥的。听起来是不是很方便？ 但是！！ 它只能在客户端修改 DOM！ 搜索引擎爬虫看不到这些修改！ 所以还是没用！

代码示例

import { Component, OnInit } from '@angular/core';
import { Meta } from '@angular/platform-browser';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: 
})
export class MyComponentComponent implements OnInit {
  constructor { }
  ngOnInit {
    this.meta.updateTag; // 这句没啥用! 真没用! 不要相信!
  }
}

救星来了：Angular Universal

Angular Universal 是一个服务器端渲染工具。 什么意思呢？ 就是把你的 Angular 应用先在服务器上跑一遍， 生成一个完整的 HTML 文件， 我好了。 然后再把这个 HTML 文件发给浏览器和搜索引擎爬虫。这样爬虫就能看到完整的 HTML 了包括那些动态生成的 Meta 标签啦！

Universal 是怎么工作的

简单来说就是让服务器帮你把页面提前做好，然后直接给爬虫看成品。省得让爬虫自己去施行 JavaScript 了，大胆一点...。

具体怎么做

1. 安装 @angular/platform-server
2. 配置服务器端渲染
3. 在组件里面使用MetaService
4. 部署到服务器

一些注意事项

• 一定要保证图片有 alt 属性！
• 网站速度很重要！要优化图片、压缩代码什么的…
• 语义化 HTML 代码也很重要…虽然我不太懂什么是语义化…
• 别用 iframe！据说搜索引擎不喜欢…

总而言之吧， 想要搞好 Angular 应用的 SEO ，Meta 标签是绕不开的。但是单靠客户端的 MetaService 是不够的，一定要配合 Angular Universal 来实现服务器端渲染才能真正解决问题，事实上...。