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

问题描述 投票：1回答：2

我希望我的Angular7代码采用包含路由的URL并向Twitter提供所需的更新元标记，以便Twitter呈现正确的社交卡。

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

来自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">

来自app.module.ts ...

import { mySubComponent } from './components/mySub/mySub.component';
...
const appRoutes: Routes = [
...
 { path: 'mySubPage', component: mySubComponent },
...

来自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的twitter卡验证器显示主index.html中的卡，并且似乎完全忽略了路由中的更新。

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

twitter meta-tags angular7
2个回答
0
投票

以下是来自https://twittercommunity.com/t/not-whitelisted-unable-to-render-or-no-image-read-this-first/62736看起来除非有人知道不同的方法，他们基本上说我们不能提供来自同一应用领域的不同角度路线的不同卡。你只得到一个。注意他们在中间把它拼出来......

在发布卡片问题之前，请阅读以下内容：

如果您要发布有关您网站的任何问题，请提供一个指向公开可访问网址的链接，其中显示您的卡片标记，否则我们将无法为您提供帮助。

您还应确保已检查以下项目，并在寻求其他帮助之前执行自己的故障排除。表明未执行这些检查的帖子不会被优先关注。

截至2018年初，卡不再需要白名单（包括玩家卡）

来自Validator的未列入白名单的错误消息具有误导性，几乎可以肯定意味着该工具无法在您的页面中查看或找到任何twitter：card标记。如果您看到一条消息说您需要提交您的卡进行审批，则您可能在标记中指定了不正确的卡类型。

如果您遇到其他问题，请查看以下内容：

当您查看页面的来源时，预期的Twitter卡元标记581至少显示为NB，您的页面必须至少包含指定有效卡类型370的twitter：card元标记，或者合适的OpenGraph后备标记170。你在命令提示符下执行curl -v -A Twitterbot，你的页面是否仍然显示页面部分的twitter：card标签？您的服务器是否返回200响应代码和有效的Content-Type标头？是你的页面在加载后添加标签，例如使用Javascript（例如Angular，Meteor，Google Tags Manager）？爬虫和验证程序无法执行Javascript，标记必须是静态的。您的网站是否可以通过Twitterbot / 1.0用户代理访问？ Twitterbot可以访问所有文件（包括图像文件）吗？你应该检查http://your-site-url/robots.txt 646并确保它允许访问我们的爬虫。如果您的图片位于其他域中，请确保检查该域的robots.txt文件。你在使用Wordpress（或其他CMS /博客平台）插件吗？我们提供自己的官方Wordpress插件614，但不能轻易为第三方构建的插件提供支持。检查配置是否包含所有必需的标记。避免同时使用多个插件，因为标签会互相覆盖。您是将顶级网站网址放入验证程序，还是标记所在的特定网址？您需要确保提供指向页面中可见卡片标记的链接。你使用支持的370卡类型？产品，图库和照片卡在2015年中期被弃用128.卡片类型拼写是否正确，或者是否有拼写错误？如果您的图片没有显示，是否可以在未被robots.txt文件阻止的网址上访问？它符合我们的尺寸限制吗？您使用的是绝对和完整的URL（包括http协议部分），而不是相对的URL？如果您看到有关获取页面失败的验证程序消息，因为其他错误或类似错误，请检查您的SSL配置。由于Java安全性限制，证书和服务器名称必须匹配（或别名以匹配）。更多在此线程220.您使用完全限定的DNS域名吗？爬网程序不支持点分区IP地址作为域引用，也不能访问localhost。

我们的开发者网站上有更多的疑难解答302信息。

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

0
投票

您是使用firebase作为BaaS吗？如果是这样的话，我可以通过完成你上面所做的事情来设置推送卡片（设置服务或将Meta标签插入组件）。这一课帮助我解决了https://fireship.io/lessons/angular-universal-firebase/，但基于我的问题，除了它与firebase应用程序有任何关系，我的通用不会在app-root下用于浏览器。我没有在我的默认index.html中渲染任何元标记。查看上面的教程，看看是否有助于解决您的问题。

https://angular.io/guide/universal

// 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 }
    ]);
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.