Getting the Most out of Google Chrome for Technical SEO

When you think about the tools most commonly used by SEO specialists, what comes to mind? I decided to ask a few experts and these are the answers I got:

Paul Shapiro: KNIME, SEMRush, Screaming Frog

Joshua Hardwick: Screaming Frog, URL Profiler, SeoTools for Excel

John-Henry Scherck: SiteBulb, Ahrefs, Hunter.io

I also have a list of SEO tools that I go back to time and time again. However, most of us (myself included) still forget one of the most used SEO tools of all, something that most of us use every day without thinking twice. And guess what? You won’t even have to click out of your browser to use it, because they’re the tools that are already part of your browser! (I probably didn’t need all that buildup with that title 🤷)

That’s right, Google Chrome – the world’s most utilized web browser at the moment – has a whole host of Developer Tools built right in, perfect for technical SEO analysis and testing. Just click the Chrome menu button, and under ‘More tools’ you’ll find ‘Developer Tools’ (or, for those who prefer keyboard shortcuts, hit Ctrl+Shift+I on a PC / Command+Option+I on a Mac). You can also right click on the page and select ‘Inspect’ to bring up developer tools.

Today I have put together a list of the most useful and often overlooked Chrome shortcuts for technical SEOs – it might take 5-10 minutes to go through this cheat sheet, but you’ll save hours of time working in the long run.

1. Switch your Reported Location in Chrome:
As an SEO you often have to work by looking at things from specific locations in order to see how, for instance, a visitor in Australia sees your site as opposed to a visitor in America. Typically, most SEOs will download a VPN add-on to Chrome, but did you know that you can actually modify your location in Developer Tools.

a. After you launch developer tools.
b. Select the three vertical dots near the close button.
c. Look for ‘More tools’ >> ‘Sensors’.
d. Here you’ll find a drop-down menu next to ‘Geolocation’ settings – select the country you want to view your site as and go.

You can also add Latitude and Longitude coordinates for more precise targeting.

2. Take a Full Size Screenshots of a Webpage in Chrome:
Did you know Google Chrome has a built-in Screenshot function? Easily accessible through the Developer Tools kit in Inspect Element mode, it’s a great way to quickly grabs snaps of your site to give an overview of edits to your design team. When you want to take a full site screenshot:

a. Open up the Developer Tools from that page.
b. Hit (Ctrl+Shift+P on a PC / Command+Option+P on a Mac) to load up the DevTools Command Menu.
c. Type in Screenshot and click on ‘Capture full-size screenshot’.
d. The screenshot will be added to your downloads folder.

3. Switch your User Agent in Chrome:
Being an SEO, you may want to check how various visitors or bots see and interact with your website. While extensions like User-Agent Switcher are popular in the Chrome web store, you can switch it yourself without any extensions by:

a. Bringing up the Developer Tools view.
b. Select the three vertical dots near the close button.
c. Look for ‘More Tools’ >> ‘Network Conditions’.
d. Here you’ll find an option for User Agent, uncheck ‘Select automatically’.
e. From there, you’ll see the option to pick a pre-configured user agent from the dropdown or input your own custom UA string. Voila! Total control over user agent settings.

Fun Tip: Did you notice how the same page looks different on those two devices? On an Android the blockquotes look like Android SMS blocks and on an iPhone, they look like they are SMS bubbles from iOS (that article was a few years old so it was mimicking the OS design from that time). It’s probably a good idea for them to look into the Vary: User-Agent header response for that page from an SEO point of view.

Pro Tip: You can emulate Network throttling from this screen, it’s great if you want to see how users from places with iffy network connectivity will see your webpages.

4. See Mobile and Tablet View from Chrome
Seeing how your website looks and loads across different devices is a fundamental step in making sure you deliver a good, optimized user experience. Well, Developer Tools allows you to toggle ‘Device Mode’ under the little icon of a smartphone in the top left-hand corner of the DevTools menu. If you’re troubleshooting responsiveness and mobile optimization across multiple platforms, it’s time-consuming and impractical to literally have all your devices open in front of you. With ‘Device Mode’, quick shifts are a simple click away. You can view the page on a range of predefined devices or add a custom screen size. You can also emulate CPU throttling for low-end or mid-tiered mobile devices and switch between landscape and portrait mode.

a. Bringing up the Developer Tools view.
b. Click the little icon of a smartphone/tablet in the top left-hand corner.
c. Pick your desired device from the drop-down.
d. Optional: you can click Rotate to rotate the viewport to landscape orientation.

5. View the HTTP Header in Chrome
Working on more technical SEO, it’s important to get a quick look at the header response by the server. Is the page sending the correct header response? Is it redirecting to a different page? Is a canonical specified in the header? These are all things you can answer by looking at the header response – and wouldn’t you know, you can see the header response in Chrome by:

a. Bringing up the Developer Tools view.
b. Click the ‘Network’ tab and reload your page – all the requested asset will appear in a list on the left of the menu.
c. Pick your desired asset and you can see the header response for it (it is usually the default tab, if not click on Headers).

6. Look at the Network Waterfall View in Chrome
While you’re in the Network menu in Developer Tools view, you’ll notice a column displaying network waterfall modeling. This is a visual overview detailing the loading speeds of individual resources needed to display a website. This can be done by simply:

a. Bringing up the Developer Tools view.
b. Click the ‘Network’ tab and reload your page – all the requested asset will appear along with the network waterfall view.
c. You can easily filter these requests by domain, type, the protocol used, etc

Why is this useful? Well, Network Waterfall Modelling is a useful way to diagnose performance issues on your site. Issues are visually apparent under the waterfall format, helping you identify images that are loading too slowly, identify render block scripts or even see if assets are making multiple connection requests, etc.

Having this information makes it easier to prioritize what loads first to streamline user experience.

7. Performance Audits on Chrome
There are plenty of 3rd party tools out there for quick performance audits of your site, including Google PageSpeed Insights, WebPageTest, Pingdom Tools and countless others. Lighthouse is Google’s open-source answer to auditing tools, including specific audits for “performance, accessibility, progressive web apps and more”. Well, guess what – Google Lighthouse is baked into Chrome itself. To access it, start by:

a. Bringing up the Developer Tools view.
b. Click the ‘Audits’  tab and you have the option to tick boxes checking for meeting the standards of a Progressive Web App, whether it meets Google’s “best practices” standards, how it performs and its accessibility for disabled internet users.

8. Beautify Code for Debugging on Chrome
While minified code is great from a performance point of view, it’s a real pain when looking at the code to try and figure out what it does. But don’t worry – Google’s got you covered. There’s a handy feature in Chrome Developer Tools that lets you un-minify (or “beautify”) the code. This means the code will be indented and separated into clearly defined sections so it’s easier to understand for needing to make technical adjustments.It’s easy to beautify your site’s code by:

a. Bringing up the Developer Tools view.
b. Click on any asset that is minified like CSS, JS or HTML.
c. A new panel loads up the content and you will see 2 curly brackets {} at the bottom left of that panel. Click on that and Chrome will beautify you minified code.

9. Quick Check if a Web Server Supports HTTP/2
There are a lot of plugins available that can tell you if a server supports HTTP/2. Hey, we even made a bulk persistent connection checker. This can tell you if the server supports HTTP/2 amongst other things. But, truth be told, if you’re happy getting into Developer Tools view (which I assume you are if you’ve made it this far in this list) you can just use that. Start by:

a. Bringing up the Developer Tools view.
b. Click on the ‘Network’ tab and reload the page.
c. You’ll need to add the ‘Protocol’ column to your Network tab (if it’s missing) – which is pretty easy, just right click on one of the headings under Network (like Name or our old friend Waterfall) to toggle quick columns that appear under the Network tab.
d. Select ‘Protocol’ and you’ll be able to read if a server supports HTTP/2 whenever you go to the Network tab.

Pro Tip: Just keep in mind not to turn off HTTP/1 as Googlebot still crawls using HTTP/1.

10. Product Grouping in Chrome
Sometimes you want something a bit easier than an entire list of all the different resources a site is loading. Well, Developer Tools has a ‘Product Grouping’ view option which breaks those resources up into clear groups, based on the domain, type of resource, etc. To see these:

a. Bring up the Developer Tools view.
b. Click on the ‘Network’ tab and reload the page.
c. I usually have the  ‘Domain’ and ‘Type’ columns enabled, just right-click on one of the headings under Network and pick the ones you want.
d. You can left click on those titles to sort the columns in ascending or descending order.

11. Make Scraping Easier with Chrome
Scraping is the bread and butter of a technical SEO, but working with xpath can be a bit tedious. But did you know Chrome can easily generate the xpath for any elements you see on-page in a couple of clicks, making your life that much easier.

a. Right-click the element on the page that you want the xpath for and select ‘Inspect’.
b. The element’s HTML should be highlighted in the Developer Tools panel. Right-click that HTML and select  Copy >> Copy XPath, the xpath gets copied to your clipboard.

12. Identifying Dead Code in Your Pages
At times your CSS and JS files will have a lot of extra code that is not used on the page, if you care about improving the performance of your web page (which every SEO would) then it’s a good idea to get rid of that code from those pages and only use that where it’s needed. Thankfully there is a new feature in Chrome called coverage report that helps you with this.

a. Bringing up the Developer Tools view.
b. Select the three vertical dots near the close button.
c. Look for ‘More tools’ >> ‘Coverage’.
d. Click on the ‘Reload’ icon.
e. You can now see the % of unused CSS and JS in the loaded files, you can click on one of them and it will show you the used and unused lines of code in green and red, respectively.

These are just a few of the amazing tools readily available by delving into the Developer Tools view of Chrome. Reading this, you may have realized you have quite a few extensions and plugins you can now delete.

What are your favorite Chrome Developer tools tips and tricks? Let me know in the comments below so we can all learn to make the most of Chrome together.

Image SEO: Actionable Mini Guide

Your website can be made of various elements. Many of those elements are visible to the human eye, and many of them are not, such as your webpage backend source code. When it comes to images though, they’re one of the key visual elements of your website that goes along with your web copy.

Image SEO is a search engine optimization technique that is used for increasing your website visibility by a better ranking of your web images on Google search. Search engines today have an enhanced capability to locate images with the help of AI and machine learning. But still, search engines can’t read the entire data from an image. This is where image optimization steps in.

Why Image SEO Matters?

Just like your web copy SEO, your image SEO matters too. It’s all about being discovered and providing the best possible UX when the users click your page. There are few important aspects that you need to consider when it comes to the importance of image SEO:

Site Loading Time

You need to think about the size of your image files. People won’t wait more than 3 seconds for a page to load. Amazon also did their research and found that they can lose almost $2 billion if their web page loads slowly. If you have images that are big in size and resolution, you need to optimize them ASAP, not just because of the UX, but because Google considers page speed as one of the most important ranking factors.

Positive User Experience

Providing impeccable UX is crucial if you want your target customers to enjoy when visiting your website. For that, you need to optimize your images. This will improve your page loading speed and as a result, it will enhance the overall UX of your page.

Viral Content

It’s a cliché, but an image is really worth a thousand words on your website. Think about. You want your images to be of high quality and appealing. But, as we said above, HQ images can slow down your page. And if your page load slowly, the user will close the link and with that, the possibility of sharing your content on his social media account. It is vital to find the right balance between image attractiveness and quality.

Finding the Right Image

Images can help the readers in many ways. For instance, images can help them comprehend what your copy is all about. They make 1000+ words articles more readable and can make your social media posts more attractive.

Using Unique Images

If you have your own quality designs and images as a part of your brand, it is advisable to add them to your website to set apart from the competition that uses stock photos.

Every page of your website, including your blog posts, need a unique image that is aligned with the topic of the page. This is important for your page SEO because when an image is surrounded by text and if the image is related to the topic in the text, the page will rank better for the keyword that is optimized for.

Alternative Images

If you still don’t have unique professional photos or designs, you can use sources that will provide you with images that are less used than the standard stock photos. For example. Freeimages.com. Or, Canva’s free photo resource page.

You should refrain from the overused photos on the web and use images that are more authentic. The important thing is that you need to use people and situations in your images, but they shouldn’t look like this.

Other alternatives for images can be drawings, sketches, graphs and GIFs, as one of the most popular content types today.

Getting Your Images Ready

When you have the right image, graphics or illustration, it is time to start preparing the image and optimizing it for your webpage. In this stage, there are numerous factors that you need to consider, such as:

Name Of The File

Image SEO begins by naming the file. This is the first place where you need to insert your target keyword. With that, Google or other search engines will know what the image is about. For example, if you want to rank for “Beaches in Greece”, you can’t go with a filename like “DSC12495”.

Responsivity

Responsive image for flexible mobile screens are crucial for your SEO. If your images are not responsive, it will ruin the mobile UX for the users and that will significantly escalate your webpage bounce rate.

Decreasing File Size

One of the crucial steps in image SEO is compressing your images to the right size. You can use tools like ImageResize or TinyPNG. If you use Photoshop, you can use the “Save for Web” option that will not significantly decrease your image quality. You can also use tools like to compress your images. This is also critical if you own a large blog like a web magazine.Mario Peshev, DevriX CEO and Chief WordPress architect said it on his personal blog:

A large percentage of websites online list thumbnails while using the original uploaded photo, instead of resizing it. A large blog or an online magazine may very well display 40 or 50 high-res images on the homepage which could add up to 10MB of page size, making it nearly impossible to render for under 30-40 seconds on a mobile device.”

Placing the Images

You can’t just place the image whenever you like in your web page. You need to know how to blend in with the rest of the content. You also need to be certain that the image is relevant to the content.

Captioning the Image

Your image caption is text that goes with the image.

Captions are also important for your image SEO. Users use captions to scan your article along with article headings. If your page text is long and you include images as an explanation of a certain paragraph and a topic, it is advisable to include captions.

XML Image SiteMap

With image sitemaps, Google collects information about the images in your webpage. This helps the search engine to discover images that can’t be found by crawling, such as images that are retrieved with JavaScript forms.

To give Google helpful information about your images on your webpage, you need to add applicable details to your standard sitemap. This covers image type, subject matter, caption, title, geolocation, and license.

WordPress SEO Plugins That Would Help

These are three of the plugins that can help you with your web images SEO optimization:

1) SEO Friendly ImagesSEO Friendly Images is a WordPress SEO plugin which automatically updates all images with proper ALT and TITLE attributes for SEO purposes. If your images do not have ALT and TITLE already set, SEO Friendly Images will add them according to the options you set. Additionally, this makes the post W3C/xHTML valid as well.

2) SEO Optimized ImagesThe SEO Optimized Images plugin lets you dynamically insert SEO-Friendly “alt” and “title” attributes to your images. Simply activate the plugin, provide the pattern, and you are ready to go.

3) SEO Image OptimizerThis plugin dynamically replaces title and alt tag of images. All changes are done without affecting the database. The plugin also resizes and compresses the images to boost your site speed.

A Few More Pro Tips

To help you be sure that you optimize your images correctly, here are additional pro tips and advice.

  1. Original HQ Images vs Stock Images

When it comes to a webpage, it’s not just about having images, it’s also about making sure that those images have the compatible texture, size, details and fit perfectly with your brand. In fact, quality images can rack up to 94% more total views on your page than pictures that are not relevant at all.

So, why would you use lower quality stock images? Maybe you’re on a budget. And you’ll download a stock photo. But, when you look at all the downloads of the same photo, you’ll see the reality of the situation when using stock photos.

For your brand, there can be some seriously damaging factors that revolve around using a stock image. One of them is the Picture Superiority Effect – when images are more memorable than text on the webpage.

If the stock photo that you’re using is exactly the same as a stock photo that the user saw on another page that provided negative experience, they’ll project the same experience on your page. This diminishes the trust for your brand and will result in exiting your page and not visiting again.

If you really must use stock photography for your brand, make sure that not overused and figure out how to use design tools to make it look like your own. Tools like Photoshop or even Canva have the power to completely transform a stock photo and it doesn’t take a lot of time to achieve the desired effect.

2) Open Graph & Twitter Cards

Open graph is a protocol that allows your website to become a rich social graph object. In essence, you tell social networks like Facebook, Twitter or LinkedIn which information will be displayed about your link when people share it on those platforms.

Social networks do the same thing as search engines do – they look for data in your webpage to display in search results. The open graph gives the object data to the social graph and how it needs to be presented. If you want to define how your image will appear on social media, the title and description, and location or language need to be displayed.

Open graphs and Twitter cards are specifically created for social networks and search engines may ignore them. But, there can be an indirect benefit for your SEO strategy. If your content is popular on social media it means that more people click and share the content. Increased sharing can attract search engines to rank your link higher and will spark new backlink opportunities.

3) Image Reclamation To Acquire Backlinks

To do this successfully, you need to do a Google Image search of your own unique photo and find if some other websites are using it in some form. Then, you would kindly write to the people that are using it that they’re allowed to continue so only if they include your link as a source. And voila, you have another backlink and improved SEO for your image.