0

I'm trying to figure out what's the best way it is to make an angularJS web app SEO friendly.

I've read this How do search engines deal with AngularJS applications?

and it recommend using: <meta name="fragment" content="!"> as my web app is using html5mode.

The website runs good when accessing the root url / and browse normally to the other areas, but as soon as I reload/refresh the website (when I'm not in the root url) it returns url not found Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Right now, what I understand is that using this trick, google will be able to crawl the website normally? I also added a tried creating a sitemap using this third party website https://www.xml-sitemaps.com/ but returned with only one url (the root url).

My website doesn't have a server like node, it's just plain angularJS.

What is the correct way to fix all this?

Thanks!

Community
  • 1
  • 1
Johhan Santana
  • 2,336
  • 5
  • 33
  • 61
  • Google has updated their crawling specs regarding ajax driven sites. Suggest reading most current. 3 year old information is no longer accurate – charlietfl Jan 24 '16 at 22:09

2 Answers2

1

Basically, what you have to do is tell to Google what's the content of the page its is seeing. For example, if you have this URL #/services, Google just knows the main page, which is example.com, because an AngularJS is a simple one page. The routes are manipulated by AngularJS through javascript.

So, if you use html5mode, you'll have a nicer URLs, like this: /services, but for google, it's still the same thing.

The solution is to redirect Google to a static content. You can do that manually, but it's painful.

I recommend you this service: https://prerender.io/. I use it for all of my websites I have made in AngularJS. This service renders each page you have in AngularJS for you, and though .htaccess you redirect Google to this service.

Giuliano
  • 129
  • 8
  • I see, that's using express, my website doesn't have any backend whatsoever, it's just plain angularjs. How do I configure it? They just say `npm install prerender-node --save` but that just downloads a bunch of node_modules and I'm not sure what to do after :( – Johhan Santana Jan 25 '16 at 14:28
0

There is no purpose in getting your site indexed by search engines when you visitors will receive a 404 error when they land on any url other than the base url. So the very first thing would be to send all http requests to that one file which executes your AngularJS app, in most cases the index.php. You could accomplish this by adding the following to your .htaccess file:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)/$ $1 [R=301,L]
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Now, according to Google itself, you have everything in place to get indexed. I ran a few tests some months ago to see if an AngularJS app could get indexed without any fallback. And it did, as long as it shows up as expected and without errors in Google Web Mastertools -> Crawl as Google, it will get indexed properly.

Frankey
  • 3,679
  • 28
  • 25