Like most websites, a significant portion of the beardscratchers.com audience arrive via a Google search query—you might well be one of them. And like most website owners, I have a minor obsession with viewing the latest stats to keep track of who’s coming in from where, why and what for.
With Google frequently updating SERPs and different result sets showing dependant on the viewer’s geographical location, a small frustration I’ve had is being able to quickly pick out exactly where my site appears on a Google SERP. Wouldn’t it be nice if any time your site appears in the results of a Google search, it would be immediately visible to you?
From this…
To this…
With just a few lines of CSS and a modern CSS3-capable browser like Firefox or Opera, this is incredibly easy to do! Here’s the code we use:
| # | Code |
|---|---|
| 0001 | @-moz-document url-prefix(http://www.google) { |
| 0002 | #res h3.r > a[href*="beardscratchers.com"] { |
| 0003 | background-color: #FFFFAA !important; |
| 0004 | } |
| 0005 | } |
| 0006 |
First up, @-moz-document url-prefix(http://www.google) specifies the rule should run only on URLs that have the prefix “http://www.google”. This should cover all the Google bases—UK, US, Canada, Japan, Germany and so on— and avoid having the rule run on any other site.
Next up, we have a CSS selector that makes use of some of the new CSS3 features of attribute selectors that allow us to perform substring matching on element attributes. a[href*="beardscratchers.com"] pulls out any anchor on the page with an href attribute that contains the string “beardscratchers.com” somewhere within it. ^= and $= allow you to match attributes that start and end with a string, respectively. The difference with CSS2 is that pattern matching can only work with exact matches.
Note that substring matches with the attribute selector doesn’t permit the use of multiple strings to match. So in this example, we would need to duplicate the selector to add multiple sites: a[href*="bbc.co.uk"], a[href*="wikipedia.org"].
Finally background-color: #FFFFAA !important; provides our link with a subtle highlight.
Installing the code
For simplicity, I recommend the Stylish Extension for Firefox. This extension is really just a nice GUI wrapper for a special file in Firefox called userContent.css. This file exists in the user profile folder and allows users to add their own custom CSS rules to any site they view. For other modern browsers like Opera, there are some useful details on userstyles.org for alternative solutions.
Once installed, simply create a new Blank rule:
Paste the code in, change the site URL you wish to highlight, give it a title and click Save:
And that’s it. As a quick test, search for the site’s domain in Google and you should find most of the results have been highlighted.
There’s lots of potential here to do interesting things with CSS on Google SERPs; let me know if you come up with anything useful.
- Filed in css and seo under google,serps,usability,highlighting,css3,attribute-selectors
- Add your comments...
- Permanent link to this entry: Highlighting Google Search Result Pages with Stylish and CSS3
