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