非Angular Universal的Angular4/5网站谷歌搜索无描述解决方案咨询

其实不用上Angular Universal也能搞定谷歌搜索描述不显示的问题，毕竟你只需要解决meta描述这一项，不用做全面SEO优化，下面分几种场景给你具体方案：

一、所有页面使用统一描述 #

这个是最省心的方案，直接在你的index.html的<head>标签里手动添加静态meta描述标签即可：

<meta name="description" content="这里替换成你的网站核心描述，建议控制在150-160字符左右，精准概括网站核心内容">

谷歌现在的爬虫具备JS渲染能力，但初始静态的meta标签会被优先抓取，如果你不需要给不同页面设置差异化描述，这个方法完全够用。

二、不同路由需要差异化描述 #

如果你的不同页面需要独特的描述内容，可以用Angular自带的Meta服务动态更新meta标签，步骤如下：

1. 在对应模块（比如AppModule或页面专属模块）中导入Meta模块：

import { Meta } from '@angular/platform-browser';

2. 在需要设置描述的组件中注入Meta服务，然后在ngOnInit钩子中更新描述：

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html'
})
export class AboutComponent implements OnInit {
  constructor(private meta: Meta) {}

  ngOnInit(): void {
    this.meta.updateTag({ 
      name: 'description', 
      content: '这里是关于我们页面的专属描述，清晰说明本页面的核心内容' 
    });
  }
}

当用户（包括谷歌爬虫）访问对应路由时，Angular会动态更新meta标签，谷歌的JS爬虫会等待页面渲染完成后抓取到更新后的描述内容。

更稳妥的进阶方案：预渲染 #

如果担心谷歌爬虫偶尔不等JS渲染完成就结束抓取，还可以用预渲染工具prerender-spa-plugin。它会在构建Angular项目时，把你指定的路由提前渲染成静态HTML文件，这样谷歌抓取到的就是已经带有正确meta描述的静态页面，完全不依赖JS渲染。
操作步骤大概是：

1. 安装依赖：

npm install prerender-spa-plugin --save-dev

2. 修改项目的构建配置（比如自定义webpack配置或angular.json中的构建选项），添加该插件并指定需要预渲染的路由（比如首页、关于页、产品列表页等），构建完成后这些路由会生成独立的静态HTML文件。

几个关键注意事项 #

• 谷歌有时候不显示描述，不一定是抓取不到，也可能是它认为你的描述与页面内容不匹配、重复或者长度不合适。所以要确保每个描述都是独特的，长度控制在150-160字符，精准对应页面核心内容。
• 可以使用谷歌Search Console的URL Inspection工具，输入你的页面URL，查看谷歌实际抓取到的内容中是否包含正确的meta描述，方便快速排查问题。

内容的提问来源于stack exchange，提问作者destro1