Tech SEO 3 Ways to Use Chrome DevTools for search engine optimization Troubleshooting 

3 Ways to Use Chrome DevTools for search engine optimization Troubleshooting 

Must View

Liverpool to Offer Neco Williams New Contract After Breakthrough Year

Liverpool are eager to hand Neco Williams a new contract | Robin Jones/Getty ImagesLiverpool are prepared to hand younger...

What Are Breadcrumbs & Why Do They Matter for SEO?

When it comes to SEO, there's a great deal to emulate.Keywords, web links, as well as extensive web...

A forensic evaluation of when Emmanuel Adebayor set up 4 for Spurs in 2012 –

 . Harry Kane in some way handled to swipe the splendor from Son-Heung minutes with the assists for all...
Web Content Creator, Web Designer, Graphics Manipulator, Security and SEO analyst, Freelancer, Digital Marketer, Promotional Video Maker.

One of a very powerful technical toolkits on the fingertips of any search engine optimization professional is Google Chrome.

No matter what search engine optimization software program you is perhaps utilizing to automate audits or diagnose search engine optimization issues at scale, Chrome DevTools continues to provide essential methods to spot-check search engine optimization issues on the fly.

Now, there have been lots of articles outlining some of the ways in which DevTools will help search engine optimization professionals and builders alike.

However, I want to share a pair of completely different use circumstances the place search engine optimization professionals can lean on DevTools.

  • Troubleshoot site efficiency.
  • Double-check how Google sees your site.
  • Spot-check crawl errors.

1. Setting Up DevTools for Ad Hoc search engine optimization Troubleshooting

For anybody who hasn’t ventured into Chrome’s DevTools, accessing it’s as easy as right-clicking a webpage and clicking Inspect.

Approaching this from the lens of search engine optimization professionals, I like to recommend utilizing both the Element pane – permitting you to look on the DOM and CSS – as well as enabling just a few completely different instruments within the console drawer.


Continue Reading Below

To get began, right-click, and select Inspect.

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

By default, this brings up the Elements panel, providing you with a glimpse of the DOM and the fashion sheets used to compose the web page.

This view alone affords us lots of issues to dive into, but to take full benefit of the toolkit, allow the console drawer.

Click on the three dots next to the settings icon, and scroll down to Show console drawer.


Continue Reading Below

Alternatively, click on the Escape key.

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

With both the console drawer and the aspect panel enabled, customers are ready to get a glimpse of the code that’s being rendered within the DOM and the fashion sheets which can be getting used to paint that code within the browser.

As well as a host of different instruments that may be accessed from the console drawer.

Depending on how ceaselessly you utilize DevTools, the console drawer could show the console itself.

The console panel permits you to view logged messages and run JavaScript – but we won’t get into that at this time.

Instead, we’ll focus on enabling three additional instruments:

  • Network conditions.
  • Coverage.
  • Rendering.

Under More Tools, select every of these three objects till they seem as tabs within the console drawer.

Our DevTools panel ought to look one thing like this:

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

Now that these three panes are enabled, let’s get into troubleshooting.


Continue Reading Below

2. Switching User-Agent in DevTools

One of essentially the most neglected methods to use DevTools is leaning on Chrome’s built-in capacity to change User-Agent.

This easy check has helped uncover a number of completely different issues by offering perception into how Googlebot is seeing and processing the information on a site.

For the investigative search engine optimization skilled, DevTools can usually act as a trusty magnifying glass permitting customers to zoom in on a selected situation to uncover a root cause.

How to Switch Your User-Agent

In order to change your user-agent in Chrome, use the Network Conditions tab within the console drawer.

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

Uncheck Select mechanically, and you’ll view the content material utilizing Googlebot Smartphone, Bingbot, or any number of different consumer brokers to see how content material is being delivered.


Continue Reading Below

The Case of the Mobile Alternate Site

Take a site the place Google is probably not displaying the up to date title tag or meta description in SERPs.

