Angular 2+客户端设置OpenGraph动态meta标签除Angular Universal外是否有其他方案

Angular Universal 不是唯一选择，你可以根据业务场景选择以下更轻量化的方案： #

方案1：预渲染（Prerendering）静态页面 #

• 适用场景：产品页面可提前枚举、内容不需要实时动态更新
• 你可以直接开启Angular官方的prerender构建配置，在应用编译阶段就为每个已登记产品的独立路径生成带对应OG标签的静态HTML文件
• 部署后爬虫请求对应路径时直接返回已注入OG标签的静态资源，性能优于SSR，且不需要额外的服务端运行环境

方案2：反向代理层动态注入标签 #

• 适用场景：不想改造现有客户端应用架构、产品数据实时性要求高
• 不需要修改现有Angular业务代码，在Nginx、边缘计算节点等反向代理层加处理逻辑即可：
  • 检测请求头的User-Agent，判断请求来自搜索引擎、社交平台爬虫时，先请求后端产品接口拉取对应元数据，将OG标签插入到返回HTML的<head>节点后再返回
  • 普通用户访问时直接返回原客户端应用的静态资源，不影响用户访问体验
• 这种方案对现有业务的侵入性为0，改造成本最低

方案3：静态站点生成（SSG）+ 增量更新 #

• 适用场景：产品新增/修改频率低、页面量级在数千到数万级别
• 用SSG工具在产品数据变更时触发构建，仅重新生成有变更的产品页面的静态HTML（已提前注入OG标签），不需要全量重新构建整个应用

选型参考 #

如果你的产品页面量级极大、或者内容是用户实时生成的动态内容，Angular Universal SSR确实是灵活性最高的选择。其余场景优先选择上述轻量化方案即可，不需要全量切换SSR架构。 #

内容的提问来源于stack exchange，提问作者Eustáquio