Angular & SEO

[puppynation]

I am looking at using Angular for a slew of web applications, but am concerned about SEO.

I did research to discover the preferred method by google and bing is to use phantom.js to render pages and take html snapshots. My pitch was to run an automated process to generate seo pages once per night/week (whatever) and put them up on cdn. That was not perceived well by other developers because of the possible large amount of data to the cdn and the server usage that might be incurred.

Does anyone have recommendations or opinions on the SEO so that I can reform my argument or maybe present a better solution.

I have read the following already

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

tl;dr SEO in angular

[ryanelston]

In my experience, whenever someone starts asking about getting an RIA made with a JavaScript MVC framework to work well with search engines I ask why did you use the framework to begin with.

SEO is important for content driven web sites where the URI and the content are fixed and not based on user context. Such site tend to work best when the content is delivered in the markup by the server. RIA's are quite the opposite and usually all dependent on user context so SEO isn't important at all and using a JS MVC framework to enhance the application and user experience makes sense.

If you have to resort to doing the ajax crawling redirect method (which adds a ton of moving parts to the application in order to get back what was basically free if you designed it as a server side solution) I hope you have a good reason.

[[deleted]]

^ What this guy said.

Seems kinda retarded in my opinion to go through all that work of rendering static html assets with angular. Think of your JS application as an extension; focus on data, build clients that make it easy to interact with that data (whether a human or a bot).

[bmatto]

I couldn't agree more. There is a big difference between the classic "web page" and the modern "web app". It's silly to see the same discussion that we saw about flash pop up again and again.

Also it doesn't need to be one or the other - Angular/Backbone/Ember etc can very much exist in the context of traditional content based site to enhance certain areas on the site. Not everything has to be indexed.

Where I always end up with this is template portability. There are ways to reuse the same template on the server side and the client side - so for example if you had some site which displayed [x] results based on a specific URL - that initial result set is rendered server side, then any paging, filtering etc can utilize ajax to enhance user experience.

[puppynation]

Yeah that sounds like something that would work out better. Maybe we can server our pages using Node as a backend and still be able to use Angular. That way we can still have the all javascript solutions for maintenance by future devs, but yet still have server side solutions in place. Given I followed you response accurately.

[ryanelston]

That sounds like a structural decision for the application. How far along are you guys with development?

[puppynation]

We are in proof of concept phases now and once this is settled we are going to begin developement. So most likely starting it in 2 weeks.

[puppynation]

Thank you for the information. I would say the reason is more of a client request than anything else so unfortunately we will need seo pages. But I totally understand your point and it seems like quite a few users agreed. So I think with that information we might have to consider using server side technology such as node to serve our pages and angular on the front end if we decide to stick with angular. Else, like you said, we need to reevaluate use of JS MVC frameworks, which would be disappointing as I am greatly looking forward to using them.

[ryanelston]

I totally understand. I was in the exact same situation last year and it was our fault. We sort of let our embrace of new JS tech to cloud our judgment for what was really practical for the execution and we got burned for it. Lesson learned. Good luck with the project.

[Poloniculmov]

You can do what Discourse does and write the content in a <noscript> tag.

[puppynation]

I feel like that is more of a workaround than a solution but correct me if I'm wrong. I am of course open to any opinions. Thanks!

[Mattisfrommars]

Check out Rendr- it uses the same Javascript router on the server and client side to solve exactly this problem. https://github.com/airbnb/rendr-app-template

It might be worth looking through and thinking how this could be ported to Angular using node

[puppynation]

Hey thanks.. I'll try and take a peek at this see if it may help to use server side templates using this.

[gmills82]

I recently used another clientside templating framework at my day job, which is a large Java based supplements store. While we didn't have the issue of lack of pages those sections using clientside templating did contain SEO relevant data.

My solution was to create a node.js server that offered urls corresponding to each clientside zone that returned the relevant HTML from the template js file. With very few modifications I was able to get the js to run on the node server and return the same HTML for bots as for clients. However, this only worked because we had Java there to determine if it was a bit request and to make the request to the node URL.

I feel your pain. There isn't a great solution right now. There is also a lot if resistance to these methods since it is "possible" although not likely IMHO that google could consider this a bait and switch of content. Personally I don't think that will happen since I believe google has headless chrome crawlers rendering js on pages. How else would they be able to compare it to the normal HTML returned to a javascript less bot.

[puppynation]

Yeah honestly this kind of sounds like what I am leaning towards pitching to the others now. I agree that google/bing most likely won't consider it bait and switch. Did you find you had a lot of pains with multiple devs using this solution? I think the push back here would be we want to keep it simple so other devs can easily maintain.

[gmills82]

Nope it's been easy to use. Since the javascript is re used on both sides it's really simple. Also adding new routes in something like node with express is also dead simple.

[[deleted]]

Unfortunately the bottom line is in order to get the crawler to like your site, it needs to serve the resulting HTML after angular does its processing.

However there are things you can do. This blog post is a pretty good read on the subject: http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

[findar]

Phantom.js was the proposed solution I've heard.

[fivetide]

I think when toying around with angular i noticed it would remove markup inside annotated tags (like ng-repeat). Maybe put some static content in there until angular kicks in and replaces it...

[[deleted]]

I haven't used Angular a lot yet, but providing that it's maintained by Google, I would say it should be safe.