Become a Chrome DevTools SEO Ninja!


A lot of marketers don’t know the real value of Chrome DevTools for their work. This integrated tool inside the Chrome browser has a lot of valuable features that can make your life easier.

Here are a few tips after which you may reconsider some of your addons and procedures:

#1 Fullpage screenshot without addons

A lot of people install a lot of addons in their browsers unnecessarily. For example, addons that make a screenshot of a visible part of a website or a fullpage.

What a lot of people don’t know is that Google DevTools are ready for situations like that. All you need to do is:

  • Open DevTools using F12 or right click anywhere on the website and select Inspect
  • Press CTRL+SHIFT+P
  • Write “screenshot”
  • Choose if you need a fullpage or just a visible part screenshot
Fullpage screenshot with devtools

You can also toggle the device toolbar and make a screenshot of a website from any custom device including some smartphones and tablets:

Fullpage mobile screenshot with devtools

#2 Find and scroll to check your links

Sometimes linkbuilders need to find their links inside a really long content (or articles with hundreds of comments). The easiest way how to do that (if you don’t want to scroll and find them manually) is:

  • Open your Chrome DevTool (F12)
  • Click on Elements tab
  • Press CTRL+F and insert link
  • Right click on link in source source code and click on Scroll into view
Find URL and scroll into view

#3 Check how the URL looks without javascript

Do you want to check how much content is generated by javascript? Or how does your website look for users and bots who don’t use javascript?

That’s easy with DevTools:

  • Open your Chrome DevTool (F12)
  • Click on Settings or press F1
  • Click on Disable Javascript checkbox
  • Refresh URL
Check how the URL looks without javascript

#4 Find hidden content

Does a website have any hidden content? And is that correct? Check hidden elements in source code:

  • Open your Chrome DevTool (F12)
  • Click to source code in Element tab
  • Press CTRL+F
  • Try to find any piece of the source code that contains fragments "hidden" or "display:none"
Find hidden content

#5 Emulate mobile or tablet version

Check how does your website look on mobile or tablet. Everything you need is to:

  • Open your Chrome DevTool (F12)
  • Click on Toggle device bar or press CTRL+SHIFT+M
  • Select which device you want to emulate
Emulate and validate mobile version

#6 Identify pagespeed issues and page load time

Do you think PageSpeed Insights is the only tool from Google to get some tips to optimize you website performance? Wrong! Google has many resources that can help you when you optimize your performance.

DevTools contains Lighthouse which is a great tool that can help website owners with improving the quality of their web pages. As a result of an analysis this tool provides a score or an analyzed URL from 4 points of view:

  • Progressive Web App
  • Performance
  • Best practices
  • Accessibility
Identify pagespeed issues and page load time

After you make your own analysis, you can see a report like this below. When you click on every single section you’ll get tips on what you can do to improve your website.

Result of page speed analysis

And how about you? Do you use DevTools in another way which is related to SEO?

Like the article? Share it with your friends!     Like Tweet Google +

Comments





Similar articles

5 interesting facts Google has recently confirmed about sitemaps


 Filip Podstavec


  6 minutes of reading
  21. 8. 2017.

Read now 




Comments




You haven’t decided yet?

That’s ok, you can try us easily for free.