Tools

SEO Implications of FireBug FireFox Addon

Firebug is one of the best FireFox addons I am aware of. While it is primarily meant for tech-savvy web developers, SEOs can also benefit from the tool and here are just a few tips:

Disable CSS style (via CSS tab) selectively: make sure search bots and people browsing your site with CSS disabled can access / see any page element. With Firebug as you mouse over each property, you’ll see a little circular icon on the left. Clicking that will disable the property, and clicking it again will turn it back on:

disable css SEO Implications of FireBug FireFox Addon


Advanced Source Code Search:

You can use CTRL+F to search the built-in source code in FireFox but what you can do with FireBug is quite a number of advanced options:

  • search and preview the element right within the code:

firebug search preview SEO Implications of FireBug FireFox Addon

  • search and edit the source (just click on the element):

firebug search edit SEO Implications of FireBug FireFox Addon

  • search and instantly see the element on the page (hit “Inspect” tab): firebug-search-inspect.jpg

firebug search inspect SEO Implications of FireBug FireFox Addon

  • search and copy any HTML element easily: right-click on any element, and you’ll have several options for copying aspects of that element to the clipboard, including its HTML fragment, the value of its “innerHTML” property, or an XPath expression that identifies the element uniquely

Test your site loading time:

Access Net tab: Each file there has a bar which shows you when the file started and stopped loading relative to all the other files.

The bars will teach you things you didn’t even know. For instance, did you know that JavaScript files load one at time, never in parallel. This will help you tune the order of files in page so that the user spends less time waiting for things to show up.

firebug load time SEO Implications of FireBug FireFox Addon

In addition, you’ll be able to see:

  • size of each element;
  • header response for each page element;
  • preview of each element (when hovering over).

Examine the HTTP headers of each element in more detail: click + sign next to it:

HTTP headers contain all sorts of interesting information like the mime type of the file, the type of web server, caching directives, the cookie, and lots more. To see the HTTP headers, just click the arrow to the left of each request to expand it.

firebug headers SEO Implications of FireBug FireFox Addon

Easily find on-page errors:

Get both immediate and detailed information about the errors in JavaScript, CSS, and XML. You’ll see a notification icon in your status bar – click it and get details on the error (Console button):

firebug errors SEO Implications of FireBug FireFox Addon

 SEO Implications of FireBug FireFox Addon
Ann Smarty is the blogger and community manager at Internet Marketing Ninjas. Ann's expertise in blogging and tools serve as a base for her writing, tutorials and her guest blogging project, MyBlogGuest.com.
 SEO Implications of FireBug FireFox Addon

You Might Also Like

Comments are closed.

12 thoughts on “SEO Implications of FireBug FireFox Addon

  1. Interesting article Ann. I’ve always had the FireBug addon but never really fully utilised it / understood it. I also find the ‘Web Developer’ addon for Firefox a very useful tool too.

  2. Hi Ann,

    Good post! You might also consider checking out this free toolbar from the SEO Tools – http://tools.seobook.com/seo-toolbar/

    and this is one of the first ones I downloaded from the same guys – http://tools.seobook.com/firefox/seo-for-firefox.html (specifically for firefox and sits right next to my firebug).

    I haven’t had the time to test either to their full potential yet, but what I’ve seen so far integrates nicely with what you’re suggesting with Firebug.

  3. I use it for diagnosing tricky CSS problems.

    It is invaluable to see the styles and classes directly applied to an element, as well as styles inherited from parent elements.

  4. Thanks for the tips, I have never used firebug in that way before. Only for looking at my css. My site displays ok without css turned on, however it looks horrible.

  5. Ann, it’s articles like this –with screen shots o’ plenty– that make Search Engine Journal indispensible. Thanks for helping us dig into FireBug.

  6. Another tool that is worth looking into is the Web Inspector in Safari 3. You can enable the “Develop” menu in Safari’s Advanced preferences…

    A lot of the same features. What I love is the way you can select a certain region of a site and safari will highlight it for you. You can then see the Properties of this region and even the Properties it has inherited. Very handy if you are trying to match your Adsense backgrounds to fit you page in some obscure sidebar or whatever.

  7. As SEO is being discussed, has anyone used the actual SEO tool for Firefox? There is a nice feature “SEO XRay” that gives a nice snapshot of a sites SEO value but I have not had much time to test some of the other features.

  8. hi the infirmation that u gave is really usefull..Can u be more specific in let me know hoe to copy Html Form element from the Firebug .