Angularjs vs SEO vs pushState

问题:

After reading this thread I decided to use pushstate api in my angularjs application which is fully API-based (independent frontend and independent backend).

Here is my test site: http://huyaks.com/index.html

I created a sitemap and uploaded to google webmaster tools.

From what I can see:

google indexed the main page, indexed the dynamic navigation (cool!) but did not index any of dynamic urls. Please take a look.

I examined the example site given in the related thread:

http://html5.gingerhost.com/london

As far as I can see, when I directly access a particular page the content which is presumed to be dynamic is returned by the server therefore it's indexed. But it's impossible in my case since my application is fully dynamic.

Could you, please, advise, what's the problem in my particular case and how to fix it?

Thanks in advance.

Note: this question is about pushState way. Please do not advise me to use escaped fragment or 3-d party services like prerender.io. I'd like to figure out how to use this approach.

回答1:

Evidently Quentin didn't read the post you're referring to. The whole point of http://html5.gingerhost.com/london is that it uses pushState and proves that it doesn't require static html for the benefit of spiders.

"This site uses HTML5 wizrdry [sic] to load the 'actual content' asynchronusly [sic] to the rest of the code: this makes it faster for users, but it's still totally indexable by search engines."

Dodgy orthography aside, this demo shows that asynchronously-loaded content is indexable.

回答2:

As far as I can see, when I directly access a particular page the content which is presumed to be dynamic is returned by the server

It isn't. You are loading a blank page with some JavaScript in it, and that JavaScript immediately loads the content that should appear for that URL.

You need to have the server produce the HTML you get after running the JavaScript and not depend on the JS.

回答3:

Google does interpret Angular pages, as you can see on this quick demo page, where the title and meta description show up correctly in the search result.

It is very likely that if they interpret JS at all, they interpret it enough for thorough link analysis.

The fact that some pages are not indexed is due to the fact that Google does not index every page they analyze, even if you add it to a sitemap or submit it for indexing in webmaster tools. On the demo page, both the regular and the scope-bound link are currently not being indexed.

Update: so to answer the question specifically, there is no issue with pushState on the test site. Those pages simply do not contain value-adding content for Google. (See their general guidelines).

回答4:

Sray, I recently opened up the same question in another thread and was advised that Googlebot and Bingbot do index SPAs that use pushState. I haven't seen an example that ensures my confidence, but it's what I'm told. To then cover your bases as far as Facebook is concerned, use open graph meta tags.

I'm still not confident about pushing forward without sending HTML snippets to bots, but like you I've found no tutorial telling how to do this while using pushState or even suggesting it. But here's how I imagine it would work using Symfony2...

1. Use prerender or another service to generate static snippets of all your pages. Store them somewhere accessible by your router.

2. In your Symfony2 routing file, create a route that matches your SPA. I have a test SPA running at localhost.com/ng-test/, so my route would look like this:

   # Adding a trailing / to this route breaks it. Not sure why.
# This is also not formatting correctly in StackOverflow. This is yaml.
NgTestReroute:
----path: /ng-test/{one}/{two}/{three}/{four}
----defaults:
--------_controller: DriverSideSiteBundle:NgTest:ngTestReroute
--------'one': null
--------'two': null
--------'three': null
--------'four': null
----methods: [GET]

3. In your Symfony2 controller, check user-agent to see if it's googlebot or bingbot. You should be able to do this with the code below, and then use this list to target the bots you're interested in (http://www.searchenginedictionary.com/spider-names.shtml)...

   if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), "googlebot"))
{
// what to do
}

4. If your controller finds a match to a bot, send it the HTML snippet. Otherwise, as in the case with my AngularJS app, just send the user to the index page and Angular will correctly do the rest.

Also, has your question been answered? If it has, please select one so I and others can tell what worked for you.

HTML snippets for AngularJS app that uses pushState?