It could also be tough to verify why Google has seemingly chosen one other title altogether or failed to update the title in SERPs from a previous title tag.

In one case, after switching the User-Agent to Googlebot Smartphone, it grew to become quickly obvious that the site was nonetheless serving an alternate cell site to Googlebot.

Because Google had already made the change to mobile-first indexing, Google was processing and indexing the modifications on the cell site, while failing to catch the updates that had been made on the desktop model of the area.

Mobile websites might appear to be a relic of the distant past, but they definitely nonetheless exist.

In truth, a site: seek for m.*.com websites reveals over 2 billion in Google search:

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

While it might be simple sufficient to spot an situation like this in a crawl by searching for the rel=”alternate” meta tag, switching the User-Agent in Google Chrome affords an awesome alternative to spot a possible situation with out ever having to leave the browser.


Continue Reading Below

Spotting Overzealous Server Protection

It’s no secret that there are lots of unhealthy actors on the market on the web.

Additionally, it’s no secret that many hackers and usually malicious miscreants might try to use the ability of Google towards a site.

This is why we will’t have good issues.

As a result, some server stacks, CDNs, and internet hosting suppliers might offer some built-in safety features that block Googlebot spoofs in an effort to guarantee a site stays secure from spammy crawlers.

However, generally a site might get slightly too overzealous, and end up unintentionally blocking Googlebot!

If you see a message just like the one right here, it is perhaps time to do some testing:

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

When we saw this message on Google’s SERPs, it was clear one thing foul was afoot.


Continue Reading Below

However, the browser loaded all content material with out situation.

Was Google seeing one thing completely different?

By utilizing the User-Agent switcher in DevTools, we had been ready to see that the site was serving that message when the User-Agent was set to Googlebot Smartphone.

While this can be a high-quality way to keep Googlebot spoofs at bay, they had unintentionally blocked the true Googlebot!

The User-Agent switcher shouldn’t be with out its flaws, and definitely not a catch-all.

In truth, CDNs like Cloudflare are infamous for blocking site visitors from visits which may spoof a search engine’s User-Agent.

When visiting Cloudflare’s own site with Googlebot set as the User-Agent, you’re greeted with a web page like this:

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

Similarly, switching User-Agents won’t inform you whether or not Googlebot can render JavaScript on the first go or different essential accessibility issues.


Continue Reading Below

However, it’s a pleasant spot-check if what you’re seeing in SERPs is surprising.

Diagnosing Core Web Vitals in DevTools

One essential tab in DevTools is the Performance tab.

This is a good gateway for troubleshooting issues that relate to web page pace and efficiency and may offer some actionable takeaways when it comes to Core Web Vitals.

While the metrics which can be half of Google’s Core Web Vitals have been an element of web page pace and efficiency reports for some time, it’s tremendous essential for search engine optimization professionals to be conversant in how to dissect these issues.

Especially as site owners turn out to be more acutely conscious of the significance of Core Web Vitals to Search.

Using the Performance tab in DevTools is a step to better understanding these essential web metrics.

How to Set Up the Performance Tab for Debugging Core Web Vitals

On the top tab in DevTools, click on the Performance tab.

Ensure the Screenshots button is checked, then click on the Refresh icon within the Performance tab to record the web page load.

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

The profile that masses provides an overview of how long it took to load the web page, with timings highlighted for vital events.


Continue Reading Below

Within the timings part, customers can see flags for issues like FCP (First Contentful Paint), and LCP (Largest Contentful Paint), one of our Core Web Vitals.

In hovering over the flag for LCP, we will really see the piece of content material flagged to be the biggest contentful paint through the web page load.

This will help remove the guesswork as technical search engine optimization professionals work along with development and efficiency teams to troubleshoot Core Web Vitals.

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

Checking for Cumulative Layout Shift

DevTools also allows you to determine what parts might cause format shifting.


Continue Reading Below

Often, when pictures and adverts finish loading, content material might seem to soar round on the display screen.

