如何让 Twitter 识别路由提供的子页面中的 Angular7 元标记 [英] How to get Twitter to recognize Angular7 meta tags in a sub page served by a route
问题描述
我希望我的 Angular7 代码采用一个包含路由的 URL，并将所需的更新元标记呈现给 Twitter，以便 Twitter 能够呈现正确的社交卡片.
I want my Angular7 code to take a URL that contains a route and present desired updated meta tags to Twitter so that Twitter will render the correct social card.
遵循元标记的标准实践，包括在 index.html 标头中声明并更新路由加载的页面的构造函数，我可以在浏览器控制台中看到正确的更新值，但 twitter 忽略这些更新并使用第一个元来自 index.html 的标签.
Following standard practices for meta tags, which includes declaring in index.html header and updating in constructors of pages loaded by routes, I can see the correct updated values in the browser console, but twitter ignores those updates and uses the first meta tags from index.html.
来自 index.html...
From 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...
From app.module.ts…
import { mySubComponent } from './components/mySub/mySub.component';
...
const appRoutes: Routes = [
...
{ path: 'mySubPage', component: mySubComponent },
...
来自 www.oursite.com/mySubPage 加载的模块的 .ts 文件...
From the .ts file for the module loaded by www.oursite.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，控制台检查器显示所有正确的设置...
When I run this in the browser and manually type the full URL with the route (www.oursite.com/mySubPage, the console Inspector shows all the correct settings...
<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 的卡片，并且似乎完全忽略了来自路由的更新.
But the twitter card validator set to the exact same Sub URL shows the card from the main index.html and appears to ignore the updates from the route altogether.
顺便说一下，我确实尝试了所有步骤来刷新 twitter 缓存，甚至等了 12 多个小时后再次尝试.但是我可以对主要标签进行更新，并且更改会显示出来，因此这不是 twitter 的缓存问题.
By the way, I did attempt all steps to flush the twitter cache, and even waited for longer than 12 hours and tried again. But I can make an update to the main tags and the change shows up, so it's not a cache issue with twitter.
推荐答案
以下内容来自 https://twittercommunity.com/t/not-whitelisted-unable-to-render-or-no-image-read-this-first/62736 看起来除非有人知道不同的方法，否则他们基本上是在说我们不能从同一个应用程序域的不同角度路由提供不同的卡.你只能得到一个.注意他们在中间拼写出来...
This following is from https://twittercommunity.com/t/not-whitelisted-unable-to-render-or-no-image-read-this-first/62736 It looks like unless someone knows of a different approach, they are basically saying we can't serve up different cards from different angular routes from the same app domain. You only get one. Notice they spell it out in the middle...
在发布卡片问题之前，请阅读以下内容:
Before posting a Cards issue, please READ the following:
如果您要发布有关您网站的任何问题，请附上指向您的 Card 标记所在的可公开访问的 URL 的链接可见，否则我们将无法为您提供帮助.
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.
从 2018 年初开始，卡片不再需要列入白名单(包括球员卡)
As of early 2018, cards no longer require whitelisting (including player cards)
来自验证器的未列入白名单的错误消息具有误导性，几乎可以肯定意味着该工具无法看到或在您的页面中找到任何 twitter:card 标记.如果您看到一条消息，提示您需要提交卡以供批准，则您可能在标记.
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:
当您查看页面的来源时，会显示预期的 Twitter Cards 元标记 581请注意，您的页面至少必须包含一个 twitter:card 元标记，指定有效的卡片类型 370 或合适的 OpenGraph后备标签 170.如果您在命令提示符下执行 curl -v -A Twitterbot，您的页面是否仍显示 twitter:card 部分中的标签的页面?您的服务器是否返回 200 响应代码和有效的内容类型标头?您的页面是否在加载后添加标签，例如使用 Javascript(例如 Angular、 Meteor、Google 标签管理器)?这爬虫和验证器不能执行 Javascript，标签必须是静止的.您的网站是否可以通过 Twitterbot/1.0 用户代理访问?Twitterbot 是否可以访问所有文件(包括图像文件)?你应该检查 http://your-site-url/robots.txt 646 并确保它允许访问我们的爬虫.如果您的图片在不同的域中，也确保检查该域的 robots.txt 文件.您在使用 Wordpress(或其他 CMS/博客平台)插件吗?我们提供我们自己的官方 Wordpress 插件 614，但不能轻易为第三方构建的项目提供支持.检查是否配置包括所有必需的标签.避免使用多个插件，因为标签会相互覆盖.您是将顶级站点 URL 放入验证器中，还是将您的标记所在的特定 URL 放入验证器中?你需要确保您提供了一个链接，指向您的卡片标记在页.您使用的是受支持的 370 卡类型吗?产品、图库和照片卡已于 2015 年年中弃用 128. 卡类型是否拼写正确，还是有错别字?如果您的图片未显示，是否可以通过您的 robots.txt 文件未阻止的 URL 访问它?是否符合我们的尺寸约束?您是否使用了绝对和完整的 URL(包括http 协议块)，不是一个相对的?如果您看到有关由于其他错误或类似原因获取页面失败的验证器消息，请检查您的 SSL 配置.这由于以下原因，证书和服务器名称必须匹配(或使用别名匹配)Java 安全约束.在这个线程 220 中有更多内容.您使用的是完全限定的 DNS 域名吗?爬虫不支持带点号的 IP 地址作为域引用，并且不能访问本地主机.
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.
我们的开发人员提供了更多故障排除 302 信息网站.
There is much more Troubleshooting 302 information on our Developer site.
目前看来 Angular7 没有解决方法.显然，每个角度域名只能有一张卡片，从 index.html 上静态提供.
Looks like there's no work-around for Angular7 at this time. Apparently there can be only one card, served up statically from on index.html per angular domain name.
这篇关于如何让 Twitter 识别路由提供的子页面中的 Angular7 元标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
