社交共享元标记由IIS上承载的SPA Angular显示

Question

我在IIS上托管了SPA AngularJS应用。问题是显示由ngMeta（https://github.com/vinaygopinath/ngMeta）生成的元标记。我没有任何服务器端应用程序（只提供数据的ASP.NET Web API）。是否有可能在没有任何服务器端预渲染的情况下使我的网站“社交友好”？

现在它看起来像here

Answer 1

您可以设置在Angular可用时删除的后备静态HTML元标记（使用ng-if）。

<title ng-bind="ngMeta.title">Fallback title</title>
<meta name="description" content="Fallback description" ng-if="false" />
<meta name="description" content="{{ ngMeta.description }}" />

社交媒体抓取工具通常不会执行Javascript，因此他们会看到Fallback description，而Google的启用Javascript的抓取工具会选择ngMeta.description设置的说明。

请注意，上面的代码提供了网站范围的标题，说明和其他元标记。如果您想根据路线自定义元标记值，您可以执行类似这样的操作

1. 识别对服务器的请求的用户代理
2. 如果用户代理与已知的social media crawler's user agent字符串匹配，则重定向到脚本而不是提供文件。
3. 检查请求的路线（例如/blog）并返回或生成包含与博客页面相关的元标记的HTML页面。