Angular / Facebook：应该明确提供“og：image”属性，即使可以从其他标签推断出一个值[重复]答案

【问题标题】：Angular / Facebook : The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags [duplicate]Angular / Facebook：应该明确提供“og：image”属性，即使可以从其他标签推断出一个值[重复]
【发布时间】：2019-06-07 03:55:50
【问题描述】：

我已经为我的网站提供了 facebook 和 twitter 的所有元标记。以角度开发网站：还提供了xmlns。

<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

谁能告诉我我在这里缺少什么。

在 Facebook 调试器上，我收到的消息是

推断属性：应该明确提供“og:image”属性，即使可以从其他标签推断出值。

缺少属性：缺少以下必需属性：og:url、og:type、og:title、og:image、og:description、fb:app_id

  updateTitle(title?: string) {

    if (!title) {
      this.router.events
        .pipe(
          filter((event) => event instanceof NavigationEnd),
          map(() => this.activatedRoute),
          map((route) => {
            while (route.firstChild) { route = route.firstChild; }
            return route;
          }),
          filter((route) => route.outlet === 'primary'),
          mergeMap((route) => route.data)).subscribe((event) => {
            this.titleService.setTitle(event['title']);
            this.meta.updateTag({ name: 'description', content: event['description'] });
            this.meta.updateTag({ name: 'author', content: event['author'] });
            this.meta.updateTag({ name: 'keywords', content: event['keywords'] });
            this.meta.updateTag({ name: 'news_keywords', content: event['news_keywords'] });

            //Indexing / Spiders 
            this.meta.updateTag({ name: 'googlebot', content: "all" });
            this.meta.updateTag({ name: 'bingbot', content: "all" });
            this.meta.updateTag({ name: 'robots', content: "all" });

            //OpenGraph

            this.meta.updateTag({ name: 'og:type', content: "article" });
            this.meta.updateTag({ name: 'og:site_name', content: 'kadakfeed.com' });
            this.meta.updateTag({ name: 'og:title', content: event['title'] });
            this.meta.updateTag({ name: 'og:description', content: event['description'] });
            this.meta.updateTag({ name: 'og:url', content: this.url + event['url'] });
            this.meta.updateTag({ name: 'og:image', content: this.imgUrlPath + event['url'] + "/" + event['img'] });
            this.meta.updateTag({ name: 'og:image:width', content: "600" });
            this.meta.updateTag({ name: 'og:image:height', content: "340" });
            this.meta.updateTag({ name: 'fb:app_id', content: "2152587131722996" });



            //Twitter
            this.meta.updateTag({ name: 'twitter:card', content: "summary_large_image" });
            this.meta.updateTag({ name: 'twitter:site', content: "@kadakfeed" });
            this.meta.updateTag({ name: 'twitter:title', content: event['title'] });
            this.meta.updateTag({ name: 'twitter:description', content: event['description'] });
            this.meta.updateTag({ name: 'twitter:image', content: this.imgUrlPath + event['url'] + "/" + event['img'] });

          });
    } else {
      this.titleService.setTitle(title);
    }

}

在 app.component.ts 我调用元服务 updateTitle()

constructor(public metaService: MetaserviceService) {
    this.metaService.updateTitle();

  }

【问题讨论】：

标签： angular facebook facebook-graph-api metadata meta-tags

【解决方案1】：

您的 Open Graph 协议的密钥错误，您必须使用 property 而不是 name

http://ogp.me/#structured

/* the key value is wrong

this.meta.updateTag({
  name: 'og:type',
  content: "article"
});

*/

this.meta.updateTag({
  property: 'og:type',
  content: "article"
});
this.meta.updateTag({
  property: 'og:site_name',
  content: 'kadakfeed.com'
});
....

【讨论】：

我已经尝试过了，但是我的元标记没有被调用。
像什么，og:XXX 不是在你的 HTML 中创建的吗？
不知何故此订阅（（事件）事件总是未定义
你会创建一个在线示例吗？（如stackblitz.com）
kadakfeed.com/… 请参考这个链接..我已经检查过。它显示了所有 og 元标记，但在 facebook 调试中它们没有得到反映。