我是 SEO 的新手，只是想了解它如何为具有动态内容的单页应用程序工作。

在我的例子中，我有一个单页应用程序(由 AngularJS 提供支持，使用路由器来显示不同的状态)，它提供了一些基于位置的搜索功能，类似于 Zillow , Redfin , 或 Yelp .在 mt 站点上，用户可以输入位置名称，站点将根据位置返回一些结果。

我正在尝试找出一种方法使其与 Google 配合良好。例如，如果我在 Google 中输入“Apartment San Francisco”，结果将是:

当用户点击这些链接时，网站将显示正确的结果。我正在考虑为我的网站提供类似的 SEO。

问题是，页面内容完全取决于用户的查询。用户可以通过城市名称、州名称、邮政编码等进行搜索，以显示不同的结果，并且不可能将它们都放入站点地图中。 Google 如何抓取此类动态页面结果的内容？

我没有 SEO 经验，也不确定如何为我的网站做这件事。请分享一些经验或建议以帮助我入门。非常感谢!

===========

跟进问题:
我看到 Googlebot 可以 now run Javascript .我想更多地了解这一点。
当我的 SPA 应用程序的特定 url 打开时，它会进行一些网络查询(XHR 请求)几秒钟，然后显示页面内容。在这种情况下，GoogleBot 会等待 http 响应吗？

我看到一些教程说我们需要专门为搜索引擎准备静态 html。如果我只想与 Google 打交道，是否意味着我不必再提供静态 html，因为 Google 可以运行 Javascript？

再次感谢。

最佳答案

如果搜索引擎应该访问您的 JavaScript 应用程序，那么我们有权将搜索引擎重定向到另一个提供页面完全呈现版本的 URL。

为了这份工作

1. 您可以使用 github 上 Thomas Davis 提供的这个工具

SEOSERVER

或者

1. 您可以使用下面的代码来完成与上面相同的工作此代码也可用here

使用 Phantom.js 实现

我们可以设置一个给定 URL 的 node.js 服务器，它将完全呈现页面内容。然后我们会将机器人重定向到该服务器以检索正确的内容。

我们需要将 node.js 和 phantom.js 安装到一个盒子上。然后在下面启动这个服务器。有两个文件，一个是 web 服务器，另一个是呈现页面的 phantomjs 脚本。

// web.js

// Express is our web server that can handle request
var express = require('express');
var app = express();
var getContent = function(url, callback) {
  var content = '';
  // Here we spawn a phantom.js process, the first element of the 
  // array is our phantomjs script and the second element is our url 
  var phantom = require('child_process').spawn('phantomjs',['phantom-server.js', url]);
  phantom.stdout.setEncoding('utf8');
  // Our phantom.js script is simply logging the output and
  // we access it here through stdout
  phantom.stdout.on('data', function(data) {
    content += data.toString();
  });
  phantom.on('exit', function(code) {
    if (code !== 0) {
      console.log('We have an error');
    } else {
      // once our phantom.js script exits, let's call out call back
      // which outputs the contents to the page
      callback(content);
    }
  });
};

var respond = function (req, res) {
  // Because we use [P] in htaccess we have access to this header
  url = 'http://' + req.headers['x-forwarded-host'] + req.params[0];
  getContent(url, function (content) {
    res.send(content);
  });
}
app.get(/(.*)/, respond);
app.listen(3000);

下面的脚本是 phantom-server.js ，将负责完整渲染内容。在页面完全呈现之前，我们不会返回内容。我们连接到资源监听器来执行此操作。

var page = require('webpage').create();
var system = require('system');

var lastReceived = new Date().getTime();
var requestCount = 0;
var responseCount = 0;
var requestIds = [];
var startTime = new Date().getTime();

page.onResourceReceived = function (response) {
    if(requestIds.indexOf(response.id) !== -1) {
        lastReceived = new Date().getTime();
        responseCount++;
        requestIds[requestIds.indexOf(response.id)] = null;
    }
};
page.onResourceRequested = function (request) {
    if(requestIds.indexOf(request.id) === -1) {
        requestIds.push(request.id);
        requestCount++;
    }
};

// Open the page
page.open(system.args[1], function () {});
var checkComplete = function () {
  // We don't allow it to take longer than 5 seconds but
  // don't return until all requests are finished
  if((new Date().getTime() - lastReceived > 300 && requestCount === responseCount) || new Date().getTime() - startTime > 5000)  {
    clearInterval(checkCompleteInterval);
    console.log(page.content);
    phantom.exit();
  }
}
// Let us check to see if the page is finished rendering
var checkCompleteInterval = setInterval(checkComplete, 1);

一旦我们启动并运行此服务器，我们只需将机器人重定向到客户端 Web 服务器配置中的服务器即可。

重定向机器人 如果您使用的是 apache，我们可以编辑掉 .htaccess，以便将 Google 请求代理到我们的中间人 phantom.js 服务器。

RewriteEngine on
RewriteCond %{QUERY_STRING} ^_escaped_fragment_=(.*)$
RewriteRule (.*) http://webserver:3000/%1? [P]

我们还可以包括其他 RewriteCond ，例如用于重定向我们希望被编入索引的其他搜索引擎的用户代理。

尽管 Google 不会使用 _escaped_fragment_除非我们通过包含元标记来告诉它； <meta name="fragment" content="!">或使用 #!我们链接中的 URL。

您很可能必须同时使用两者。

这已通过 Google 网站管理员抓取工具进行了测试。确保包括 #!使用抓取工具时在您的网址上。

关于angularjs - 动态内容单页应用SEO，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27960155/