如何让Twitter识别路由服务子页面中的Angular7元标记_Twitter_Meta Tags_Angular7

如何让Twitter识别路由服务子页面中的Angular7元标记

twitter

如何让Twitter识别路由服务子页面中的Angular7元标记,twitter,meta-tags,angular7,Twitter,Meta Tags,Angular7,我希望我的Angular7代码获取一个包含路由的URL，并向Twitter提供所需的更新元标记，以便Twitter提供正确的社交卡按照meta标记的标准实践，包括在index.html标题中声明和在路由加载的页面的构造函数中更新，我可以在浏览器控制台中看到正确的更新值，但twitter忽略这些更新并使用index.html中的第一个meta标记从index.html <head> <title>My Title</title> <!-- Othe

我希望我的Angular7代码获取一个包含路由的URL，并向Twitter提供所需的更新元标记，以便Twitter提供正确的社交卡

按照meta标记的标准实践，包括在index.html标题中声明和在路由加载的页面的构造函数中更新，我可以在浏览器控制台中看到正确的更新值，但twitter忽略这些更新并使用index.html中的第一个meta标记

从index.html

<head>
<title>My Title</title>
  <!-- Other Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@myAccountName">
  <meta name="twitter:title" content="My Title">
  <meta name="twitter:description" content="A detailed description of the site">
  <meta name="twitter:image" content="https://www.oursite.com/welcome.png">

从www.oursite.com/mySubPage加载的模块的.ts文件

import { Router, ActivatedRoute, Params } from '@angular/router';
import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-mySub',
  templateUrl: './mySub.component.html',
  styleUrls: ['./mySub.component.css']
})
export class mySubComponent implements OnInit {
...
  constructor(
...
public meta: Meta, public title: Title) {
      meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
      meta.updateTag({ name: 'twitter:site', content: '@myAccountName});
      meta.updateTag({ name: 'twitter:title', content: 'My Sub Title' });
      meta.updateTag({ name: 'twitter:description', content: 'The descript of the sub page' });
      meta.updateTag({ name: 'twitter:image', content: 'https://www.oursite.com/mySubPageLogo.png' });
}

当我在浏览器中运行此操作并手动键入带有路由的完整URL（www.oursite.com/mySubPage）时，控制台检查器会显示所有正确的设置

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@myAccountName">
<meta name="twitter:title" content="My Sub Title">
<meta name="twitter:description" content="The descript of the sub page">
<meta name="twitter:image" content="https://https://www.oursite.com/mySubPageLogo.png">

但是设置为完全相同的子URL的TwitterCard validator显示main index.html中的卡片，并且似乎完全忽略了路由中的更新

顺便说一句，我确实尝试了所有步骤来刷新twitter缓存，甚至等待了超过12个小时后再次尝试。但是我可以更新主标记并显示更改，因此这不是twitter的缓存问题。

以下内容看起来像是，除非有人知道不同的方法，否则他们基本上是说we无法从同一应用程序域中的不同角度路线提供不同的卡。您只能获得一张卡。请注意，它们在中间拼写出来
在发布信用卡问题之前，请阅读以下内容：
如果您发布的是关于您网站的任何问题，请包括链接到卡标记所在的公共可访问URL 可见，否则我们将无法帮助您
您还应确保已检查以下各项，并且在请求其他帮助之前，请执行您自己的故障排除。表明未执行这些检查的帖子将被删除没有被优先关注
截至2018年初，信用卡不再需要白名单（包括玩家卡）
来自验证器的未列入白名单的错误消息具有误导性，几乎可以肯定地说，这意味着该工具无法看到或删除在您的页面中查找任何twitter:card标记。如果您看到一条消息说您需要提交您的卡以供批准，则可能是您在中指定了错误的卡类型标记
如果您有其他问题，请检查以下内容：
当您查看页面的源代码时，会显示预期的Twitter卡元标记581 注意：您的页面至少必须包含一个twitter:card元标记，指定有效的卡片类型370或合适的OpenGraph 后备标签170。如果在命令提示符下执行curl-v-A Twitterbot，页面是否仍在该部分显示twitter:card标记您的服务器是否返回200响应代码和有效的内容类型标题？您的页面是否在加载后添加标签，例如使用Javascript（例如Angular、Meteor、Google标签管理器）爬虫程序和验证程序无法执行Javascript，标记必须是静止的 Twitterbot/1.0用户代理是否可以访问您的站点？Twitterbot是否可以访问所有文件（包括图像文件）？您应该检查646并确保它允许访问我们的爬虫程序。如果您的图像位于不同的域，也确保检查该域的robots.txt文件。您使用的是Wordpress（或其他CMS/博客平台）插件吗？我们提供了自己的官方Wordpress插件614，但无法轻松实现为第三方构建的组件提供支持。检查配置包括所有必需的标记。避免使用多个标记插件在同一时间，因为标签将覆盖彼此。您是将顶级站点URL放入验证器中，还是将标记所在的特定URL放入验证器中？您需要确保您提供了一个链接，指向您的卡标记在页您是否使用受支持的370卡类型？产品、图库和照片卡在2015年年中被弃用128。卡类型是否拼写正确是正确的，还是有打字错误？如果您的图像未显示，是否可以在未被robots.txt文件阻止的URL上访问？它是否符合我们的大小约束？您是否使用绝对完整的URL（包括 http协议块），而不是一个相对的？如果您看到由于其他错误或类似错误导致获取页面失败的验证程序消息，请检查您的SSL配置由于以下原因，证书和服务器名称必须匹配（或别名匹配） Java安全约束。更多信息请参阅本线程220。您使用的是完全限定的DNS域名吗？爬虫程序不支持将点式IP地址作为域引用，并且不能访问本地主机

关于我们的开发人员，还有更多的疑难解答302信息地点

看起来Angular7目前还没有解决方案。显然，每个angular域名只能从index.html上静态提供一张卡。

您是否使用firebase作为BAA？如果是这样，我可以通过执行上面的操作让twitter渲染卡（设置服务或将元标记插入组件）。本课程对我有所帮助，但基于我的问题，除了与firebase应用程序有关外，我的universal将不会在应用程序根目录下的浏览器中使用。我不必在默认index.html中呈现任何元标记。查看上面的教程，看看这是否有助于解决您的问题

我已经测试了一些东西，显然Twitter目前忽略了index.html以外的所有东西。我甚至测试了所有Twitter标记，只将它们放在兄弟sub的typescript中，例如welcome和page1。在这些情况下，Twitter没有看到

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@myAccountName">
<meta name="twitter:title" content="My Sub Title">
<meta name="twitter:description" content="The descript of the sub page">
<meta name="twitter:image" content="https://https://www.oursite.com/mySubPageLogo.png">

// Sub-Component

import { Component, OnInit } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {
  data = {
    name: 'Michael Jordan',
    bio: 'Former baseball player',
    image: ''
  };

  constructor(private title: Title, private meta: Meta) {}

  ngOnInit() {
    this.title.setTitle(this.data.name);
    this.meta.addTags([
      { name: 'twitter:card', content: 'summary' },
      { name: 'og:url', content: '/about' },
      { name: 'og:title', content: this.data.name },
      { name: 'og:description', content: this.data.bio },
      { name: 'og:image', content: this.data.image }
    ]);
  }
}