3

I’ve SPA (Single Page Application) project that works 100% using AngularJS, with all of it’s content dynamically generated through JavaScript on the client side! As you know this means no crawlability, and I don’t need to use headless browsers to generate HTML snapshots, I could generate it myself server side depending on the user-agent without code duplication.

I'm not trying to deceive search engines or deliver different data, but I'm trying to deliver a completely readable pages for SE with stripped down and simplified HTML layout.

My question is: if I’ve generated & delivered a different layout or HTML snapshot to search engines (but keeping the actual real data/content the same), is that considered cloaking or violates SEO in anyway?

I've read a lot of information in Google's Webmaster Help Center & other sources all over the internet without an actual accurate answer.

Improve this question
2
  • 1
    I know that Google checks sites from outside of their network for cloaking. However, what is not clear is if formatting would qualify as cloaking. I would not offer search engines something different from a user even if the content is the same just to be safe. But this is a good question. I cannot tell you if they use a checksum to compare the pages or some other kind of parser that is a bit more intelligent. I would bet on checksum since that is a traditional programming technique. I wish I had a better answer. One up-vote for the question anyway!
    – closetnoc
    Commented Dec 22, 2014 at 18:28
  • Well, at the end I've used to hack the Angular UI-Router core functionality itself to support an optional attribute, that allows me to either render AngularJS views at first load or not, and forced the serverside application to handle all incoming requests & always return response back, so that first request is always being served through the server, not the client application, while subsequent requests still works Ajaxy -if JS is enabled-, and if not it will work as well as a traditional redirect request as usual. That took time & deep investigation, but it works very nice.
    – Omranic
    Commented Jun 30, 2015 at 10:38

2 Answers 2

Reset to default
3

You need to implement crawlable AJAX.

  1. Include the meta tag <meta name="fragment" content="!">
  2. Make the HTML snapshot available at www.example.com/?_escaped_fragment_=

DO NOT base your snapshot decision on the user agent. Googlebot wants to be able to see and render your page the way that users see and render it (for screen shots for example). Serving different content based on user agent is considered cloaking.

The meta tag and the parameter is the Google approved way of providing an HTML snapshot of your single page application.

Improve this answer
2
  • This answer used to be right. Now, google has deprecated their Ajax Crawling Scheme: googlewebmastercentral.blogspot.it/2015/10/…. I've asked a question about that: webmasters.stackexchange.com/questions/86262/…
    – Mario Trucco
    Commented Oct 24, 2015 at 10:16
  • You still don't want to base your content on user agent. Google is now suggesting using history.pushState() to change the apparent URL when your AJAX updates the content on the page. Then your HTML snapshot can be served at that URL, and a visitor that starts at that URL should get that content as well.
    – Stephen Ostermiller ♦
    Commented Oct 24, 2015 at 10:22
1

I don't remember the references now, but Google doesn't mind. Actually, they do this themselves (kinda) in Angular docs. They render a different version of the HTML to Google (for example, doesn't have all the normal navigation).

Every single SEO article on the matter is about using the technique too (phantomJS crawls the site and sends the HTML result to search engine, sometimes crawling is in advance and cached to avoid latency penalty from Google).

There're even hosted/cloud services that do this for your app so you don't have to do most of the setup.

Improve this answer
3
  • Quoted from my question: and I don’t need to use headless browsers to generate HTML snapshots, I could generate it myself serverside depending on the user-agent without code duplication. (phantomjs is what we're trying to avoid for our own technical reasons)
    – Omranic
    Commented Dec 22, 2014 at 19:49
  • The Angular Docs deliver different HTML not just crawled data, whether you do it via PhantomJS or whatever is not a problem. The Angular docs site does exactly what you want to do.
    – Meligy
    Commented Dec 22, 2014 at 21:07
  • Remember that if you delivered JS generated HTMl, it is already different from the originally sent HTML, so it's the same thing, different HTML.
    – Meligy
    Commented Dec 22, 2014 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.