如何让 Twitter 识别路由提供的子页面中的 Angular7 元标记
How to get Twitter to recognize Angular7 meta tags in a sub page served by a route
我希望我的 Angular7 代码采用包含路由的 URL 并向 Twitter 呈现所需的更新元标记，以便 Twitter 呈现正确的社交卡。
遵循元标记的标准做法，包括在 index.html header 中声明和在路由加载页面的构造函数中更新，我可以在浏览器控制台中看到正确的更新值，但是 twitter忽略这些更新并使用 index.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 加载的模块的 .ts 文件。com/mySubPage...
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">
但是 Twitter 卡片验证器设置为完全相同的子 URL 显示来自主 index.html 的卡片并且似乎完全忽略了来自路线的更新。
顺便说一句，我确实尝试了所有刷新推特缓存的步骤，甚至等待了超过 12 小时并再次尝试。但我可以对主要标签进行更新并显示更改，因此这不是 twitter 的缓存问题。
以下内容来自 https://twittercommunity.com/t/not-whitelisted-unable-to-render-or-no-image-read-this-first/62736 看起来除非有人知道不同的方法，否则他们基本上是说我们不能提供来自同一应用程序域的不同 angular 路由的不同卡片.你只能得到一个。注意他们在中间拼写出来...
Before posting a Cards issue, please READ the following:
If you are posting about any issue with your site, please include a
link to the publically-accessible URL where your Card markup is
visible, or we will be unable to help you.
You should also make sure that you’ve checked the items below, and
perform your own troubleshooting before asking for additional help.
Posts that indicate that none of these checks have been performed will
not be prioritised for attention.
As of early 2018, cards no longer require whitelisting (including
player cards)
The not whitelisted error message from the Validator is misleading, and almost certainly means that the tool cannot see or
find any twitter:card markup in your page.
If you see a message saying that you need to submit your card for approval, you’ve probably specified an incorrect card type in the
markup.
Please review the following if you are having other issues:
when you view the source of your page, the expected Twitter Cards meta tags 581 are shown
NB at a minimum, your page must contain at least a twitter:card meta tag specifying a valid card type 370, or suitable OpenGraph
fallback tags 170.
if you execute curl -v -A Twitterbot at the command prompt, does your page still show the twitter:card tags in the section
of the page? Does your server return a 200 response code and a valid
Content-Type header?
is your page adding the tags after it is loaded, for instance using Javascript (e.g. Angular, Meteor, Google Tags Manager)? The
crawler and validator cannot execute Javascript and the tags must be
static.
is your site accessible by the Twitterbot/1.0 user-agent? Are all the files (including image files) accessible to Twitterbot? you should
check http://your-site-url/robots.txt 646 and ensure that it allows
access to our crawler. If your images are on a different domain, also
make sure you check the robots.txt file for that domain.
are you using a Wordpress (or other CMS/blogging platform) plugin? We provide our own official Wordpress plugin 614, but cannot easily
provide support for those built by third parties. Check that the
configuration includes all of the required tags. Avoid using multiple
plugins at the same time, as tags will override one another.
are you putting the top-level site URL into the Validator, or the specific URL where your markup is present? you’ll need to make sure
that you provide a link to where your Card markup is visible in the
page.
are you using a supported 370 Card type? Product, Gallery and Photo cards were deprecated in mid-2015 128. Is the card type spelled
correctly, or is there a typo?
if your image is not showing, is it accessible on a URL that is not blocked by your robots.txt file? Does it conform to our size
constraints? Are you using an absolute and full URL (including the
http protocol piece), not a relative one?
if you see a validator message about Fetching the page failed because other errors or similar, check your SSL configuration. The
certificate and server name must match (or be aliased to match) due to
Java security constraints. More in this thread 220.
are you using a fully qualified DNS domain name? The crawler does not support dotted IP addresses as domain references, and cannot
access localhost.
There is much more Troubleshooting 302 information on our Developer
site.
目前似乎没有针对 Angular7 的变通方法。显然只能有一张卡片，从 index.html 每个 angular 域名静态提供。
您是否将 firebase 用作 BaaS？如果是这样，我就能够通过完全按照您在上面所做的（设置服务或将元标记插入组件）来让推特呈现卡片。这节课帮助了我 https://fireship.io/lessons/angular-universal-firebase/ ，但基于我的问题，除了它与成为 firebase 应用程序有任何关系外，我的通用不会在应用程序根目录下服务于浏览器。我不必在默认 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 }
]);
}
}
我希望我的 Angular7 代码采用包含路由的 URL 并向 Twitter 呈现所需的更新元标记，以便 Twitter 呈现正确的社交卡。
遵循元标记的标准做法，包括在 index.html header 中声明和在路由加载页面的构造函数中更新，我可以在浏览器控制台中看到正确的更新值，但是 twitter忽略这些更新并使用 index.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 加载的模块的 .ts 文件。com/mySubPage...
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">
但是 Twitter 卡片验证器设置为完全相同的子 URL 显示来自主 index.html 的卡片并且似乎完全忽略了来自路线的更新。
顺便说一句，我确实尝试了所有刷新推特缓存的步骤，甚至等待了超过 12 小时并再次尝试。但我可以对主要标签进行更新并显示更改，因此这不是 twitter 的缓存问题。
以下内容来自 https://twittercommunity.com/t/not-whitelisted-unable-to-render-or-no-image-read-this-first/62736 看起来除非有人知道不同的方法，否则他们基本上是说我们不能提供来自同一应用程序域的不同 angular 路由的不同卡片.你只能得到一个。注意他们在中间拼写出来...
Before posting a Cards issue, please READ the following:
If you are posting about any issue with your site, please include a link to the publically-accessible URL where your Card markup is visible, or we will be unable to help you.
You should also make sure that you’ve checked the items below, and perform your own troubleshooting before asking for additional help. Posts that indicate that none of these checks have been performed will not be prioritised for attention.
As of early 2018, cards no longer require whitelisting (including player cards)
The not whitelisted error message from the Validator is misleading, and almost certainly means that the tool cannot see or find any twitter:card markup in your page. If you see a message saying that you need to submit your card for approval, you’ve probably specified an incorrect card type in the markup.
Please review the following if you are having other issues:
when you view the source of your page, the expected Twitter Cards meta tags 581 are shown NB at a minimum, your page must contain at least a twitter:card meta tag specifying a valid card type 370, or suitable OpenGraph fallback tags 170. if you execute curl -v -A Twitterbot at the command prompt, does your page still show the twitter:card tags in the section of the page? Does your server return a 200 response code and a valid Content-Type header? is your page adding the tags after it is loaded, for instance using Javascript (e.g. Angular, Meteor, Google Tags Manager)? The crawler and validator cannot execute Javascript and the tags must be static. is your site accessible by the Twitterbot/1.0 user-agent? Are all the files (including image files) accessible to Twitterbot? you should check http://your-site-url/robots.txt 646 and ensure that it allows access to our crawler. If your images are on a different domain, also make sure you check the robots.txt file for that domain. are you using a Wordpress (or other CMS/blogging platform) plugin? We provide our own official Wordpress plugin 614, but cannot easily provide support for those built by third parties. Check that the configuration includes all of the required tags. Avoid using multiple plugins at the same time, as tags will override one another. are you putting the top-level site URL into the Validator, or the specific URL where your markup is present? you’ll need to make sure that you provide a link to where your Card markup is visible in the page. are you using a supported 370 Card type? Product, Gallery and Photo cards were deprecated in mid-2015 128. Is the card type spelled correctly, or is there a typo? if your image is not showing, is it accessible on a URL that is not blocked by your robots.txt file? Does it conform to our size constraints? Are you using an absolute and full URL (including the http protocol piece), not a relative one? if you see a validator message about Fetching the page failed because other errors or similar, check your SSL configuration. The certificate and server name must match (or be aliased to match) due to Java security constraints. More in this thread 220. are you using a fully qualified DNS domain name? The crawler does not support dotted IP addresses as domain references, and cannot access localhost.
There is much more Troubleshooting 302 information on our Developer site.
目前似乎没有针对 Angular7 的变通方法。显然只能有一张卡片，从 index.html 每个 angular 域名静态提供。
您是否将 firebase 用作 BaaS？如果是这样，我就能够通过完全按照您在上面所做的（设置服务或将元标记插入组件）来让推特呈现卡片。这节课帮助了我 https://fireship.io/lessons/angular-universal-firebase/ ，但基于我的问题，除了它与成为 firebase 应用程序有任何关系外，我的通用不会在应用程序根目录下服务于浏览器。我不必在默认 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 }
]);
}
}