Resolving SEO Issues With Angular JS – How Can You Do That?

What is AngularJS?

AngularJS like just about every javascript MVC Frameworks changes the content structure of your html rendering which then often becomes incompatible with indexing in search engines.

Fortunately, AngularJS can work around the problem and be able to do SEO using a URL routing and a ‘headless brower’ that retrieves the html code for you.

Use AngularJS according to W3C and SEO recommendations

AngularJS is a treat for any small and medium sized Web Application creation. By that I mean, sets of web interfaces where the user is asked to participate in the filling of content via fields, lists, buttons, etc.

The principle is to take the useful content out of the HTML and put it in a JavaScript scope to manipulate it more easily and sprinkle the reference HTML to this scope of content. The advantage is that the content has its own life, and is no longer fixed in the HTML and especially any content update in the JavaScript causes its update in HTML, very practical.

The other side of the coin is that the HTML source that search engines use for SEO no longer resembles a set of variables, and the tags and HTML attributes that are encountered make any W3C validator pale.

Here we go for a tutorial explaining how to make the W3C happy so that you can correctly implement your SEO recommendations with AngularJS.

AngularJS for interactive content

Building your website entirely with AngularJS, while its purpose is to present content to the visitor and search engines is the best way to make a beautiful site not found.

However, sprinkling a website of various mechanisms provided by the AngularJS library on forms or extensible content is a breeze and does not hinder good SEO and good HTML practices, provided you follow the guidelines that will provide you this article.

What is wrong?

You will notice by changing the page via the buttons that your urls all contain #. This means that you have not changed pages because everything following this character is not interpreted by the search engines. The whole of your site in the eyes of Google comes down to a single HTML page… empty…

We also added some JavaScript code to link the url change to the page state, ie if you manually change the url of your address bar to another existing page it will be displayed allowing you to at least share urls with # with your friends and they can still arrive on the right page.

Two things to do to make this SEO friendly.

  • It only takes the addresses to contain #, but it is real searchable addresses if I go on it.
  • It is necessary that by going to each address directly, there is an initial source code in “response” to the “request” server which can be indexed by search engines.

It is then that the JavaScript code will be analyzed and the AngularJS pushState will be activated to allow the users to change the address dynamically (without reloading the page, ie without request / response) and to load them. content.

The ng- * become data-ng- *

What is wrong?

The voice of the W3C is not praying and you will receive the following remonstrances:

  • Error: Attribute ng-app not allowed on element div at this point.
  • Error: Attribute ng-model not allowed on this input.
    because effectively it is not possible to invent its own attributes in HTML5 unless prefixed by data-.

Name change

If your application allowed someone to change the name and validate this server side in a database, he would see his change in real time, but search engines by displaying the page from that moment could index the new name for the story.

What is wrong?

The problem here is that the following code <unknown-markup-directive> </ unknown-markup-directive> does not pass validation because it is not allowed in HTML to invent its own tags.

However, the use of directives being very practical it is interesting to know that it is also possible to use them as an attribute name or class name.

How it works?

When a search engine displays one of the three pages, it is indexed via URLs with the content already present on it in the source of the “response”.

When a user displays one of the three pages, its original content is hidden and app.js makes the application run by loading the correct content according to the url.

After that, each time the user changes pages, his page will not be reloaded (the initial source code will always be the one of the landing page) but his address bar will change and AngularJS will update the content.

If it refreshes the page from another URL after navigating through several pages, the new page will be loaded from the “response” and the cycle will start again.

This mechanism is of course possible with the official routing of AngularJS with $ routeProvider and you are free to use the back-end technology of your choice to display the correct source content behind each URL of your site in return for the “response” .

On a presentation site made with NodeAtlas, arriving by one of its URLs:

  • https://www.lesieur.name/bienvenue/
  • https://www.lesieur.name/bepo/
  • https://www.lesieur.name/a-propos/
  • Etc.

The source code of the “response” will be only that of the open tab. All the contents of the other tabs will be loaded later via asynchronous requests.

By changing the tab, the address will change but not the source code (the page will not be reloaded; there will be no more “request / response”).

If you reload the page from another URL than the arrival one, then a “request / response” will be made with only the content of this page, and the rest will come by asynchronous content, etc.

In conclusion

Search engines still need to see the content and elements of the page in the source code to guarantee that it will be indexed correctly. With an assistance of an SEO agency and a web development company, you can get an essential or basic required knowledge. One current solution is to consider using a pre-rendering platform, such as Prerender.io. This is middleware that will crawl your web page, execute all javascript files, and host a cached version of your Angular pages on their content delivery network (CDN). When a request is received from a search engine bot it will show them the cached version, while the non-bot visitor will be shown the Angular page.
This may sound like cloaking, but Google has confirmed that it is not. It has also been stated by Google that as long as your intent is to improve user experience, and the content that’s available to the visitors is the same as what’s presented to Googlebot, you will not be penalized.
You can correctly implement your SEO recommendations with AngularJS.

by Junaid Ali Qureshi from Progostech

Leave a Reply

Your email address will not be published. Required fields are marked *