我觉得我已经尝试了每一个选项,但没有成功。首先让我列出我尝试过的选项:
在 Apache 中使用预渲染:
我已尝试使用以下步骤进行此操作:
在角:
$locationProvider.html5Mode(true);
在 HTML 中,添加此元标头:
<head>
<meta name="fragment" content="!">
</head>
配置阿帕奇:
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
这根本不起作用:谷歌无法读取我的子页面。
使用 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 在我的服务器上不起作用。