Question

我在angular 2网站中添加了itemtype="http://schema.org/Restaurant"架构。我使用https://search.google.com/structured-data/testing-tool/进行了测试，但我的网页内容未在Google测试工具中呈现。它像<my-app>Loading...</my-app>一样显示。我已经检查了控制台html被渲染。我想在谷歌测试工具中显示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>

谷歌测试工具结果

    <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和此处：https://github.com/angular/universal

Angular2 SEO - How to make an angular 2 app crawlable

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

1 个答案: