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.

Are there any errors shown in the console? Google needs to be able to execute Javascript without errors on your site to pick up the meta tags information set in Angular. If there are errors, it simply picks up the raw, un-interpolated meta content like {{ngMeta.title}} — WeNeigh, May 24 '16 at 11:58
errors like this can occur if the angular modules (any dependencies ) you using in your application is not properly loaded. — Anandapriyan S.D, Nov 10 '16 at 11:48
This question doesn't show any search effort. even in the github page, the owner itself explained about it see https://github.com/vinaygopinath/ngMeta#support-for-other-crawlers — vikas, Feb 10 '17 at 09:42
An article on "Does google execute javascript" https://www.stephanboyer.com/post/122/does-google-execute-javascript — Sangharsh, Feb 15 '17 at 07:57

Asim K T · Answer 1 · 2016-08-26T10:35:31.170

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:

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="!">

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

Is that really the way to go in 2017? Google just doesn't like the meta tags. In my case they will not be evaluated. — Hendrik, Feb 09 '17 at 09:19
Yes, Google updated their search engines for JS-heavy sites recently and we don't need this meta tag anymore. But adding meta tags won't do any harm and for engines which didn't upgraded yet still uses meta tags. — Asim K T, Feb 10 '17 at 05:40

score 4 · Answer 2 · edited Aug 26 '16 at 09:21

I was facing a similar issue with react applications for SEO.

I would suggest the best way to handle this would be to use prerendering.

I am saying this because if your Single Page Application is making API calls, google crawler does not wait for ajax calls to be finished, so technically it does not read any of your content coming through API calls. It took me few days figure this out using webmasters.

So, you can use phantomJS or prerender.io(which uses phantomjs internally). So what this does is, it parses your html file and replaces the contents of Javascript with static content, thus serving proper and full content to the bots.

Or else you can serve the page directly from backend if the page is loaded for the first time, So this also helps.

angularjs ngMeta title description is not crawling by google

2 Answers2