Google结构化数据测试工具未检测到架构 [英] schema not detected in google structured-data testing-tool
问题描述
我在我的angular 2网站中添加了itemtype="http://schema.org/Restaurant"模式.我使用 https://search.google.com/structured-data/testing-工具/，但我的网页内容未在Google测试工具中呈现.它像<my-app>Loading...</my-app>一样显示.我已经检查了控制台html的呈现.我想在Google测试工具中显示rednred html.如何解决这个问题?请为此提供帮助.
I have added itemtype="http://schema.org/Restaurant" schema in my angular 2 website. I tested with https://search.google.com/structured-data/testing-tool/ but my page content not rendered in google testing tool. it is displayong like <my-app>Loading...</my-app>. I have checked in console html is rendered. I want to display the rednred html in google testing tool. How to fix this?. Please help with this.
<div class="col-md-12 col-sm-12 col-xs-12 " itemscope="" itemtype="http://schema.org/Restaurant">
<div class="col-md-7 col-sm-7 col-xs-12 ">
<div class="summary">
<div class="hidden"> <img itemprop="image" src="https://www.dropbox.com/s/cj17j9p8ia2324p/13531992_1727289640876806_1806315202_n.jpg?raw=1"></div>
<div class="hidden" itemprop="name">Chicks On Fire</div>
<h1 class="">Summary</h1>
<p class="" itemprop="description">item description.</p>
</div>
<div class="sum_details ">
<div class="address">
<span class="icon-address"><img alt="Activity" class="icon1" src="assets/images/korean.png" title="Activity"></span>
<p class="address_title" itemprop="servesCuisine">Western</p>
</div>
<div class="address">
<span class="icon-address"><img alt="Food Category" class="icon1" src="assets/images/tick.png" title="Food Category"></span>
<p class="address_title">Halal meat</p>
</div>
<div class="address">
<span class="icon-address"><img alt="Timing" class="icon1" src="assets/images/time.png" title="Timing"></span>
<p class="address_title">1800 - 2200</p>
<div itemprop="openingHoursSpecification" itemscope="" itemtype="http://schema.org/OpeningHoursSpecification">
<span class="hidden" itemprop="opens" content="1800">1800</span>
<span class="hidden" itemprop="closes" content="2200">2200</span>
</div>
<p class="address_title">Closed on Mondays.</p>
</div>
<div class="address">
<span class="icon-address"><img alt="Pricing" class="icon1" src="assets/images/tag.png" title="Pricing"></span>
<p class="address_title" itemprop="priceRange">20-30 GBP</p>
</div>
<div class="address">
<span class="icon-address"><img alt="Website" class="icon1" src="assets/images/website.png" title="Website"></span>
<p class="address_title"><a itemprop="url" target="_Blank" href="http://www.mysite.co.uk/">Visit website</a></p>
</div>
<div class="address">
<span class="icon-address"><img alt="Location" class="icon1" src="assets/images/location.png" title="Location"></span>
<p class="address_title " itemprop="address">11 Hercules St, London Borough of Islington, London</p>
</div>
</div>
</div>
</div>
google测试工具结果
<html>
<head>
<meta charset="utf-8">
<base href="/planner/">
<script>
(function() {
window['_app_base'] = '/' + window.location.pathname.split('/')[1];
})();
</script>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5257', 'none');
ga('send', 'pageview');
</script>
<link href="styles.dbb24ce5e4a005ec7903.bundle.css" rel="stylesheet"/></head>
<body>
<my-app>Loading...</my-app>
<script type="text/javascript" src="inline.ca338d2ec972840d9759.bundle.js"></script><script type="text/javascript" src="polyfills.507dd0128897cd6bbb86.bundle.js"></script><script type="text/javascript" src="vendor.d72da31d6e50a2a57f34.bundle.js"></script><script type="text/javascript" src="main.6456ae999bcbe35f9e26.bundle.js"></script></body>
</html>
推荐答案
关于Angular2的妙处在于，启动后，根应用程序元素中的所有内容都会消失.这意味着您可以将想要的任何东西从爬虫要拾取的服务器放到那里.
The great thing about Angular2 is that when fired up, all content inside your root app-element goes away. This means that you can put whatever you want in there from the server which you want to be picked up by crawlers.
您可以在应用中使用服务器呈现的内容版本来生成此内容，或者具有自定义逻辑.
You can generate this content by using a server-rendered version of the content in your app, or have custom logic.
您可以在此处找到更多信息: https://angularu.com /VideoSession/2015sf/angular-2-server-rendering 和此处: https://github.com /角度/通用
You can find some more information here: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering and here: https://github.com/angular/universal
这篇关于Google结构化数据测试工具未检测到架构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
