I have a single page application setup in Angular with HTML5 mode on the routing. An
ng-view in my
index.html is populated based on the URL like so:
Google should now go to
views/portfolio.html and be able to read all that content right?
That's what should happen according to those articles I've read. This one in particular explains it in detail regarding Angular: https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html
Here's the problem. When I use Google Webmaster Tools and the
Fetch and Render functionality to see how Google sees my pages, it doesn't render the JS and just shows the initial HTML in my
Is it working? Have I done something wrong? How can I test it?
Best How To :
So as I mentioned in the comments, hopefully this answer gives more context of what I mean.
So when you do your declaration of
html5Mode, also include the
Then, in your
<head>, include this tag:
<meta name="fragment" content="!">
What happens here is that you are providing a fallback measure for the History API, meaning for all users visiting with compliant browsers (basically everything nowadays) they will see this:
And only on dinosaur browsers like IE9 would they see this:
Now, that is in real life with actual people as visitors. You asked specifically about being indexed by Google, which uses bots. They will try to go to
example.com/home/ as an actual destination on your server (meaning
/home/index.html), which obviously doesn't exist. By providing the
<meta> tag above, you have provided the hint to the bot to instead go to an
?_escaped_fragment version of the site (like
index.html?_escaped_fragment=home) and associated it with that URL of
/home/ in the actual Google searches.
It is entirely on the backend, all visitors to your site will still see the clean URL, and is only necessary because under the hood Angular uses location.hash, which is not seen on server-side. Bottom line, your actual users will be unaffected and not have the ugly URL, unless they're on a browser that does not support the History API. For those users, all you've done is make the site start working for them (as before it would have been broken).
Hope this helps!
Since you are using a MEAN stack, you can also go a different direction which has been around a long time, which is to use HTML snapshots. There are npms that will provide snapshots (meaning static HTML from post-render) that can be served up from your server at the locations shown. That technique is a little outdated, but its been around since like 2012 and is proven to work.
Back when I did it, i used grunt-html-snapshot, but there are others out there. You can even use PhantomJS to make the snapshots, although I never did it.