Introducing: the SEO Stylesheet for Safari, Firefox, Opera, and IE

September 30, 2008

in SEO

Safari, Opera, IE and Firefox User Stylesheet is like a compass for SEOs

Firefox gets all the cool toys

As I’ve written before, Firefox SEO — not Safari — gets all the glory. One of the great things about Firefox is the Add-ons (plugins) that extend its functionality. For web developers and SEOs, it’s vital to easily see what rank your website has when doing searches. There are tons of Firefox SEO Add-ons, but I use the following Firefox SEO addons:

  • SEO for Firefox - The best. Gives you all sorts of info about each listing. Invaluable.
  • Google Preview - Get a Snaps.com-like screenshot of websites inline with your search
  • GoogleEnhancer – Adds item numbers and favicons to Google search results

These add-ons make browsing much easier when you’re doing some SEO research. There are no cool Safari SEO Plugins (ask Google, it’s true), but I wasn’t satisfied…so I made my own (kinda).

I am pleased to announce the best Safari SEO plugin alternative.

The SEO User Stylesheet

This user stylesheet can be used by all browsers: Safari, Firefox, Opera and IE

I’ve added the top search engines to this stylesheet so that whenever you do a search on any major search engine, the search results will be numbered, including the paid advertising. 

Internet Explorer users: the items marked with the asterisk (*) will not work in Internet Explorer. Do yourself a favor and get a good browser.

Search engines included in the stylesheet:

  • Google
  • MSN/Live
  • Yahoo!
  • AOL Search
  • Netscape.com
  • Ask.com *
  • AltaVista *
  • Snap.com *
  • AlltheWeb.com *
  • Gigablast.com *

In order to use this stylesheet, you must add seo-stylesheet.css as your browser’s user stylesheet. Here are links that will help you set it up:

Set up a style sheet in:

You can create a .css file using the code below, or download the SEO Stylesheet here.

The SEO stylesheet code:

/*
From http://yoast.com/user-stylesheet-nofollows/
The following styles will show you which links do not pass
PageRank juice.
*/

/* Nofollow links */
a[rel~=nofollow] {
background-color: pink!important;
color: black !important;
font-weight: normal !important;
text-decoration: underline !important;
}

/* Nofollow images */
a[rel~=nofollow] img {
border-bottom: 3px solid pink !important;
}

/*
From http://katzwebdesign.wordpress.com/?p=333
The following styles will number the search engine results for
easier SEO searching.
*/

#gsr li, /* Google */
#sw_page li, /* MSN Live */
#ysch #results li, /* Yahoo! */
.results .MSL li, /* AOL Search */
#grid .w .expander li /* Netscape.com */
{
list-style: decimal inside!important;
}

 

#grid .w .expander li span.map_venname /* Netscape.com */
{ color:white; text-indent:-1.5em; }

#results, /* AltaVista */
#teoma-results, /* Ask.com */
#webResults, /* AlltheWeb.com Paid */
.resultWell, /* AlltheWeb.com Organic */
#mainframe #results2, /* Snap.com Organic */
#mainframe .sponsored-results, /* Snap.com Paid */
#mainframe #search-col2, /* Snap.com Paid */
td.feed table.results /* Gigablast.com */
{
counter-reset: section;
}
#results a.res:before, /* AltaVista */
#teoma-results a.L4:before, /* Ask.com */
#webResults p.result:before, /* AlltheWeb.com Paid */
.resultWell p.result:before, /* AlltheWeb.com Organic */
#mainframe #results2 h3.result_title:before, /* Snap.com Organic */
#mainframe .sponsored-results h3.result_title:before, /* Snap.com Paid */
#mainframe #search-col2 h3.result_title:before, /* Snap.com Paid */
.feed table.results table.result .result-title:before /* Gigablast.com */
{
content: counter(section) ". ";
counter-increment: section;
}

Search engine screenshots using the SEO Stylesheet

Hope you enjoy! Leave feedback, issues, and suggestions below.

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • Twitter

