Wordpress + angularJS路线+ SEO

Question

我目前正在进行一个我想要的项目:

• Wordpress易于内容管理.
• AngularJS用于某些UX(目标是在页面加载之间没有页面重新加载+漂亮的动画)+更多功能.
• 关心SEO.

为此,我使用Angular的Route模块让用户获得更流畅的体验,并使用Angular HTML5"漂亮网址"模式来"挂钩"页面切换(No hashbang - > natural links).

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

所以我的目的是让angularJS控制用户的导航,而wordpress在用户将F5和SEO机器人(No JS)时生成内容.

但是我无法找到一个干净清晰的解决方案来解决这个问题,因为无论是Angular方式都可行,或者"PHP"方式都可行.

任何想法都将受到欢迎!:)

Answer 1

Wordpress 已经为您提供了用于 AJAX 请求的wp_ajax_挂钩。（关联）

例子：

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 友好：

• geteojs.com
• brombone.com
• 预渲染io