Question

如果内容是从JS文件动态生成的，那么Googlebot会看到与访问者不同的内容（根本不会将其编入索引）（请参见上图）。假设我有以下代码：

<body>
<div>Bunch of Content</div>
   <script type="text/javascript" src="/js/somefile.js" />
<div>Bunch of Content</div>
</body>

如何在页面加载时在文档中显示实际生成的HTML：

<body>
<div>Bunch of Content</div>
   <p>Javascript dynamically created this string and this string.</p>
   <p>Date: timestamp by JS</p>
   <p>Other info dynamically created by JS.</p>
<div>Bunch of Content</div>
</body>

我让JS忙着为页面动态生成一些内容。问题是，因为内容是在JS文件中生成的，所以内容永远不会被加载到DOM中以供爬虫索引。

有办法做到这一点吗？谢谢！

Answer 1

Google CAN索引动态内容，但这并不意味着它会将其编入索引，或者将其显示在搜索结果中，因为它通常只会在寻找负面因素（例如黑帽SEO实践）中寻找它，尽管对于某些人来说网站可能决定将其用于索引（当涉及Google如何处理此问题时，它实际上是盲目的猜测，因为他们没有透露这类细节）。

如果您的JS正在发出AJAX请求，并且您是API的所有者或您从请求中调用的任何端点，那么您最好的办法是将结果缓存在服务器端，并修改您的HTML页面（应该是动态的），以便在发送到浏览器的HTML中呈现最新的缓存结果，但包含在容器标记（如<div>）中，其中包含一个非法的CSS规则，如{{1因此，默认情况下，用户看不到内容，一旦加载了最新的HTML，您的JS文件就应该将其更改为opacity: 0;。

Answer 2

您可以使用jQuery来完成此操作，如下例所示：

$(document).ready(function() {
  var el = "<section>Dynamically added content</section>";
  $('.a').after(el);
})

div {
  padding: 10px;
  background-color: #ccc;
}

section {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">Bunch of Content</div>
   
<div>Bunch of Content</div>

更新：如果您正在使用Ajax从服务器获取数据，那么您将在返回的数据对象中包含代码更新。您可以扩展它以迭代您获得的值。

$.getJSON('[Your url]', { param: 'value' },
    function (data) {
       var el = "<section>" + data.value + "</section>";
       $('.a').after(el);
     });
});

如何加载外部.js调用产生的HTML？

2 个答案: