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

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中呈现最新的缓存结果，但包装在带有不透明CSS规则（如opacity: 0; ）的容器标签（如<div> ）中 因此默认情况下，该内容对用户不可见，应将其更改为opacity: 1; 一旦加载了最新的HTML，就可以通过您的JS文件访问。

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 个解决方案

解决方案1
2 2017-02-15 04:38:57

解决方案2
1 2017-02-15 00:00:46

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

问题描述

2 个解决方案

解决方案1 2 2017-02-15 04:38:57

解决方案2 1 2017-02-15 00:00:46

解决方案1
2 2017-02-15 04:38:57

解决方案2
1 2017-02-15 00:00:46