Victor Karpenko from SeoProfy shares his experience as a professional: if you want to use an SEO-friendly framework, pay attention to the following frameworks:
From the above, it immediately becomes clear that at the output, we get a Single Page Application on React, which entails both an unlimited number of possibilities and advantages of this stack, as well as several pitfalls associated with the implementation of an SEO-friendly resource that can ultimately perform several tasks important for promotion in search engines, social networks, and so on:
- The search robot must see all links to the pages of the site;
- The content of each of the pages must be available for indexing by a search robot to end up in the search results;
- Page content for correct indexing should contain all the necessary elements that are important for creating an SEO-optimized site.
Pre-rendering is the process of executing the JS code after its main assembly and saving the resulting HTML copies of the rendered pages, which will later be returned from the web server upon appropriate requests. To implement this case, there are several ready-made solutions and tools with various limitations, suitable for different stacks of front-end technologies and with different levels of implementation complexity.
Of course, there are solutions like Next.Js and the like. However, they introduce several restrictions (or complications) into the main assembly configuration process and have a very noticeable impact on the application architecture. Also, there are third-party external pre-rendering services, but for a closed ecosystem, an external tool would be extremely undesirable. Why shift the responsibility area to an external tool if you can implement its functionality inside the project?
This tool allows you to launch Chromium after assembly and transfer the resulting application to it. Then go through all its pages, using the pool of links found, as a search robot would do. At the same time, HTML copies of pages rendered using JS will be saved to the selected directory, preserving the hierarchy of paths from which they were obtained relative to the project root.
An important distinguishing feature of this approach and tool is that the specific architecture of the application itself is not important for the implementation of its work since it will run your pre-assembled page in an almost ordinary browser in a standard way.
Installing React-Snap does not raise any additional questions since its package is available for download in the standard way. The React-Snap launch configuration is described in the root package.json file of the project.
As a rule, when creating HTML copies, sooner or later there will be cases in which the behavior of the application for the pre-render will have to differ from the behavior of the application in the browser of a real user.
This can apply to cases ranging from the presence of any preloaders that are not needed in HTML copies or statistical functionality that should not be performed at the stage of creating HTML copies.
The next useful knowledge will be that we need to take care of the minification of the DOM sizes that will be contained in our HTML copies since a large HTML document will take longer to load from the backend, eat up more traffic, and search robots may simply not get to the required content if, for example, you have all the styles inlined in the <head> of the document, like all SVG images in the <body>, which will inflate each of the HTML copies to huge sizes. If the logo of your resource is rendered as inline-SVG, then in the file of each HTML copy, it will be present in this form.
It is important to set up webpack in such a way that when building, all styles are added to CSS files, and replace inline-SVG with using <img> (or CSS tools) to display images. Both will be loaded and then taken from the cache browser, and the duplicated content of such resources will be absent in HTML copies.
- If you only target Google, then it is not necessary to use pre-rendering to fully index your site.
- Do not rely on third-party web services for content indexing. Especially if they don’t respond to incoming requests quickly.
- The content that you instantly insert into your HTML using Vue.js rendering is successfully indexed. But you shouldn’t use animated text.
- If different pages need different descriptions and previews of social media images, this problem needs to be solved either on the server side or by compiling static pages for each URL.
- If you want the site to be displayed not only in Google but also in other search engines, then you need to use pre-rendering.
Perhaps the above will be enough to start and relatively quickly implement an SEO-friendly site written as a Single Page Application. Further, everything will depend only on the characteristics of your particular Internet resource and the goals that you will pursue when creating it.
If you like the content, we would appreciate your support by buying us a coffee. Thank you so much for your visit and support.