angularjs ngMeta title description is not crawling by google

Question

In my Angularjs app, I am using this https://github.com/vinaygopinath/ngMeta.

<title ng-bind="ngMeta.title"></title> <meta property="og:title" content="{{ngMeta.title}}" /> <meta property="og:description" content="{{ngMeta.description}}" /> 

My controller code is

app.controller('controller1',function($scope, $location , $http , $routeParams, ngMeta, $route){     $scope.$route = $route;     ngMeta.setTitle('site title');     ngMeta.setTag('description', 'this is description');     ngMeta.setTag('keywords', 'tag1, tsg2, tag3'); }); 

after page loads everything working fine, but google is showing {{ngMeta.description}} {{ngMeta.title}} like this any help to solve this.

Answer 1

SEO in SPA apps are not working in traditional ways. You have to tweak some code to correctly crawl your website. There are two steps two do that:

1. Add a meta tag in your head to tell the crawler that "this is a highly JS dependent site, you have to request this page differently."

Like: <meta name="fragment" content="!">

2. You have to pre-render your site (Means: make a static site if JS loaded fully and run correctly - correct title and description in head) for urls with ?_escaped_fragment_= parameter with them.

IE: If you have www.example.com, your server needs to return the pre-rendered site for requests like: www.example.com?_escaped_fragment_=

Why:

When crawler bot sees the meta tag it will request the page with ?_escaped_fragment_= parameter, thinking it will get the pre-rendered page with hard-coded {{ngMeta.title}} and {{ngMeta.description}}.

So, how to pre-render your site?

Use: https://prerender.io/ as Stepan Suvorov said or, checkout http://phantomjs.org/screen-capture.html or http://htmlunit.sourceforge.net/

Resources:

https://builtvisible.com/javascript-framework-seo/

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started