First of all, if you want to remember the basics of Javascript SEO , you can read Gökhan's article from our team. While we use Google's own free resources for auditing, the Developer Tools built into Chrome will be one of the most useful tools for us.
Let's examine the JS SEO Audit studies under subheadings;
Whether Content Is Visible When JS Is Disabled
You can test that the main content with product images, comments, reviews or product features on the pages are visible when JS is turned off. In the news detail below, you can see that the content is fully employment database visible when JS is turned on and when JS is turned off and the page is refreshed;
I use the Quick Javascript Switcher plugin to quickly disable JS .
Rendered HTML
We disabled JS in the subheading above, now let's enable JS on the page again. After making sure that CSS or JS is not blocking the page, let's refresh the page. Then right-click anywhere on the page in the Chrome browser and select inspect element .
After copying the entire code on the page, you can throw it into the rich results testing tool and test whether the content looks correct;
Meta Tags & Structured Data
It is necessary to test whether basic SEO elements such as noindex, canonical and meta description are visible to Googlebot on the page written with JS. If Googlebot can easily see these elements, you do not need to make any developments on meta tags.
Similarly, you should also make sure that the schema types you use on the pages, such as NewsArticle, are visible.
Hidden Content
In some cases, hidden content can be found on sites written with any JS Framework. For example, users can only see images or a portion of the content on the page, while more text can be shown to Googlebot in the RAW version. You can identify such situations and prioritize them highly in your to-do list.
An example page that users see;
When we look at the source code, there is a font-size hiding;
Remember, hidden content is against the quality guidelines . I wanted to mention this example as a similar hiding example can be done with JS.
Images
Usually, there can be more than one image for a product on e-commerce sites. In some cases, only the featured images are specified with the “img src” attribute, while images in the 2nd or later rows may not be indexed by Googlebot because they are not specified as “img src”.
It would be useful to specify images with the src attribute in Raw HTML.
Enabling JS Rendering in SEO Tools
In order to automate the JS Audit work a little more and see the problems most clearly, we need to get help from SEO tools. In order to do this with Screaming Frog, you need to turn on this setting in the Configuration > Rendering settings. Then the tool will start scanning the site according to your PC specifications.
You can turn on this setting before starting the scan in Deepcrawl;
You can start the JS Crawl process after opening the “Show Extra Settings” section in Oncrawl.
Finally, you need to activate this setting when auditing with CognitiveSEO;
You can also quickly complete audit processes and create your tasks with SEO tools.
Robots.txt Controls
You can easily detect with DevTools whether the .js files that you have blocked from crawling with the robots.txt file (if any) are effective in creating the page.