Obviously, this add-on is chock-full of features that are useful for web developers, but it really does make diagnosing various SEO issues much easier. This list gives the top seven tasks that I find easier when the toolbar is installed.
Click on any of the small images in this post to see them in full size.
1. Browse Like a Robot
By turning off JavaScript and Cookies, you can browse the web as it's seen by 'bots (which in most cases can't accept cookies or execute JavaScript.) This basic change can help you recognise site architecture issues pretty quickly, such as when a main navigation bar is displayed using JavaScript or when visitors who can't accept cookies always get redirected to the front page. (Yes, I've seen both of these in the wild.)2. See What the Spiders See
For a more hardcore spider-emulation experience, use the Toolbar to turn off styles and images. The sudden appearance of previously cloaked text or seeing that the 'main heading' is actually an H4 item and sat 75% of the way through the content might suggest why a particular page is having issues.
This is how the site looked before Timmy joined
Although different spiders treat meta redirects in different ways, it can often be easier to diagnose some on-site issues if you disable them altogether via 'Disable → Meta Redirects'. To see what the site serves up to different user agents (such as mobile devices, GoogleBot, etc) you'll want to get the author's other successful add-on, the user-agent switcher.
3. See the Structure
Talking of page structure, you can press 'Information → View Document Outline' to see the structure of a page, or simply 'Outline → Outline Headings' to see the hierarchy of headings within the page.
4. Validation and Best Practices
The toolbar gives quick access to code validation tools (such as the HTML, CSS and RSS validation from WC3.) There are also options to highlight links without title attributes, or images with missing (or blank) alt attributes.5. A Tip for Search Marketers Who do CRO as Well
Those of us with our massive screens (by the way, did you see this guy?) might not always appreciate how people view our pages. However, a quick click on the 'resize' button lets you see the site through the viewport of an older monitor or a net book.
I should probably let LoveFilm know that 20% of people can't see their big green 'Start a free trial' button.
6. Making Web Page Screen Captures Easier
A change we've tried to make at Distilled recently is to include more illustrative images in our client reports. A fiddly task that comes up from time to time is creating a screen shot of a web page, but without it being obvious which links you're already clicked on. A quick click on 'Miscellaneous → Visited Links → Mark All Links Unvisited' removes the 'visited' styles from any links on the page.7. Reputation Management Tip: Anonymity Made Easy
A year ago, I posted about how to hide your referrer string when browsing, as a handy way to prevent people seeing that you're probing their site. It's much easier to do with the Web Developer Toolbar, by simply clicking 'Disable → Disable Referrers'
You can read more about the Web Developer Tool Add-On, or if you're running Firefox, simply install it now.
If you're already a convert to this add-on, do let us know in the comments of any other features you use regularly.
I also like the web developer toolbar for finding issues at different sites.. The outline function is also very usefull if you don't have the time to spit through the lines of codes.
Another great ad-onn is the Yellowpipe Lynx viewer tool.. Great for showing what the robots are seeing
My favorite utility of the Web Developer:
Information > View Link Information
(2nd favorite: Images > Diaplay Alt Attributes)
Thanks for the great post!
I use the Display Alt Attributes often as well. Just finished a site audit where I used it several times.
Crazy. Been using that toolbar for years, and never knew about half of those options! Disable referrers is particularly useful.
SEOmoz looked like this before I showed up: https://bit.ly/69NXOG
I love using the developer toolbar to see if a page validates too (command + shift + A on OS X).
Thanks for the old pic Timmy. That brings back fond memories of when I first checked in to the mozplex.
I'd be interested to know what the exact time period was that this iteration of the home page reigned.
I took that screenie yesterday from Google Chrome running on OS X. It’s an internal server that has a really old development repro of the site.
But I don't know when that version of the webpage was first published but I can tell you that it was retired in October of 2008.
I love that guy's monitor setup. Makes me think of when my parents told me to not sit so close to the TV.
I'll bet that guy positively glows at night.
I'm proud to already be a convert of Web Developer Tool. I use it a lot when i'm still in the initial dev stages when things aren't behaving like they should by switching on 'Element Information' - between that and Firebug, problems get sorted pretty quickly!
I love all the extra features you've pointed out - they're going to handy additions to my seo, thanks!
I've been using it for years, but never once discovered the view document outline feature! love it.
interesting.
Gutted that I no longer use Firefox. Any reason why I should be using Firefox for SEO at the moment other than for this toolbar?
All the reasons to use Firefox are plug-in based, and reasons to use it for SEO are no different. (I'm speaking as someone who spends 90% of my time in Chrome, and the rest in FF.)
The reasons are:
- Firebug for inspecting individual page elements
- Mozbar for viewing Linkscape metrics of every page, and instant access to all the SEOmoz tools
- the Live HTTP Headers page plugin
Can anyone else add to this?
Awesome, that's exactly what I'm looking for. Just worried about clogging up my Mac. I supposed I have 910Gb of space left though.
Thank you for the help!
Twitter people have just recommended a few more that I'd forgotten:
- SearchStatus
- Google Global (I use this one all the time.)
Thank you. I used to use Firebug, Searchstatus and Mozbar but wasn't aware of the others.
Merry Christmas by the way.
other useful add-ons that require Firebug:
YSlow
Google Page Speed
and there's over 100 add-ons here, some of which can be very useful for SEO:
Advanced Web Development Add-Ons
Hi Rob
Good article - nice and simple and useful.
One thing I would point out (and it's primarily in my own defence) is that the LOVEFiLM homepage stat you quote of 20% is based on an internet wide average of peoples screen sizes (I presume, or perhaps the sites you work on?). It's still a valid point, I just wanted to clarify from our side why we did it (I work for LOVEFiLM in the user experience team).
I was one of the people working on that particular design, and it was definitely something we considered and debated. Fortunately we have actual site usage data and so could get a much more accurate figure on how many people would be able to see it versus how many couldn't.
It turns out that our user base is a little different from the norm and the figure is much closer to 3% than 20%. And of those about 1.8% have less than 300px in height, which is one of the reasons we have the first link on the screen going to the same place (it's just not quite so dominant visually).
Anyway just wanted to clarify that (it's still a good example, and shows how different data can be used), and don't worry about notifying us, we now know. ;-)
I'm over at @LOVEFiLMLucy on twitter if you want to talk further.
Lucy
PS. Please don't be put off using our site as an example in the future - it's got good bits and bits that need improving too, so fresh eyes and comments are always appreciated.
Hi Lucy, thanks for commenting - I didn't realise you were already a 'moz member!
Yes, the data I used was (clearly quite unfairly!) aggregated data for general web users.
I'm glad to hear that the vast majority get to see the button - and on loading the page just now I see an additional 'Start a 14 day trial' button as well, even higher.
As an aside (and despite any pretence at non-endorsements) I have to say that on a personal level, I really do like your site and the Lovefilm product. It makes an excellent last-minute gift for people who are still stuck for Xmas!
Following ;)
Thanks for the great tips with the web dev toolbar. Much appreciated.
The Web Developer Toolbar and FireBug add-ons are a must.
A good PageRank tool can also come in handy, although the results from these should be taken with a pinch of salt!
Paul Martin
Cube3 Marketing
I love using this tool when developing websites. I've found it works great for SEO tool. I think that this was a great post. Keep them coming
I like this Web Developer Toolbar for SEO. Quite helpful and so easy to understand. Must say its very well written.
I work in web development in Austin and I've seen several articles that discuss Firefox add-ons. This is one of the most well-written articles I've seen for the Web Developer Toolbar because it gives you a walk-through rather than just a few sentences...and, I learned about many features I didn't know existed!
Thanks!
[Link drop removed]
Extremely well written. So other useful Firefox extensions are HTML Validator and screengrab
Thanks for the info,I plan to put these tips into action.
James Wilson
Thanks for the very helpful information about SEO.This tips very good and every tips importance for SEO.
That gargantuan computer screen is classic!
I had no idea how useful Web Developer was for SEO! Talk about not seeing the forest for the trees. I've been using it for years, and all I ever did with it was inspect CSS files.
Thanks a ton Rob for sharing these nuggets of gold. I'll start implementing over the Christmas holiday.
PS - Merry Christmas!
I have been using this tool bar for a long time now, a very well built and extensive addon.
Chris Pederick also has a user agent switcher which I have found useful for checking out competitors websites to see if they have any variations in the page being served to traffic.
I like the disable ability. I use Firefox and find it very useful also. The problem is my tool bar is full!
If you right click on the tool bars you can hide and unhide toolbars as you need them.
the browse size tool Google put out helps you see visually where any site cuts off on different screens https://browsersize.googlelabs.com
Yeah, a useful new tool.
Of course, with either the GoogleLabs tool or the Web Developer feature, you have to remind people that not everyone browses with their browser maximised!
too true, its always fun trying to explain to some one that not everyone has 1) the same size monitor and 2)may not have the browser maximized, especially if they multi-tasking
Really! I've to thank you for this so easy to understand guide. This tool seems really an interesting one and I think I will entertain myself with it during these holidays.
I knew it because my devs already use it, but I wasn't so aware of its SEO possibilities.
Finally, I truely believe that it should be done some sort of List about all the SEO Firefox plug-ins, describing them sintetically. I know this list can be found somewhere else, but... you know, if it has a "SEOmoz" certification it should sound more authorative.
Ciao!
Thanks Rob! The Web Dev toolbar is one of my favorites for both SEO and dev reasons. It's great to remind us to use these tools to their fullest.
In addition to the ones you mentioned plus in the comments I also like a couple of the "link" items under the Information tab. Display Link Details and View Link Information can be helpful when needing to look at links in detail on a specific page.
It would be nice if someone added some of these features (especially 1 and 2) to an SEO related toolbar. I use the SEObook toolbar..ahem...
Thanks for that wide information Rob. Web-developer-toolbar is a very useful add-on from firefox and it has numerous benefits for both web-development and also for SEO. It is very useful to find "how optimised a page is?"
It is also a very helpful to to find the css style that affects an element.
Thanks for somemore new tips here.
It's a must-have toolbar for web designers, and a must have for SEO peeps too.
A few other useful tricks not mentioned so far ... you can view the Javascript from the Information menu. Click on minimise, then selectively open the inline javascript to check how much js is in the page instead of off it.
Secondly, you can see the depth of table nesting on old-school pages, which could trip up the spiders.
Finally, you show the generated source code (not just standard source code) to see how that looks once jQuery etc has done its stuff.
There's more still, such as showing div order to check where you main content is on the page etc .. but gotta fly
Hi It is really help full tools.Isome time it is difficult tosee all this things in we master tools..
oh thanks, i am finding it
For the last 9 months, we have been launching 3 online related businesses including 3 blog sites and an entertainment related site. I recently started using this tool and it has helped dramatically! WOW! Big difference. It's like driving with your eyes open versus closed. Thanks for the information!!!