Here’s a little jQuery trick I have implemented on my Orange County Mexican Restaurants blog. I have found that many visitors don’t know about the labels that are at the bottom of most of my blog entries, which, if clicked, will lead them to more information on the subject(s) they are reading about. Another problem is that often Google doesn’t send them to the best page on my site for the search terms they used.
For instance, often people will search on “Mexican restaurants at Disneyland” and they will be sent (for some odd reason; Google, fix your algorithm) to my entry on the chimichanga carts there. Now, I have way more information on Mexican food and restaurants at Disneyland than just that one entry and I even included linkage for it, but at this stage of the Internet game people don’t seem to recognize and utilize text links anymore.
What I have done then is to create the following graphic:
And include it in each individual Disneyland-related entry on my blog and link it to the Disneyland label (http://ocmexfood.blogspot.com/search/label/disneyland).
However, once they click through to that label they don’t need to see that linked graphic anymore so I turn it off using the following jQuery code (label URL abbreviated for presentation here):
- $(document).ready(function() {
- if ( $.jqURL.url() == “http://ocmexfood…/disneyland” ) {
- $(‘IMG[src*=”panchito”]’).addClass(‘noDisplay’);
- }
- });
Which basically says, “If the current URL equals the URL of the Disneyland label then add a class value of ‘noDisplay’ to the image.” Obviously, in the style sheet the ‘noDisplay’ class has a rule of display: none.
So, yes, this is pretty simple but it fills the need perfectly.
It is unfortunate that some people still don’t click on it even when the search terms they used clearly indicate that clicking on it would take them to the information they are looking for but it still gets better click-through rates than the prior text-only link did.
