创建可抓取的跨域 javascript 小部件答案

【问题标题】：Creating crawlable cross domain javascript widgets创建可抓取的跨域 javascript 小部件
【发布时间】：2012-06-17 18:34:00
【问题描述】：

我一直在阅读有关使 ajax 繁重的应用程序对搜索引擎更友好的信息： https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

我最近提供的解决方案之一在很大程度上依赖于跨域 javascript 小部件。集成此解决方案的网站将在其网站中包含一段 javascript。例如：

<script type="text/javascript">
  var _lw = _lw || {};
  _lw._setAccount = ' 00000000-0000-0000-0000-000000000000' ;
  _lw._widgetType = '_widgetName';
  _lw._options = {};  

  (function() {
    var scriptsrc = document.createElement('script'); 
    scriptsrc.type = 'text/javascript'; 
    scriptsrc.async = true;
    scriptsrc.src = 'http://hostname/Application/js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(scriptsrc, s);
  })();
</script>]

<div id="widget-container"></div>

此请求将 jQuery 包装器以及小部件将使用的相关应用程序 URL 附加到 dom。注意，这段javascript的来源只是一个asp.net mvc内容结果，输出相关内容：

[HttpGet]
[ActionName("js")]
public ContentResult RenderJavascript()
{
      // java script urls & jquery wrapper are output
}

现在必要的 url 已经可用，刚刚添加的 jQuery 包装器启动并向服务器发出请求，其中包含帐户信息、小部件类型和任何相关选项。 ASP.net MVC 只是充当内容生成器，它返回 JSONP 结果，生成的内容将附加到站点内容容器中。

function loadWidget() {
    var jsonpUrl = _opts._widgetUrl + _lw._setAccount;
    jQuery.getJSON(jsonpUrl, _lw._options, function (data) {
        jQuery('#widget-container').html(data.html);
    });
}

我读到的关于使这个过程对搜索引擎更友好的内容越多，我就不知从何开始。生成所需的 HTML 快照很容易，但是，我如何向 google 表明应该抓取链接？

另一个看起来很有希望的选项是关于如何处理没有散列碎片的页面的部分。这将通过添加一个使用 javascript 小部件的元标记来完成。

<meta name="fragment" content="!">

但是，现在的问题在于，这是一个跨域请求，并且不会导致任何地方。

【问题讨论】：

除非您的小部件可以更改位置哈希值，否则我认为这是不可能的。见：developers.google.com/webmasters/ajax-crawling/docs/…

标签： javascript jquery asp.net-mvc search-engine web-crawler

【解决方案1】：

这是一个棘手的问题。有evidenceGoogle 确实会抓取 JavaScript（它本身并不会像您的浏览器那样执行它，但它至少会在 JavaScript 中查找 URL，就像它在 Flash、Word 等文档中所做的那样. 因此，如果 Google 在您的 JavaScript 中发现 'http://hostname/Application/js' 并愿意遵循它，然后从返回的 JavaScript 中解析 URL，那么您可能不需要做任何事情。

如果您想要更具体的解决方案，或许可以像这样修改您的代码：

<div id="widget-container"><iframe src="http://hostname/Application/iframe"></div>

或者：

<div id="widget-container"><a href="http://hostname/Application/links"></div>

当您的小部件的 JavaScript 由浏览器执行时，您可以将 #widget-container 的内容替换为您通常替换的内容（您也可以添加 style="visibility:invisible;" 属性，但我怀疑 Google 会在任何地方惩罚“隐藏”内容可能出于明显的原因），但是当 Googlebot 停下来时，它会抓取 iframe/链接。在服务器端，您可以让这些 URL 生成与 JavaScript 中相同的链接列表，但使用易于消化的 HTML。

可能让 Googlebot 更快乐的另一个选项是使用像 WebPageElement 这样的 Schema.org 对象，例如：

<div id="widget-container" itemscope itemtype="http://schema.org/SiteNavigationElement">
  <link itemprop="url" href="http://hostname/Application/links">
</div>

...然后让目标页面也包含 Schema.org 声明。我不确定您是否会比以前的一种形式从中获得任何真正的好处，但metadata is a love note to the future。

【讨论】：