为AngularJS + Spring MVC网站生成静态SEO页面

我有一个使用Spring MVC + AngularJS的项目。 所有数据都是动态的。 在这个应用程序中有一些大的位置数据库。

出于搜索引擎优化的目的， 需要为每个位置生成一个静态页面并将它们放在SEO友好的URL上 （例如/ localhost / path1 / path2 / here-is-very-friendly-name）

制作它的最佳方法是什么？

我应该单独生成一个页面并将它们放在主应用程序的某个单独的文件夹中（如果是，最好的方法是什么？），或者我可以使用Spring / Angular吗？

（有关其他信息） 每个位置的对象包含id ， name ， latitude ， longtitude ， address ， district ， city ， country 。

Answer 1

实际上这是我的Angular / SEO体验。
你必须做出很多改变！

---

1）从URL中删除#

 app.config(['$locationProvider', function ($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }]); 

---

2）检查您的MVC路由

直到现在，也许你有一个HomeController用于返回index.cshtml并启动你的Angular App。
从Angular路由中删除#后，您必须为所有路由设置MapRoute 。
因为在这种情况下你第一次尝试访问像www.site.com/any_route这样的路线Angular App尚未加载，所以它试图从MVC路由获取页面。 但在此之后， $routeProvider履行其职责。

---

3）将MVC变量用于元标记

为了更好地索引并成为爬虫和机器人的朋友，我们必须使用MVC变量来初始化网站元标记。
如果您通过Angular绑定设置页面标题，例如只要您想通过社交网络分享您的网页，您就会看到{{title}}因为社交网络无法呈现网站。

---

4）替换元标记的角度绑定

我们的应用程序是SPA，因此在加载Angular之后我们就离开了MVC游乐场。 我们必须用MVC变量替换Angular变量。

 angular.element('title').remove(); angular.element('meta[name="Description"]').remove(); angular.element('meta[name="Keywords"]').remove(); angular.element('meta[property="og:title"]').remove(); angular.element('meta[property="og:description"]').remove(); var description = angular.element(''); angular.element('head').prepend(description); var keyword = angular.element(''); angular.element('head').prepend(keyword); var titleOg = angular.element(''); angular.element('head').prepend(titleOg); var descriptionOg = angular.element(''); angular.element('head').prepend(descriptionOg); var title = angular.element(''); angular.element('head').prepend(title); $rootScope.$applyAsync(function () { $compile(title)($rootScope); $compile(description)($rootScope); $compile(keyword)($rootScope); $compile(titleOg)($rootScope); $compile(descriptionOg)($rootScope); }); 

---

5）使用JSON-lD获取动态内容

如果您熟悉SCHEMA.org ，最好使用JSON-LD而不是其他人，因为搜索引擎机器人可以捕获并分析在加载页面后动态插入的 。
您必须检查Schema Dictionary以查找最接近您的数据结构的类型。
例如，这是我的公司json-ld：

Answer 2

您是否尝试过SEO.js（ http://getseojs.com/ ）和prerender.io（ https://prerender.io/ ）等工具。 你试过那些吗？

Answer 3

我自己没有尝试过，但PhantomJs可能是最好的选择。

您需要一个要渲染的端点字典及其对应的静态文件路径名称。 然后，您将遍历每个端点，使用PhantomJS呈现给定路径，然后将输出保存到静态文件中。

根据我从你的问题中收集的内容，你还没有在角度应用程序的前端实际使用这些路径吗？ 如果是这种情况，那么我会说另一种选择是通过Spring实际渲染它们的服务器端。

这里的问题是角度不是考虑同构（客户端和服务器端渲染）。 你想在服务器端完成任何尚未构建的正确渲染，最好的选择是使用Spring来渲染它。

另一个选择是更新到Angular2，它在角度通用的帮助下是同构的。 如果Spring不用于渲染并且仅用作应用程序的API，则此选项将正常运行。

Answer 4

我没有在java中这样做但是C＃，如果你在java中使用它，请通知我：

我找到了关于phantomJs的一段代码，并且：

正如我们的朋友说的那样，我们启用了html5模式，我们使用写入引擎重写C＃中的所有URL，这是IIS的新手，我为google请求保留了一个特定的规则，它带有特定的查询参数（无法在网上找到它而不是很长时间，直到工作）。 所以我将它们重定向到这个特定的页面，我读取重定向的URL，传递它并在phantomJS上运行它，并等待结果返回（需要知道运行一个进程并收回它的控制台结果），然后，我们从应用程序中删除了ng-app属性，并将原始页面传递给google crawler（我们有两种重定向代码，其中只有一种有效，最后一次到那时，一种是永久性的，另一种是临时的）。 你自己的页面看起来很粗鲁，但谷歌只看你的架构和结构，所以一切都找到它。

很长一段时间我没有使用Java，所以我无法实现它，我只重新获得关于spring的一点知识，所以如果你在任何更新时通知我，我将不胜感激。