Wordpress + angularJS 路由 + SEO答案

【问题标题】：Wordpress + angularJS route + SEOWordpress + angularJS 路由 + SEO
【发布时间】：2014-07-22 15:53:00
【问题描述】：

我目前正在进行一个我想拥有的项目：

Wordpress 便于内容管理。
AngularJS 用于一些 UX（目标是没有页面重新加载 + 页面加载之间的漂亮动画）+ 更多功能。
并关心 SEO。

为此，我使用 Angular 的 Route 模块为用户提供更流畅的体验，并使用 Angular HTML5“漂亮网址”模式“挂钩”页面切换（无 hashbang -> 自然链接）。

我不想生成 hashbang，因为它更难维护（使用 phantom.js 服务器等的 HTML 快照），而不是让 Wordpress 生成内容，因为他做得很好。

所以我的意图是让 angularJS 控制用户的导航，让 wordpress 在用户 F5 和 SEO 机器人（无 JS）时生成内容。

但我无法找到一个清晰明了的解决方案，因为无论是 Angular 方式，还是“PHP”方式都可以。

欢迎任何想法！ :)

【问题讨论】：

标签： wordpress angularjs seo

【解决方案1】：

Wordpress 已经为您提供了用于 AJAX 请求的 wp_ajax_ 钩子。 (link)

例子：

mysite.com/my-test-page

WordPress

在这个简单的例子中，我们需要我们的 wp_ajax_ 钩子来通过它的 slug 检索页面。

一种简单的方法是使用get_page_by_path($page_path, $output, $post_type)，获取我们想要的页面，其中$page_path 是 slug。

然后将页面数据返回为JSON，return json_encode($pageArray);

AngularJS

路线：做一个简单的 GET：

.when('/:page_slug', {
    templateUrl: 'views/page.html',
    controller: 'PageController',
    resolve: {
      page : function($route) {
        return $http.get(wp_ajax_url, 
                          {
                          'action': 'the_ajax_hook', 
                          'data': $route.current.params.page_slug
                          }
                        );
     }
    }
  })

搜索引擎优化

Google 最近宣布他们正在更新网站管理员工具，以向您展示 Javascript 生成的网站如何呈现，并为您提供有关如何使您的网站可抓取的提示。

http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html

除此之外，您现在还可以使用其他服务来使您的网站对 SEO 友好：

【讨论】：

好答案。尽管在将这种逻辑应用于更复杂的查询时，我在使用这种方法时遇到了困难，即当 slug 不代表页面，而是帖子、类别等时。例如在上面的例子中，你如何为get_page_by_path() 设置正确的$post_type 给定一个恰好代表post 的page_slug。我想这需要来自 WordPress 中 parse_request() 的更多信息。
@PimSchaaf 最好的选择是使用 ID 而不是 slug，对于更复杂的查询，例如类别、分页等，您可以在 http 数据中添加更多参数。前任。 { 'action': 'the_ajax_hook', 'data': {type: 'category', id: 23} } .. 或发帖。 { 'action': 'the_ajax_hook', 'data': {type: 'post', id: 897} }在你的php中你可以相应地返回。
您尝试过 REST 方法吗？ IE。 wordpress.org/plugins/json-rest-api 这样可以更轻松地与 Angular + Restangular 一起使用。
感谢您的建议@Ervald！很好的提示。