谷歌索引的 Angular 应用程序答案

【问题标题】：Angular application indexed by Google谷歌索引的 Angular 应用程序
【发布时间】：2015-09-23 14:10:41
【问题描述】：

我觉得我已经尝试了每一个选项，但没有任何成功。首先让我列出我尝试过的选项：

在 Apache 中使用预渲染：

我已尝试使用以下步骤：

在 Angular 中：

$locationProvider.html5Mode(true);

在 HTML 中，添加此元标题：

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

配置 Apache：

  RewriteEngine On
# If requested resource exists as a file or directory
  # (REQUEST_FILENAME is only relative in virtualhost context, so not usable)
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    # Go to it as is
    RewriteRule ^ - [L]

  # If non existent
    # If path ends with / and is not just a single /, redirect to without the trailing /
      RewriteCond %{REQUEST_URI} ^.*/$
      RewriteCond %{REQUEST_URI} !^/$
      RewriteRule ^(.*)/$ $1 [R,QSA,L]      

  # Handle Prerender.io
    RequestHeader set X-Prerender-Token "YOUR_TOKEN"

    RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest [NC,OR]
    RewriteCond %{QUERY_STRING} _escaped_fragment_

    # Proxy the request
    RewriteRule ^(.*)$ http://service.prerender.io/http://%{HTTP_HOST}$1 [P,L]

  # If non existent
    # Accept everything on index.html
    RewriteRule ^ /index.html

这根本不起作用：Google 无法读取我的子页面。

使用 Node / Phantomjs 渲染页面

    var express = require('express');
var app = module.exports = express();
var phantom = require('node-phantom');
app.use('/', function (req, res) {
    if (typeof(req.query._escaped_fragment_) !== "undefined") {
        phantom.create(function (err, ph) {
            return ph.createPage(function (err, page) {
                return page.open("https://system.dk/#!" + req.query._esca$
                    return page.evaluate((function () {
                        return document.getElementsByTagName('html')[0].innerHT$
                    }), function (err, result) {
                        res.send(result);
                        return ph.exit();
                    });
                });
            });
        });
    } else
        res.render('index');
});

app.listen(3500);
console.log('Magic happens on port ' + 3500);

在这里我创建了这个站点，然后在我的 Apache 配置中添加了一个代理，以便所有请求都指向我的域端口 3500。

这不起作用，因为它无法呈现索引，当我最终让它发送 html 页面时，JavaScript 不会呈现。

遵循自定义快照指南

然后我按照这个指南：

http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

然而，这需要我为所有不是我想要的并且维护起来很烦人的东西制作自定义快照。另外，make-snapshot 在我的服务器上不起作用。

【问题讨论】：

那么当你在 url 中插入 ?_escaped_fragment_= 会发生什么？
@charlietfl 现在如果我这样做 learningbank.dk/?_escaped_fragment_= 它会重定向到我的索引
尝试删除机器人条件来检查它
@charlietfl 机器人条件（对不起，我现在很困惑：S）
RewriteCond %{HTTP_USER_AGENT} ...您的浏览器与这些不匹配

标签： angularjs apache .htaccess mod-rewrite google-index

【解决方案1】：

理论上，您不必将页面预呈现给 Google 爬虫。他们现在解析javascript。 http://googlewebmastercentral.blogspot.ca/2014/05/understanding-web-pages-better.html

Google 可以很好地解析我的 angularJS 网站。 https://www.google.nl/search?q=site%3Atest.coachgezocht.nu

使用 $locationProvider.html5Mode(true);和：

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]

【讨论】：