google 结构化数据测试工具中未检测到架构

Question

我在我的 angular 2 网站中添加了 itemtype="http://schema.org/Restaurant" 架构。我使用 https://search.google.com/structured-data/testing-tool/ 进行了测试，但我的页面内容未在 google 测试工具中呈现。它像 <my-app>Loading...</my-app> 一样显示。我已经检查了控制台 html 是否呈现。我想在 google 测试工具中显示 rednred html。如何解决这个问题？请帮忙解决这个问题。

    <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>

Answer 1

Angular2 的伟大之处在于启动时，根应用程序元素中的所有内容都会消失。这意味着你可以把你想要的任何东西从你想要被爬虫抓取的服务器里放进去。

您可以在您的应用中使用内容的服务器呈现版本生成此内容，或者使用自定义逻辑。

您可以在此处找到更多信息：https://angularu.com/VideoSession/2015sf/angular-2-server-rendering and here: https://github.com/angular/universal

google 结构化数据测试工具中未检测到架构

schema not detected in google structured-data testing-tool

jsonschema

structured-data

schema.org

angular