Using Chrome DevTools For Troubleshooting - Semalt Prompts
Chrome DevTools isn't something that's alien to most SEO professionals. To сlients, on the other hand, it may be one of those things your yet to learn. Well, at Semalt, part of our process in serving our client's SEO needs relies on our way of educating you on necessary aspects of what your website needs.
Chrome Dev Tools for SEO is important as we use it in troubleshooting. To enable easy communication between Semalt and our clients, we would like to show you how we use this tool to fix SEO issues on your website.
With Chrome Dev Tools, we can locate underlying SEO issues ranging from the crawlabiltiy of a website to its performance. In this article, we will be highlighting three ways we use these tools to serve our clients better.
What Is Chrome DevTools?
DevTools or Chrome DevTools in full is a set of web developer aid tools that are built directly into the Chrome browser. We use these tools in editing pages on the fly and diagnose problems promptly. That helps us build better websites for our clients, but we can do so faster and ensure that they are perfect.
We can all agree to a great degree that Google Chrome is one of the most important toolkits in the arsenal of any SEO pro. Regardless of the SEO software you use to automate audits or diagnose SEO issues at scale, Chrome DevTools remains a must-have. Thanks to its ability to provide crucial ways to check SEO issues on the fly, many SEO professionals, including Semalt, have used it time and time again.
We could spend more time discussing the many ways Chrome DevTools can help professionals and web developers, but our attention is on something a bit more specific. Here, we want to be sharing with you a couple of different cases where we've relied on Chrome DevTools to figure and rectify a problem.
Here are three situations that having Chrome DevTools wouldn't be a bad idea:
- When troubleshooting site performance.
- To double-check how Google understands your site.
- To spot-check crawl errors.
Setting Up Chrome DevTools For Troubleshooting
The chances are that you've never tried using Chrome DevTools. Well, accessing it is as simple as clicking on a website on SERP and clicking an inspect button. As SEO professionals, we have to be more careful than that, but you have the idea of how it's used. At Semalt, we use both the Element plane, which allows us to observe the DOM, and the CSS, which enables a few other different tools in the console drawer.
We will be taking you a step by step process of how this tool is used in SEO troubleshooting.
To get started, you should right-click and then select inspect. By default, you will see the element panel appear, and this gives you a glimpse of the DOM and the nature of the style sheet used in constructing the page.
Having this view offers us plenty of things to dive into; however, we enable the console drawer to take full advantage of the toolkit.
Click on the dots that appear next to the settings icon and scroll down till we come across the Show console drawer option. Alternatively, we simply click on the escape key.
With the console and the element panel enabled, users can get a glimpse of the code that has been rendered in the DOM. Users will also see the style sheets that have been used to paint the code in the browser. As well as several other tools you have access to from the console drawer.
Instead, here are three additional tools we will be looking at:
- Network conditions
To find these tools, select more tools and select each of these three items so that they appear as tabs in the console drawer. After we've enabled these three panels, we can begin troubleshooting.
Switching The User Agent In DevTools
Switching User-Agent is one of the most overlooked ways to use DevTools. This is a simple test that has helped us uncover several different issues as it provides insight into how Googlebot is seeing and processing the information features on a site.
For our team of investigative SEO professionals, DevTools is used as a worthy and trusted magnifying glass, allowing us to Zoom in on issues in a website to not only prevent such issues from developing but to also uncover the root causes of such issues.
How Can You Switch Your User Agent On Chrome DevTools?
When switching your user-agent in Chrome, you will need to use the network conditions tab in your console drawer. To do this, you uncheck select automatically, which allows you to view the content using Googlebot smartphone, Bingbot, or a number of other user agents to see how your content is delivered.
In an event where Google isn't showing the updated title tag or meta description in SERP, no doubt the owner of such a website will be worried. Understanding why Google has chosen to use a completely different title tag or failed to update the tag is important in ensuring that the changes you've made are implemented.
Using Chrom DevTool For A Case Of Mobile Alternate Site
In a similar case, after switching the user agent to Googlebot smartphone, we discovered that the site was still serving an alternate mobile site to Googlebot. But because Google had already made the switch to mobile-first indexing, it processed and indexed the changes on the mobile site but failed to catch the updates that had been made to the desktop version of the Domain.
You may assume that mobile sites are some relic, but they indeed still exist.
Using Chrome DevTools In Spotting Overzealous Server Protection
There are many individuals with malicious intentions on the web. Many hackers and malicious miscreants try to use Google against sites on the internet. For this reason, some server stacks CDNs and other hosting providers may offer certain built-in features that stop Googlebot spoofs when their actual intention is to stop spammy crawlers from gaining access to the site. In an overzealous effort, these sites may end up blocking Googlebot from gaining access to the site. Sometimes, users see messages that state "Unauthorized Request Blocked".
If we encounter such messages on Google's SERP, we immediately know that a foul is afoot even though the browser loads the content without issues.
By using the User-Agent switch feature, we can see that the site is serving that message as soon as we set the User-Agent to Googlebot Smartphone.
Diagnosing The Core Web Vitals In DevTools
The performance tab is one of the most important features of the DevTools. It serves as a great gateway for troubleshooting issues that influence page speed and performance. On a general note, DevTools can offer some actionable information when it comes to core web vitals.
The metrics that form Google's Core Web Vitals have been part of page speed and performance reports for some time. It is very important that SEO professionals be conversant with how to dissect these issues. As webmasters, we have become more acutely aware of the importance of core web vitals to search efficiency.
When using the performance tab in DevTools, we take a step closer to becoming better at understanding important web metrics.
Double-Check Your HTTP Headers And Review The Unused Code
Have you ever heard about soft 404s in your SEO audits? Well, soft 404s are when the browser may show a 404 page, but they return a 200 OK Response Code.
In some cases, the content may load exactly as expected on the browser; however, the HTTP Response Code may show a 404 or 302 error. It can also be generally incorrect or not what you expected. Either way, it is helpful to see the HTTP response code for every page and resource.
While there are a host of amazing Chrome Extensions that give you valuable information about response codes using DevTools can enable you to check for this information directly.
At this point, DevTools shows all of the individual resources being called to compile the page. That includes the corresponding status codes and waterfall visualization.
With Chrome DevTools, you have the ability to find and address the underlying issues that stop your website from reaching its true potentials. DevTools are specifically useful in your technical audits. In addition to these, you also enjoy speed when using DevTools. Without leaving our web browsers, our team at Semalt can feel empowered to spot check issues from crawling a website to how well it performs.
Semalt is here to help you bring out the best in your website, and we hope you would get in contact with our team. We look forward to hearing from you.