Facebook 的元数据图像

Question

如果我在这里提供我网站的一些链接，我想使用图片。好吧，我正在使用以下内容：

        import { Meta, Title } from "@angular/platform-browser";
        this.title.setTitle(this.data[0].title + ' - ' + this.data[0].city 
        );

        this.meta.addTags([

          { name: 'keywords', content: 'Globetrotter, Backpacking, Hiking, Travel' + this.data[0].city + ',' + this.data[0].country},
          { name: 'description', content: this.data[0].description},
          { name: 'og:image', content: this.data[0].images[0]}
        ]);

一切正常，但图像不正确，我不确定是否正确。在我的 index.html 文件中，我有另一个图像，并且正在发生这种情况。我应该删除它吗？我如何设置 url 以自动显示整个站点？

index.html 即使我输入不同的 url 路径，Facebook 也会始终显示此图片。

<meta property="og:image"     content="https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_960_720.jpg"
 />

我希望 Facebook 或其他网站能够识别此处的图像：

 { name: 'og:image', content: this.data[0].images[0]}

Answer 1

问题可能是，facebook 的 crawler/bot 不会执行 JavaScript，因此只会看到您在 index.html 中静态传送的 <meta> 标签。

您要么必须使用预呈现服务（如 prerender.io），要么在服务器端编写正确的元标记。

Facebook 的元数据图像

Meta data image for Facebook

javascript

angular-universal

angular