Generate static SEO pages for AngularJS + Spring MVC website

Question

I have a project using Spring MVC + AngularJS. All the data is dynamic. Have some big database of locations in this app.

For SEO purposes, need to generate a s

Answer 1

Actually it's my Angular/SEO experience.
You have to made lots of changes!!

---

1) Removing # from url

app.config(['$locationProvider', function ($locationProvider) {

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

}]);

---

2) Review your MVC Routing

Till now maybe you had one HomeController for returning index.cshtml and booting up your Angular App.
After removing # from Angular routing, you have to set MapRoute for all of your routes.
Because in this situation the first time you try to visit routes like www.site.com/any_route Angular App not loaded yet so it tries to get page from MVC Routing. But after that $routeProvider do its duties.

---

3) Use MVC variables for meta tags

For better indexing and being friend with crawlers and bots we have to use MVC variables for initializing website meta tags.
If you set your page title by Angular bindings like whenever you want to share your page through social networks you will see {{title}} because social networks can't render sites.

---

4) Replace Angular binding for meta tags

Our app is SPA, so after loading Angular we are out of MVC playground. We have to replace Angular variables with MVC variables.

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) use JSON-lD for dynamic contents

If you are familiar with SCHEMA.org you better to use JSON-LD instead of others, because search engines bots can catch and analyse s that inserted dynamically after page loaded.
You have to check Schema Dictionary to find the type that is most closer to your data structure.
For example it's my company json-ld: