document best practice for providing translated snapshots for search engines

[lanterndev]

Just starting to look into how to take snapshots of my site in all supported languages so I can make them available to search engines.

It looks like https://github.com/cburgdorf/grunt-html-snapshot could be the thing to use here. I think it would just require setting up angular-translate to read the locale from the location fragment, and then it's just a matter of adding <meta name="fragment" content="!"> as documented at
http://docs.angularjs.org/guide/dev_guide.services.$location#crawlingyourapp.

Please let me know if I'm on the right track, and if desired I'll be happy to document my findings here as I continue to work on this.

Thanks for the great work on angular-translate!

[knalli]

Short, more later: so you know
http://www.yearofmoo.com/2012/11/angularjs-and-seo.html ?

[0x-r4bbit]

I think we should ask the awesome @cburgdorf what he thinks about that. So,
Chris?

[cburgdorf]

Ok, as my wife turned 30 just today, I'm faced with some time constraints. So here is the quick and dirty guide on what to do:

1. setup grunt-html-snapshot to create snapshots of all pages of your site. Currently you need to list each page that should be saved (as it can be seen here: https://github.com/cburgdorf/couch-website/blob/master/Gruntfile.js#L16) With a future improvement of the grunt task, the task could spider the site itself to figure out all pages to take snapshots from. (Patches anyone?)
2. Make sure 1.) is part of your release step and the snapshots are stored among all the other files that usually go into your dist folder. We currently save all snapshots into the root level of our dist folder so that we have files like snapshot____de-de_about.html directly placed next to the index.html file.

See: https://github.com/cburgdorf/couch-website/blob/release/snapshot____de-de_about.html

3.Then configure your webserver to spit out those templates according to the hashbang spec. E.g. www.mypage.com/#/foo will be requested from your server as www.mypage.com/?_escaped_fragment_=/foo. So just configure your webserver to hand out the correct snapshot when it sees such a request.

1. Also add <meta name="fragment" content="!"> so for pages that don't have a hashbang in it's URL but still depend on client side js to be functional. That's usually the root page of your side. With this meta tag we make sure that the google also requests www.mypage.com as www.mypage.com?/_escaped_fragment_= even so it has no hashbang itself.

Hope that helps.

[0x-r4bbit]

Thanks for you input Chris!

[0x-r4bbit]

Maybe I'm wrong, but it looks like there's nothing angular-translate can really do to help out there, right? Isn't it more an application-level thing, where the app has to figure out which language should be used and then tell angular-translate about it?

So my actual question, with the given construct and tips @cburgdorf gave us here, is it possible to generate these snapshots in different languages using angular-translate or not? And if not, is there anything you need from angular-translate to get this working? If so, lemme know so I can implement what you need and make it a feature in 1.0 release.

[cburgdorf]

I must agree that I don't see how angular-translate could help here. The different languages should be accessible via URL (e.g. mySite.com/en/foo vs mySite.com/de/foo) and then be saved via grunt-html-snapshot individually (e.g. https://github.com/cburgdorf/couch-website/blob/master/Gruntfile.js#L16).

[0x-r4bbit]

This is exactly what I thought too! So I will close this for now. We can reopen this one, if needed. @Skivvies nevertheless, keep us up-to-date with your experiences!