Google and Yandex SEO optimization for SPA applications

Google and Yandex SEO optimization for SPA applications

Both search engines claim that they can already do something about indexing SPA applications. The article presents the results of the conducted experiment on the indexing of a pure SPA website.

The result: Google is good, Yandex is not so good.

SPA

SPA programs receive data and display them on the page asynchronously, through AJAX requests. Therefore, in order to index such sites, a search engine must understand JavaScript and load and process not only the main HTML page, as it has done for many years, but also related resources.

This requires much more effort on the part of the search engine (orders of magnitude more than normal html parsing) due to the need to run a virtual browser for each such page. Therefore, this technique was not available for a very long time, and because of this, sites seeking to be indexed had to use workarounds, such as:

  • SSG

  • Prerendering

  • SSR (with Node.js and hydration – Nuxt, Next.js, etc.)

  • A separate lightweight version of the site for search engines with server-side content generation and a human SPA

  • Normal server generation (PHP, etc.)

The main reason to make sites as hybrid SSR is the requirement to have SEO. Developing SPA programs is much easier, more comfortable (DX), they are supported and expanded, their development is cheaper and faster. Therefore, SEO optimization is a long-standing pain of front-end development.

In order to check the current state of affairs with search engines in terms of understanding JavaScript when indexing pages, two experiments were conducted. The first with a bare JavaScript page and requests for fetch()and the second is a simple Vue app.

Despite the rather optimistic results, it should be noted that, for example, my working (not so elementary) Vue 3 project is not indexed on Google, that is, the success of all this depends, of course, on the logic of the program, and also, probably, on the libraries used.

Vanilla JavaScript

Page code – https://github.com/vuesence/spa-seo/blob/main/public/vanilla-js.html

Unique phrases were successively added to the body of the page (so that they could then be searched for in the search engine) – in the script of the page itself, after the event DOMContentLoadedand also after the data is returned by the function fetch() for the first and second cases.

The page itself is https://vuesence.github.io/spa-seo/vanilla-js.html

Google

Displayed the page correctly in Live test preview:

A few hours later, I showed it in the rendering results, and with the correct title (it was also set dynamically) and a full description in the snippet:

Yandex

With an explicit indication to render via JavaScript, the screenshot of the page correctly showed:

The indexing was also successful, but the title is static.

Vue app

Simple Vue 3 apps with vue-router and three pages. Project repository – https://github.com/vuesence/spa-seo/

In the method onMounted() home page component via fetch() the data is taken from https://jsonplaceholder.typicode.com/ and then added to the html template.

Google

Live preview is displayed correctly:

The generated HTML code also contains all the required text. In a few hours, the site appeared in the output results:

Yandex

Live preview has a white sheet. The search results are empty, although it is indicated that the robot has already bypassed these pages.

Conclusions

It is necessary to check the work of other front-end frameworks and each application individually, but the support for SPA indexing in Google is already at a very decent level. Yandex does not.

In the English-speaking segment of the Internet, when relying on Google, the use of SSR becomes optional.

Open graph

Another factor of using generation on the server is its open graph meta-tags for each page for building snippets by Facebook, Telegram and other social networks. Unfortunately, they do not understand JavaScript from the word “at all”, so if necessary, they will have to use applied logic on the frontend server.

However, generate and insert several lines into the head the html section of the page is much simpler and is fully implemented with one script in Python, PHP instead of raising the server on Node.js.

Well, once again, we can advise you to use two versions of the site – SPA for people, and with simple server generation – for search robots. They allow it.


Learn interesting and useful information about Vue.js and frontend in general, as well as learn the framework from the translation of the best tutorial on this topic «Vue.js 3 – Design Patterns and Best Practices» can be found on our website: Vue-FAQ.org.

Also visit our Telegram channel: https://t.me/vuefaq


If you look events in Mykolaiv – https://city-afisha.com/afisha/

Related posts