为什么我的 javascript 渲染导航栏没有被抓取？答案

【问题标题】：Why isn't my javascript-rendered navbar being crawled?为什么我的 javascript 渲染导航栏没有被抓取？
【发布时间】：2016-12-19 16:35:07
【问题描述】：

我的引导导航栏是通过 $(document).ready 中的函数调用加载的。该函数加载导航栏（在 header.html 中），如下所示：

function loadHeader(callback){
    $.ajax({
        url: "/resources/"+language+"/header.html",
        async: true,
        success: function (data) {
            $('body').append(data);

            if(callback){
                callback();
            }

        },
        dataType: 'html'
    });     
}

我已尝试设置 async=false，但爬虫仍然无法获取导航栏中的链接（我已尝试通过 Google 搜索控制台以及爬虫程序 Screaming Frog 使用 fetch+render）。

最奇怪的是导航栏是在其他几个动态页面元素之前加载的，谷歌搜索控制台在渲染这些元素时没有问题。

这是我的导航栏（在 header.html 中）的预览：

<nav class="navbar navbar-default navbar-fixed-top index-nav">
    <div class="container" style="width:100%;">      
      <div class="navbrand">
        <a class="navbar-brand page-scroll" href="/en/">
          <img class="homelogo" src="/logos/company-Logo.png"/>
        </a>
      </div>
      <ul class="nav navbar-nav navbar-left">
        <li class="dropdown resourcesLI">
          <a class="dropdown-toggle mousePointer" data-toggle="dropdown">Resources</a>
          <ul class="dropdown-menu" role="menu">
              <li class="Link"><a href="/en/page_1.html">Page 1</a></li>                            
              <li class="Link"><a href="/en/page_2.html">Page 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>

为什么爬虫没有抓取我的导航栏链接？

编辑：需要注意的是我对 SEO 很陌生

【问题讨论】：

标签： javascript jquery html ajax seo

【解决方案1】：

一般来说，我在这篇文章中以其他方式回答了您的问题： https://stackoverflow.com/a/38948082/6715875

但是，如果我想为您详细说明，我会简短地对您说：在DOM 加载后部分更新的所有内容将不会被搜索引擎爬虫索引。在这种情况下，您可以选择我在上面链接中提到的一些解决方案。

问候。

【讨论】：