What is AngularJS?
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 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…
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.
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-.
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:
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.
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