Question

我正在使用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时，没有很酷的图像，文字标题和一些内容。这种行为可能是什么原因？

Answer 1

您无法通过客户端JavaScript设置这些Open Graph元标记 - Facebook刮刀不关心这一点，它只关注您的服务器在请求URL时返回的HTML代码。

对于使用像Angular这样的客户端框架来呈现其内容的应用/网站，这意味着您还需要＆＃34;预渲染＆＃34;它（至少相关的OG元标记，文档可以为空），或者使用系统可用的其他软件包（比如你提到的https://www.npmjs.com/package/prerender-angular;虽然它提到的_escaped_fragment_语法是已弃用，请参阅https://developers.google.com/webmasters/ajax-crawling/docs/specification）或https://prerender.io/等外部服务（无关联;只需将其视为一个常见示例。）

在SPA Angular社交分享时没有图像

1 个答案: