Geek Answers Handbook

Angular 4 and SEO

I have a simple Angular 4 project, served by Express. When I tried to load my site using the Googlebot, it just showed a blank page (innerHTML AppRoot). I thought Google stated that bots support Angular 4 / JS sites?

If this is still a problem, is server-side rendering using Angular Universal really the best solution? How should I configure another server serving the server-side rendering application, in addition to the main server serving the regular client-side application? And if so, how can I tell googlebot to go to the port for the server side application and normal HTTP traffic to go to the port for the client application? Not HTTP Tracer Traffic?

+7
seo angular express
source share
2 answers

The problem is not specific to Angular4. Any data created dynamically using javascript will first be displayed as empty, and then its contents will be loaded. I assume you are looking at the Google Page Speed ​​Index .

To find out what Google sees:

  • comment out external css
  • comment out your external js

This will be the initial google view. After that, Google will extract external files, run your javascript and display the page. Google page speed will punish you for any changed pixels above addition before and after receiving external assets.

Angular Universal (or any server-side processing, as this is not an angular problem) will solve this problem.

Hope this helps.

0
source share

i got the same problem and i found a solution for this

what I need: I need to make the page on the client side as usual, because it makes our application or website faster, but it will not help search engines get our application, and this is bad SEO

then my solution is that when a regular user tries to extract my application, download it, as usual, on the client side, but if the search engine or any bot tries to get my application, look at it first on the server side and return the page, and I did it with rendertron.

You can get the full solution from this article https://medium.com/@abdelrhman.elgreatly/angular-single-page-app-seo-friendly-using-rendertron-24592fa731b6

0
source share

More articles:


All Articles