This happens when the web page hasn’t reserved the true property required for these belongings, inflicting the format to shift and move as the content material is loaded.

In order to assist detect format shift, use the Rendering tab within the console drawer.

Check the choice for Layout Shift Regions, which can spotlight areas of the web page that bear a format shift as content material is loaded.

Layout shifts will then be highlighted in blue as you work together with the web page.

This will help site owners and builders perceive what assets might need placeholders.

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

3. Double-Check Your HTTP Headers & Review Unused Code

We usually hear about smooth 404s in search engine optimization audits.


Continue Reading Below

Soft 404s are when the browser might show a 404 web page, but as an alternative, return a 200 OK Response Code.

In some circumstances, you may even see content material load precisely as anticipated on the browser, but the HTTP Response Code might show a 404, a 302, or is mostly incorrect or completely different than anticipated.

In any case, it’s useful to see the HTTP response codes for each web page and useful resource.

While there are a host of superior Chrome Extensions that provide you with information about response codes, that is one thing you’ll be able to test straight from DevTools.

Use DevTools and navigate to the Network tab.

Here, DevTools exhibits all of the person assets being referred to as to compile the web page, the corresponding standing codes, and a waterfall visualization.

There are two extremely useful views right here to assist filter and sort by standing code information.

First, the filetype filter on the top of the Network tab permits us to slender our focus to particular content material varieties:

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

After deciding on a useful resource, the Headers sub-menu within the Network tab permits us to see a host of information concerning the chosen file.


Continue Reading Below

This contains all HTTP header information, just like the Request URL, the Request Method, the Status Code, content-encoding, last-modified date, server, and so much more.

This might be extremely helpful information when troubleshooting.

You can lean on this data to:

  • Verify GZip compression is enabled.
  • Double-check that cache-control is working as anticipated.
  • Verify we’re sending Googlebot and different user-agents the suitable standing code.

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

Review Unused Code

Lastly, I at all times like to leave the Coverage tab obtainable within the console drawer.

Using this tab, you’ll be able to quickly hit reload and determine how much of the code being shipped is definitely getting used.

3 Ways to Use Chrome DevTools for SEO Troubleshooting 

Often, you’ll see JavaScript and CSS information that have a large share of unused code.


Continue Reading Below

When troubleshooting site pace or efficiency, these are sometimes the first render-blocking assets that needs to be evaluated for optimization.

If you’re delivery a ton of CSS that’s by no means used, it’s going to be a large drain on efficiency.

CSS is at all times render-blocking – as a result, large CSS information can drastically decelerate web page pace and efficiency.

By figuring out the scripts which can be unused, search engine optimization professionals can usually assist builders and site owners troubleshoot what assets require better optimization for elevated efficiency.

In quick, Google Chrome is a critically essential search engine optimization device in your arsenal.

The Takeaway

DevTools affords a robust glimpse under the hood of any website and is usually a crucial half of a technical audit.

However, one of the best elements about utilizing DevTools is its pace.

Without ever leaving your browser, search engine optimization professionals can really feel empowered to spot test issues from crawlability to efficiency.

More Resources:


Continue Reading Below

Image Credits

All screenshots taken by writer, November 2020

Share this:


Please enter your comment!
Please enter your name here

Related Posts

Place Ads Here

Ads by Trend440

Trending Now

Davido exhibits off his cooking expertise as he joins his sister in the kitchen

Nigerian singer, Davido has confirmed that apart from making music he is also a good chef as he makes use of late mother’s recipe...

Google Confirms Rollout of Core Algorithm Update

Google confirms a core algorithm update, the December 2020 Core Update, is rolling out as we speak.Later as we speak, we're releasing a broad...

Houston Rockets Trade Russell Westbrook to Washington Wizards for John Wall

It’s the third group in three years for Russell Westbrook, but his time in Houston with the Rockets has come to an end. The...


Your Next Web Project...

We are a team of professionals to help you setup your next Web Design/Development project. You dictate, we build.