AngularJS for public facing sites (SEO issues)

[Daine]

Since I've been using AngularJS for a bunch of our internal products and loved it, I created an entire public website using Angular. I put most of the navigation items etc in a list in javascript instead of hard coding them in the static files. My issue right now is that google can't crawl our pages properly. I viewed our site in lynx and it's just showing:

 

SiteName.com
* {{navigation.title}}
* {{navigation.title}}
SiteName.com
* Contact Us |
* Features |
* About US |
* Privacy | 
* Terms
Copyright 2012 SiteName.com

Just wondering if anyone else ad this issue before, and how do you fix it? Only thing I can think of right now is to not use angular js anymore and just convert the pages to static html's. I really want to keep AngularJS for it but it doesn't seem like a good idea for SEO. Any thoughts?

[Peter Bacon Darwin]

You can try this:  https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

This is how AngularJS team do it with their docs pages, which are AngularJS apps.

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Ricardo Bin]

Daine,

This is a problem when using ANY dynamic markup based on javascript, despite the fact of using AngularJS or not.

Crawlers only grabs server side code, they dont render client-side code (like Lynx).

Theres not much to do in this cases. Perhaps use <span ng-bind="navigation.title"></span> to doesnt index {{expressions}}

[Daine Rose Pacariem-Trinidad]

Thanks Peter, this definitely looks like it could help! I skimmed through it a while ago, but I didn't know that this is what AngularJS does for their doc pages :) Very helpful indeed.

[Xi Shen]

Hi,

My idea is:

For the pages you want to go public and let the search engine to crawl, do no use AngularJS

For the private/non-public pages, e.g. the user profile page, use AngularJS and make sure it will not be crawled.

By making the public pages static, it will also be easier for you to use CDN to help you improve your site speed.

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
Regards，
David Shen

http://about.me/davidshen
https://twitter.com/#!/davidshen84

[Daine Rose Pacariem-Trinidad]

Hey guys,

I found a workaround for my issue more than a week ago, thanks to everyone who provided input.

What I did in the end was generate all the page content in the backend once you've hit a page -

Example: If you have a main page and you want to access mydomain.com/contact (assuming you also use angular routes to populate your ng-view):

contact.erb (the partial page you want to load) contains:

Contact Us! ABCD Company

Original Source Code:

<h2>Welcome!</h2>

<div ng-view>

//leave this blank -- content will be loaded here via ajax

</div>

New Source Code:

<h2>Welcome!</h2>

<div ng-view>

//generate contact page here

<%= // load contact.erb %>

</div>

So when it's generated and you view the source, it'll look like:

Old view source:

<h2>Welcome!</h2>

<div ng-view>

</div>

New view source:

<h2>Welcome!</h2>

<div ng-view>

     Contact Us! ABCD Company

</div>

...the output will still be the same, except that if you visit the page on lynx or other non-javascript browsers, you'll see the same thing.

Angular routing will still load the contact page, so with the new code, your "Contact Us! ABCD Company" will get replaced by "Contact Us! ABCD Company" -- but the good thing is when you click on other links, it doesn't need to reload the whole page. In this case, you still get to keep Angular JS features!

_____________________________________

Daine "Rose" Pacariem-Trinidad

Web Software Developer

http://piglovescow.com - Personal & Photo blog

http://compilesource.com/ - Tech / Developer blog

Victoria, BC

+1 778 977 2193

[Alec Taylor]

Also just wanted to give a suggestion:

Maybe the use of node.js server-side would render the javascript to
the crawler/viewer in a way which appears static.

Thoughts?

[mlegenhausen]

I would follow the way Peter suggests. Use the technologie which gives the best user experience and not what the search engine wants. If you work with node.js you can use something like https://github.com/OptimalBits/Crawlme which uses Zombie.js to generate a static version of your website.

[Steve OConnor]

Good replies, thanks for heads up - most helpful.

Totally optimistic wishful thinking (on my part perhaps), but I am guessing that google will be able to recognise angular content in the near future, and intelligently crawl such apps in ways we haven't really thought out yet.

Longer term (more wishful thinking), I am also guessing that Web 3.0 or whatever you want to call it, will be based on an evolved HTML standard to drive single page apps. It will look a lot like Angluar as well. So during the interim period, we are going to live with numerous SEO brainteasers during the transition. Small price to pay though.

[Christoph Burgdorf]

I wrote a simple grunt task to make fetching html snapshots an easy build step

https://github.com/cburgdorf/grunt-html-snapshot

[Alec Taylor]

Thanks all for your helpful suggestions.

I have noticed the EmberJS project has server side rendering
functionality. Is this in the AngularJS roadmap?

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.

> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.

>
> To post to this group, send email to ang...@googlegroups.com.

> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[Chris Haines]

Worth checking out this article:

http://www.yearofmoo.com/2012/11/angularjs-and-seo.html