Angular4社交媒体Facebook分享页面，包含详细信息

Question

渔获物在哪里：

1. Nginx作为Angular 4应用程序
2. Angular 4元标记仅从FB请求路径上的基本href读取

角路径可以是（示例）： https : //domain.pa/book/12/书名

Nginx是简单的设置：

root /home/web/dist;
index index.html index.htm;
location / {
expires -1;
try_files $uri $uri/ /index.html;
autoindex on;
}

在Angular App中，我可以使用以下写入服务：

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

在每个页面上，我都会更新Facebook的元标记：

this.meta.updateTag({ property: 'og:type', content: 'article' });
this.meta.updateTag({ property: 'og:site_name', content: 'AdriaOffer' });
this.meta.updateTag({ property: 'og:title', content: config.title });
this.meta.updateTag({ property: 'og:description', content: config.description });
this.meta.updateTag({ property: 'og:image', content: config.image });
this.meta.updateTag({ property: 'og:url', content: config.slug });

当我更改页面元标记时，它也可以很好地工作。 真的不知道在哪里看，以及如何为Facebook Share插件提供元数据。 也许您对SEO单页Web应用程序有类似的问题。

Answer 1

bot无法检测到您的项目，因为它是PreRender 。 如果您希望引导程序看到您的内容，则应该执行服务器端渲染 （SSR）。

您应该使用Angular Universal或（我推荐） Rendertron 。

Answer 2

自从versión1开始，我一直在使用angular + prerender的组合，这一直是我的建议，直到为我提供了一个新的角度通用的机会。

我第一次尝试设置Angle Universal时，文档非常混乱，但是知道有官方文档

https://angular.io/guide/universal