WordPress + angularJS 路由 + SEO

Question

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

• Wordpress 可轻松管理内容。
• AngularJS 用于一些 UX(目标是没有页面重新加载 + 页面加载之间漂亮的动画)+ 其他功能。
• 并关心SEO。

为此，我使用 Angular 的 Route 模块让用户获得更流畅的体验，并使用 Angular HTML5“漂亮的 urls”模式来“ Hook ”页面切换(无 hashbang -> 自然链接)。

我不想生成 hashbang，因为它比让 Wordpress 生成内容更难维护(使用 phantom.js 服务器等的 HTML 快照)。

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

但我找不到解决此问题的清晰明了的解决方案，因为要么 Angular 方式可行，要么“PHP”方式可行。

欢迎任何想法! :)

Answer 1

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

例子:

mysite.com/my-test-page

WordPress的

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

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

然后将页面数据以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 友好:

• getseojs.com
• brombone.com
• prerender.io