Javascript 在SPA中进行社交共享时没有图像_Javascript_Facebook_Angular_Twitter

Javascript 在SPA中进行社交共享时没有图像

javascript facebook angular twitter

Javascript 在SPA中进行社交共享时没有图像,javascript,facebook,angular,twitter,Javascript,Facebook,Angular,Twitter,我正在使用Angular 4的新元服务： import { Meta } from '@angular/platform-browser'; constructor( private route: ActivatedRoute, private metaService: Meta) { } let newText = "Foo data. This is test data!:)"; //metatags to publish this page at social

我正在使用Angular 4的新元服务：

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

constructor(
    private route: ActivatedRoute,
    private metaService: Meta) {
}

let newText = "Foo data. This is test data!:)";
    //metatags to publish this page at social nets
    this.metaService.addTags([
        // Open Graph data
        { property: 'og:type', content: "website" },
        { property: 'og:title', content: this.card.caption },
        { name: "twitter:title", content: this.card.caption },
        { property: 'og:description', content: this.card.caption + newText },
        { name: "twitter:description", content: this.card.caption + newText },
        { name: "mrc__share_description", content: this.card.caption + newText },
        { property: "og:url", content: window.location.href },
        { name: "twitter:url", content: window.location.href },
        { property: 'og:image', content: "http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg" },
        { property: 'og:image:width', content: "1200" },
        { property: 'og:image:height', content: "630" },
        { property: "twitter:image", content: "http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg" },
        { name: "twitter:image:src", content: "http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg" },
        { name: "twitter:card", content: "summary_large_image" },
        { name: "twitter:site", content: "fooContent" },
        { name: "twitter:creator", content: "fooContent" },
        { property: 'og:site_name', content: this.card.caption },
        { property: "article:published_time", content: "2017-04-17T05:59:00+01:00" },
        { property: "article:modified_time", content: "2017-04-17T05:59:00+01:00" },
        { property: "article:section", content: "Article Section" },
        { property: "article:tag", content: "Article Tag" },
        { property: "fb:admins", content: "414358988584020" },

        //mark up for Google
        { itemprop: "name", content: this.card.caption },
        { itemprop: "description", content: this.card.caption + newText },
        { itemprop: "image", content: "http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg" }
    ]);

我的页面如下所示：

<head>
    <meta property="og:type" content="website">
    <meta property="og:title" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta name="twitter:title" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta property="og:description" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta name="twitter:description" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>Foo data. This is test data!:)">
    <meta name="mrc__share_description" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>Foo data. This is test data!:)"><meta property="og:url" content="http://fourl.com">
    <meta name="twitter:url" content="http://fourl.com"><meta property="og:image" content="http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg">
    <meta property="og:image:width" content="1200"><meta property="og:image:height" content="630">
    <meta property="twitter:image" content="http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg">
    <meta name="twitter:image:src" content="http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg">
    <meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="fooContent">
    <meta name="twitter:creator" content="fooContent">
    <meta property="og:site_name" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta property="article:published_time" content="2017-04-17T05:59:00+01:00">
    <meta property="article:modified_time" content="2017-04-17T05:59:00+01:00">
    <meta property="article:section" content="Article Section">
    <meta property="article:tag" content="Article Tag"><meta property="fb:admins" content="414358988584020">
    <meta itemprop="name" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>">
    <meta itemprop="description" content="<span style=&quot;color:red&quot;>Foo data. This is test data!:)</span>Foo data. This is test data!:)"><meta itemprop="image" content="http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg">
</head>

然而，当我插入facebook、twitter或goolge时，并没有很酷的图片、文字标题和一些内容。

这种行为的原因是什么？

您不能通过客户端JavaScript设置这些打开的图形元标记-Facebook scraper并不关心这一点，它只关注服务器在请求URL时返回的HTML代码

对于使用客户端框架（如Angular）来呈现其内容的应用程序/站点，这意味着您还需要“预呈现”它（至少对应于相关的OG元标记，否则文档可以为空），或者使用系统可用的其他包（就像您提到的；尽管它提到的

\u转义\u片段

语法已被弃用，请参阅），或者像这样的外部服务（没有附属关系；只知道它是一个常见的示例。）

是实际的URL？它不包含任何开放式图形元数据。@CBroe这只是一个示例。抱歉，我无法显示真实的URL。但您之前的研究至少让您知道，您不能通过客户端JavaScript设置这些元标记，对吗？@CBroe否，当我打开页面时，我会看到所有必要的元标记！是的，在您自己的服务器上使用这样的包，或者使用诸如prerender.io之类的外部服务