schema not detected in google structured-data testing-tool

问题

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 testing tool result

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

回答1:

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.

You can find some more information here: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering and here: https://github.com/angular/universal

Angular2 SEO - How to make an angular 2 app crawlable

来源：https://stackoverflow.com/questions/44389546/schema-not-detected-in-google-structured-data-testing-tool

标签

angular

schema.org

jsonschema

structured-data