Wordpress + angularJS route + SEO

Question

I'm currently on a project where I want to have :

• Wordpress for easy content managment.
• AngularJS for some UX (the goal is to have no page reload + nice animation between pages loading) + further functionalities.
• And care about the SEO.

In that purpose, I'm using Angular's Route module to get the user a smoother experience, and using the Angular HTML5 "pretty urls" mode to "hook" the page switching (No hashbang -> natural links).

I don't want to generate hashbangs because it's more difficult to maintain (HTML snapshots with phantom.js server etc...) than just leaving Wordpress generate the content as he does it well.

So my intention was to let angularJS controls the user's navigation, and wordpress to generate the content when user will F5 & for the SEO bots(No JS).

But I can't find a clean & clear solution to this problem because either the Angular way will work, either the "PHP" way will work.

Any ideas will be welcome ! :)

Answer 1

Wordpress already provides you with wp_ajax_ hook for AJAX requests. ( link)

Example:

mysite.com/my-test-page

Wordpress

In this simple case we need our wp_ajax_ hook to retrieve a page by it's slug.

One easy way is to use get_page_by_path($page_path, $output, $post_type), to get the page we want where $page_path is the slug.

Then return the page data as JSON, return json_encode($pageArray);

---

AngularJS

Route: Do a simple 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
                          }
                        );
     }
    }
  })

---

SEO

Google recently announced they are updating the Webmaster Tools to show you how a Javascript generated site renders and provide you with tips on how to make your site crawl-able.

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

Apart from that you can use other services to make your site SEO-friendly today:

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