Related posts:

  1. SEO It! Bookmarklet – Improves Search Results in iPhone & Safari
  2. Disable Styles and Javascript in Safari with Keyboard Shortcuts – How To
  3. SEO Randomizer: Save the Value of Your SEO'd Links

{ 5 trackbacks }

appleforapple.com » View enhanced search engine results in Safari
October 7, 2008 at 9:40 am
Cool SEO tools roundup - Yoast - Tweaking Websites
October 9, 2008 at 1:14 pm
Modificare i risultati delle ricerche usando Safari | I Write About IT
October 16, 2008 at 11:11 pm
Cool SEO Tools
October 20, 2008 at 1:33 pm
Numerowanie wyników wyszukiwania w Google-GoogleMon blog
February 25, 2009 at 7:51 am

{ 15 comments… read them below or add one }

Jeff Starr September 30, 2008 at 10:19 pm

This is brilliant work — I am looking forward to trying it out in Safari and Firefox. The nofollow attribute selectors are a great idea. Thanks for sharing this.

Reply

Zack Katz October 1, 2008 at 8:39 am

@Jeff – Glad you found it helpful. Are there any other search engines you’d like to see supported?

Reply

Jeff Starr October 1, 2008 at 1:12 pm

I think you covered all of the ones that I would ever use.. From time to time I will also check things out with xoost.com, but that is more of a social-media-type mashup of the major engines. In fact, I don’t even know if it’s out of beta testing yet..

Reply

Meitar Moscovitz October 8, 2008 at 12:23 am

This is a great idea.

CSS’s user style sheet features are radically underutilized, mostly because no one really understand the technology. It will take some browser evolution for something like this to actually become feasible for wider audiences and judging by how little UI support browsers give us for alternate style sheets, I don’t see that happening any time soon.

That said, again, great work, I like this a lot even if I can’t see an immediate killer application for it.

Reply

Zack Katz October 10, 2008 at 10:37 am

@Meitar – It’s hard enough trying to let people know how to use browser tabbed windows, let alone user stylesheets!

I have my Google results set to show me 100 results at a time; I had resorted to viewing Google without a style sheet to find out what listing number I was looking at. So this saved me the hassle.

Reply

youfoundjake October 15, 2008 at 8:33 pm

Nice setup. Thanks for taking the time to make it. What are the chances of getting it to work in Chrome? (yeah I use chrome because its so much faster then IE or FF, just limited on functionality)

Reply

Zack Katz October 16, 2008 at 7:47 am

@youfoundjake – Unfortunately, as far as I can tell, Google Chrome does not currently support user stylesheets. This surprised me. I expect Google will include this feature in the future.

Reply

extremedave October 21, 2008 at 10:35 am

I have just recently downloaded Google Chrome, I wasn’t really in to all the hype of the release, but after using it, I have found it to be ideal and quick.

Reply

论坛群发软件 October 28, 2008 at 10:41 am

thanks a lot

Reply

martin February 20, 2009 at 2:07 pm

Great work. Thanks, i’ll try it out

Reply

WuWu March 12, 2009 at 1:21 pm

Very nice post, thanks!!!

Reply

websitedesigndenvercolorado April 15, 2009 at 11:37 am

Thanks for the article, just downloaded the latest seo extension for firefox “SEO for FIREFOX” and I must admit it would be really impressive if it worked properly. I wish the SERP would just supply the tools and tell us what they are thinking :D

Reply

BFM@latest headlines May 7, 2009 at 3:37 am

There is a nice seo plugin for opera which does the css changes to nofollow or noindex and it also shows the alexa rank and google pr.
Just visit my site and search for “Opera SEO plugin”.

Reply

Bony Yousuf June 10, 2009 at 10:36 am

dude u r right about firefox being better than safari for SEO

Reply

Alex August 9, 2009 at 12:39 am

Great work. Thanks, i’ll try it out
And great Bllog!

Alex

Reply

Leave a Comment

Previous post:

Next post: