SEOSEO Audits & the Web Developer Plugin: 12 Helpful Features for the Technical SEO

SEO Audits & the Web Developer Plugin: 12 Helpful Features for the Technical SEO

When performing SEO audits, the right tools can make it easier to collect the necessary intelligence. Here’s a walk-through of 12 helpful features of the Web Developer Plugin (for Firefox and Chrome), which provides a boatload of functionality.

Web Developer Plugin

Technical SEO audits are one of the most powerful deliverables in all of SEO. They definitely provide the most bang for your SEO buck.

Thorough audits take time, need to be guided by experienced SEO professionals, and need to leverage the right tools to get the job done correctly. So, while the right SEO audit is worth its weight in gold, a poor or misguided audit isn’t worth the paper it’s written on (or the document it’s sitting in).

While performing audits, a number of tools can help you gather the right intelligence and test the website at hand. Tools such as Screaming Frog, the SEO toolkit for IIS, Xenu, various plugins, etc., each provide their own unique value proposition. When combined with the right SEO experience, a technical audit can help turn a website around (and in a relatively short amount of time).

Web Developer Plugin (for Firefox and Chrome)

Looking for a plugin that offers a boatload of functionality and will help you conduct SEO audits? Meet the Web Developer Plugin for Firefox and Chrome.

This post won’t cover everything the plugin can do, but will cover 12 of the most helpful features for performing SEO technical audits.

Using the plugin already? You should still check out the list below. There might be some features or tips that you haven’t discovered yet. Let’s jump in.

The Web Developer Plugin – 12 Helpful Features for the Technical SEO

1. Turn off JavaScript

Web Developer Disable JavaScript

When auditing websites, it’s smart to run through a site with JavaScript turned off. You don’t want to assume everything is crawlable by just looking at the page.

For example, is the navigation crawlable, how about various modules on the page that contain important content or links? You can easily turn off JavaScript by using the “Disable” dropdown, then “Disable JavaScript”, and finally “Disable All JavaScript”. Then you can reload the page with JavaScript turned off.

In worst case scenarios, you might find large sections of content that disappear, the navigation might disappear, etc.

2. View Meta Tag Information

Web Developer Meta Tags

Want to quickly check meta tags for the page at hand? You can easily do that via the web developer plugin by clicking “Information”, “View Meta Tag Information”. The new window will bring up all meta tag information for the page, including the meta description, open graph data, etc.

Note, the web developer plugin correctly doesn’t display the title tag via this feature, since the title tag is technically not a meta tag. You can find that information via a number of other plugins or tools, or directly via the source code.

3. View Document Outline (headings)

There are times during audits that you come across heading structures that don’t make sense. You can easily see that headings were more driven by CSS than by organizing the content on the page.

For example, there should be one H1 for the page, then H2’s nested within H1’s, then H3’s nested within H2’s, etc. It should reflect a hierarchy of content just like an outline would.

Using the web developer plugin, you can view the document structure by clicking the “Information” tab, and then choosing “View Document Outline”. The new window will display the outline, including the content within each heading.

Web Developer Headings Outline

You can also outline the headings to visually see them overlaid on the page. To do this, you can first click “Outline”, “Show Element Tag Names When Outlined”, and then click “Outline” again, and then “Outline Headings”. Boom, now you have all headings outlined with their heading tags listed (like H1, H2, H3, etc.)

4. View Response Headers

Checking header response codes is a critically important task to complete while auditing a website. You want to ensure pages resolve correctly and throw the correct response codes.

For example, a typical webpage displaying content should throw a 200 response code (which means OK, the request was successful). During test crawls, you can find 302s, 404s, 500 errors (application errors), etc. Needless to say, you don’t want Googlebot to hit the wrong header response code, and possibly across thousands of pages.

Note, for bulk crawling, you should use a tool like Screaming Frog or Xenu, but for specific pages, the web developer plugin comes in very handy. After loading any webpage, you can click “Information”, “View Response Headers”. The new window will show you the headers for the page, including the response code.

Selecting the “View Response Headers” feature:

Web Developer View Response Headers

Viewing the Response Headers:

Web Developer Response Headers

5. Images, Display Alt Text

When checking image optimization, it’s sometimes a pain to review the source code over and over. I won’t cover image optimization in detail in this post, but ensuring each image holds optimized alt text is one important element to check.

Using the Web Developer plugin, you can view image alt text in a number of ways.

You can click “Images”, “Display Alt Attributes” to layer alt text on the screen for each image. This is quick and visual way to see alt text per image.

You can also click “Images”, “Replace Images With Alt Attributes” to remove the images from the page and replace them with the alt text. Both methods enable you to quickly check image alt text.

Web Developer Display Alt Attributes

You can outline images on the page that don’t contain alt text or that contain empty alt text by clicking “Images”, “Outline Images”, and then “Outline Images Without Alt Attributes” (or “Outline Images With Empty Alt Attributes”). Again, it’s another quick and powerful way to double check image optimization.

6. Images, Display Title Attributes

A second check for image optimization includes reviewing the title attribute, which can contain a sentence or two describing the image at hand. The title attribute will also be displayed when users hover their mouse over the image on the page.

Web Developer Title Attributes

Using the web developer plugin, you can click “Information”, “Display Title Attributes”. Each image’s title attribute will be overlaid on the page. Then you can double check the length, the content, etc. to make sure each image is optimized correctly. You can also easily see if images are missing title attributes.

7. Display Link Details

Web Developer Display Lnk Details

For checking both internal and external links on a page, the web developer plugin can overlay link details for all links on the page at hand. This enables you to quickly see if links are JavaScript-based, if they are relative, absolute, etc. You can also pick up some coding issues by viewing this information (if the link destination that’s overlaid on the page is clearly broken).

Note, you should use a crawler like Xenu or Screaming Frog to check broken links in bulk, but you can definitely pick up some problems using the web developer plugin on a page per page basis.

8. Viewing Link Information

Slightly different than what I listed above, viewing link information opens a new window containing all links on the page at hand.

Web Developer Link Info

You can easily view the raw number of links on a page, which can definitely flag some problems. For example, I checked a page during an audit last week with slow page speed, and noticed it had over 800 links on the page.

You can also view each destination URL in a list in the new window, where you can flag questionable links, JavaScript-based links, mailto’s, etc. And if you want to take the analysis to the next level, you can copy the list of URLs per page and use Xenu or Screaming Frog to crawl them.

9. Resize Browser Window

Web Developer Resize Window 800x600

Want to quickly view how a page looks in different size browser windows? The web developer plugin has you covered. Simply click “Resize”, then “Resize Window” and enter the dimensions. The browser window will be automatically sized to the dimensions you entered.

Note, this will not check to see if the site is being formatted for mobile or tablet visitors. It will simply resize the browser.

Web Developer Resize Toolbar

Have certain sizes you always check? No problem. You can enter various sizes to be saved for future use by clicking “Resize”, then “Edit Resize Dimensions”. You can easily add those dimensions in the window and use them during future audits or on different pages.

10. W3C Validation

Web Developer W3C Markup Validation Service

There’s been a lot of debate over the years about whether W3C validation is required for strong rankings. That’s clearly not the case, and Matt Cutts reinforced the point several times over the years, including during SMX West in 2010. That said, I’m a firm believer that the cleaner the code, the better it can work out for you SEO-wise.

The Web Developer plugin provides a quick option for validating your HTML. If you click “Tools”, then “Validate HTML”, the page you are viewing will be validated via the W3C validation markup service.

11. View Source (Alt Shift U)

Web Developer View Source

During audits, there are times you find yourself neck deep in source code to confirm how a page was coded, how certain elements or functionality are set up, etc.

Using the web developer plugin, you can easily view the source code for a page by clicking “View Source”, and then “View Source” again. Even better, the keyboard shortcut Alt+Shift+U will bring up the view source page in Firefox.

12. Bonus: Keyboard Shortcuts

Web Developer Keyboard Shortcuts

If you’re looking for speed, then keyboard shortcuts can be your best friend. The web developer plugin enables you to set up keyboard shortcuts for any of the features available in its menu system.

You can click “Options”, then “Options” again to bring up the web developer options window. You’ll see a “Keyboard” tab at the top, which enables you to add keyboard shortcuts. Click “Add”, then select the feature you want to trigger, and then add the keyboard shortcut you want to use. Note, you’ll need to restart your browser for the new shortcuts to take effect.

Next Steps

After reading through this post, I hope you can see why I dig the web developer plugin. In addition, although a number of helpful features were covered in this post, there are many more packed into the plugin.

Again, SEO tools and plugins alone cannot effectively audit a site, but they sure can make the process of collecting the necessary intelligence a lot easier. Check out the web developer plugin and give it a whirl. I think you’ll be impressed.

Now you’ll have to excuse me. I just found a page missing a title tag, with an overly long meta description, throwing the wrong header response code, with no image alt text, and 768 links on the page.

Resources

The 2023 B2B Superpowers Index
whitepaper | Analytics

The 2023 B2B Superpowers Index

8m
Data Analytics in Marketing
whitepaper | Analytics

Data Analytics in Marketing

10m
The Third-Party Data Deprecation Playbook
whitepaper | Digital Marketing

The Third-Party Data Deprecation Playbook

1y
Utilizing Email To Stop Fraud-eCommerce Client Fraud Case Study
whitepaper | Digital Marketing

Utilizing Email To Stop Fraud-eCommerce Client Fraud Case Study

1y