如何让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忽略了这些更新并使用第一个meta来自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.
推荐答案
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:
如果您要发布有关网站的任何问题的信息，请添加一个 链接到您的卡片标记所在的可公开访问的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是否可以访问所有文件(包括图像文件)?你应该
检查
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屋！
