Troubleshooting seo with devtools, google tips

[riyasimla22]

Want to know how to solve SEO issues with DevTools?

If you are one of those who does not closely follow what Google experts teach throughout the year, you are missing out on a great opportunity to improve your knowledge of the company's tools.

On its YouTube channel, Google has a series of videos with tips, insights and tutorials, known as Lightning Talks.

In his latest video on SEO, expert Martin Splitt taught how to use Google Chrome DevTools to solve basic SEO problems.

Martin Splitt, is one of Google's developers, full stack developer, knows how to program in several languages ​​such as: C/C++/C#, Java/Scala, PHP, Python, Javascript, HTML5 and CSS.

His technical knowledge and easy way of explaining make this video essential for developers and SEO experts who want to improve their knowledge and improve their projects.

As we have already watched the video and taken notes here, we will present the most important highlights of the video, to help you.

Use URL Inspection in Google Search Console
Use URL inspection to investigate mobile-friendliness japan whatsapp data in Google Search Console. When you test your URL, the tool will show you whether the page is indexed or if there are any issues, such as missing HTML elements in the rendering.

Google Search Console Page and URL Inspection
You can also use Google Chrome DevTools to analyze potential responsiveness issues.

With it, you can test breakpoints according to the resolution presented. If you want to simulate different types of devices, you can. The main models on the market are on the list, such as: iPhone, iPad, Samsung Galaxy, Google Pixel, among others.

Devtools testing website responsiveness
You can also view according to device rotation, select page zoom or determine your own resolution.

Using the “ Elements” tab in DevTools
The Elements tab in DevTools will display all the rendered HTML and CSS of the page you are currently viewing.

Elements tab in DevTools
This is a valuable tool for searching for some type of content on the page and determining if it is present in the DOM. If the content is missing in the rendered HTML, it will be missing in the DOM.

You can also edit or copy the HTML to take or change in the final version of the code, for example. If you want to understand CSS, you can inspect the HTML tags and see each style that has been applied.

If you want to test some specific behavior on an element, you can test its state by forcing it to hover, active, focus, etc.

The “ Network” tab in DevTools
The Network tab in DevTools lets you see what's happening between the server and your browser. When you reload the page, you'll be able to see every request and response from the server.

The Network tab in DevTools
The waterfall diagram will show how much time it takes for that screen to fully load.

You can also inspect all request and response headers, which can help you look for specific headers like X-Robots.

This can help determine whether missing content made it from the server to the browser.

If the content only appears after scrolling down the page, you can use the Launcher tab to see the request. This information can be used to troubleshoot or optimize your site.

Defining Network Conditions
Setting Network Conditions in Devtools
The Network tab in DevTools has other features such as disabling caching, setting the network transfer speed, and changing the user agent.

However, it is important to note that setting the user agent to Googlebot may not yield the expected results.

Googlebot also respects the robots.txt file, which your browser ignores, and some sites may do IP lookups to see if the request is coming from a Google data center.

Extra tip: The “ Lighthouse” tab
Lighthouse is one of the best Devtools tabs in Google Chrome. It allows us to test and improve the quality of web pages. You can run it on any page, whether public or one that requires authentication.

Very similar to Google PageSpeed ​​Insights , it quickly and simply presents an overall report on performance, accessibility, best practices, SEO and much more.

You can determine which device you want to audit, whether it's a desktop or mobile device, and which reports you'd like to see in detail. After the audit, it presents its considerations and tips on how to resolve the issues.

Lighthouse Tab in Chrome Devtools
Watch Martin Splitt's video
Of course, we will leave the link to Martin Split's video explaining the devtools for SEO in full. Be sure to subscribe to the Google Search Central channel .


What is DevTools?
If you're new to DevTools and don't know what it is, it's a set of tools built into browsers like Google Chrome, Mozilla Firefox, and Microsoft Edge. They're designed to help web professionals diagnose and debug issues on their websites, landing pages, or web applications, and improve the user experience.

The tool can be used for various tasks such as inspecting and editing HTML, CSS, and JavaScript codes, analyzing page performance, optimizing loading, testing and debugging JavaScript scripts, simulating different types of devices, and much more.

To access it, just press F12 on your keyboard or right-click on a web page and select the “Inspect element” option from the menu.