Archive for the 'Advanced SEO' Category

Site design does not have to overshadow your search engine optimization efforts. This is especially true and important when it comes to site navigation. Having search engine friendly Navigation is critical to getting a site spidered, maintaining optimal search visibility, increasing your keyword relevancy scores, and improving the transparency of a site’s topical hierarchy.

So how do you achieve harmony with the design team? The answer is by optimizing navigation using CSS Image Replacement.

Place the navigation in div layer. Use a traditional text link with href in the code. It will be rendered on the end users browser as an image by the CSS style applied that makes it look and feel like an image. The result is that the search engine spider sees text, and the user sees pretty images. Navigation optimization improves the visibility of linked tiers, and provides the search engines with a clear transparency of a site’s topical hierarchy.

A good example of this can be seen in the image below. It’s an image of the navigation from The Ultimate Fighter website:

CSS image replacement uses a combination of style sheets and ordinary HTML to display a visible image, usually consisting of rendered text, while preserving the underlying text-based, structural HTML markup for search spiders.

In a previous post, I showed how to create a textual navigation that renders as an image. For you Rock N Roll fans, I used Shinedown’s website as an example. I posted an image to show exactly what the source code looks like.

Bottomline, you can keep the design guys happy, while leveraging keywords as anchor text in your image-based navigation to achieve a crawlable SEO friendly navigation.

One of the recurring issues I come across on optimizing ecommerce websites, is the lack of text on category and subcategory pages. Usually, what I see on the typical category and sub-category pages of an ecommerce site is a bunch of product images, and maybe, just maybe they have some content below the images.

See “no text” example below:

Adding more text will help the search engines determine what your page is about, and offers a great opportunity to use textlinks to build internal linking within your website.

Optimially, it’s best to place the text under the H1, but above the product images. Consider redesigning your page template with content placed just below the H1 page header. Content should optimally be placed closer to the top of the document.

Although, the classic objection to this is that the text placed in that position on the page will interfere with usability, page views (engagement), and ultimately conversions.

To the rescue comes a CSS technique called, Absolute Positioning.

Consider using CSS absolute positioning to effectively move content blocks across Category & Sub-category templates. Content will appear closer to the top of the code structure, yet would appear at the bottom of the page when rendered within a browser.

The addition of more text is a way to optimize your website, increase your keyword relevancy scores, boost internal linking, and create a more engaging user experience.

Below is a powerpoint slide I created on Absolute positioning , and how it can be the solution to page layout problems.

For web developers and other programmers, needing to adapt to the latest methods and search engine friendly techniques, jQuery requires careful study and evaluation. Since its release in 2006, jQuery, an open source, cross-browser JavaScript library, has steadily grown in acceptance and popularity to the point that it’s now the most popular JavaScript library available. In fact, BuiltWith Trends, in posting its usage statistics on various web technologies, identifies jQuery as the hottest web development tool, both in usage and growth rate. Found in some of the most visited sites on the entire world wide web and growing in popularity and acceptance, jQuery has clearly emerged as a technology to reckon with now, and going forward.

Most attribute its growth to jQuery’s success in achieving its overall goals. Born from a desire to simplify programming and especially web development, jQuery has won champions and adherents by delivering on its promise to streamline HTML document traversing, event handling, animations and AJAX interactions while remaining lightweight and compliant with industry standards, such as CSS3. In addition to the above characteristics, jQuery also enables the creation of Plug-ins: facilities that allow developers to create concepts for low-level interface and simulation, high-level theme-able widgets, and advanced effects. This deepens and heightens the dynamism and power of web sites.

But as with so many things, there’s a down side. For all of the flashy tricks and easy effects jQuery helps you incorporate into your designs, it can also render your creation virtually invisible. Because it automates and streamlines much of the coding and content handling that goes into making a web page viewable, jQuery holds much of the data that search engines use in retrieving pages out of the view of spiders. Spiders are little agents that the search engines use to locate and point to the content markers they need to return meaningful responses to users. When spiders can’t find those content markers in your web page, then your creation won’t be included in the data returned in that search. This makes your web site very hard to find.

Consequently, programmers need to know techniques and tricks to keep important markers in view of the spiders and search engines while still availing themselves of the advantages of automating coding with jQuery. There are a wide variety of ways to alter your coding to accommodate the needs of SEO, and several will be presented below; but these are far from definitive or exhaustive. Web development, and programming in general, consists of so many variables that there will always be multiple answers to any programming question.

Remember that the overall point is to bring content important to SEO to the forefront, by unlocking it from inside the JavaScript, or jQuery. One way to accomplish this is by embedding multiple hard links and anchor tags with the href. But for this technique to work you have to place the links in the HTML source, not called by jQuery. In the example, there is a link to the author (John Raasch, a freelance web designer who blogs on web development topics) who describes some of the tradeoffs in play with AJAX and jQuery, as he works to maintain usability and SEO in his web site development portfolio. Briefly, he recommends using jQuery and multiplying the anchor tags. Then, to accelerate page loads, he uses hidden divs; a technique that works, but jeopardizes his page metrics reporting.

Tim Nash, a writer and consultant in various areas of web development, wrote a post on the use of jQuery and tricks for keeping content indexable for the search engines. In his post, he presents several jQuery plug-ins that can aid in making jQuery SEO friendly . Nash starts by describing methods of web development and comparing them. In general, he espouses what he calls progressive enhancement, in which the programmer builds the pages to the lowest common denominator and then adds enhancements. This will keep all of the relevant data accessible to search engines and therefore make the page easier to find on the web. The alternative, that he suggests is likely to result in burying your design, he calls graceful degradation.

Multiple posts point to additional means of preventing content in jQuery calls from remaining invisible to SEO spiders. Here’s another one from David Pirek, a designer/programmer in the New York metro area. His blog presents an overall approach to using jQuery, which he refers to as his favorite web development environment, and maintaining SEO techniques. He advises embedding the page you need to request in href. The spider will see the link as another page and index it, which makes it visible to search engines. He goes on to describe an enhancement to the technique: have your jQuery click and attach another parameter to the query string. This lets the page know when the call is coming with JavaScript enabled and when it’s not, which in turn allows the designer to add page properties (title, Meta tags, styles and even further HTML if you prefer).

Here are a few other useful resources from around the web. First from Noupe - a site founded by Noura Yehia, and now belonging to Smashing Media - are 50 examples of designs aided by jQuery. Noupe’s mission involved bringing its readers information on new communication methods and technologies from around the web. To that end, they wanted to make their readers aware of the high quality work currently rendered by jQuery. Second: from the same source is a sampling of 45 jQuery plug-ins . Finally, here’s a roundup of tutorials on jQuery.

There are many techniques, resources and opinions regarding jQuery, but the general point remains the same: make your jQuery content crawlable and search engine friendly.

Photo credit: chrisglass

If your job involves convincing clients why they need to redesign their sites with SEO in mind, sooner or later you’ll run into the splash screen conundrum. Splash screens are terrible from an SEO perspective, but some clients love them more than their own children. They think about their website the same way they see the receptionist at their office in the real world… when you enter the front door, they want the first thing you see to be a pretty face.

Creative companies are the worst offenders when it comes to demanding splash screens. If you’re doing SEO consulting for a site related to the entertainment industry, for example, you’re probably dealing with someone who places a lot of value on the “Wow!” factor. They think that just because you’re a fan of Adam Lambert, you’ll be more than happy to sit around for 30 seconds watching celestial bodies swooshing through the universe as the artist’s name is slowly revealed. They couldn’t be more wrong.

The main effect of a splash screen is to cause valuable visitors to leave your site. A bounce rate of 20% or more on splash screen pages is typical, which may cause you to say, “Well, heck, that’s a lot better than the 50% bounce rate on the home page!” But if your splash page is the default entrance to your site, it’s probably getting 3x to 5x more traffic than your home page. So maybe 100,000 people enter your site every month through the splash screen, while only 30,000 enter directly through the home page. If you’ve got a 20% bounce rate on your splash screen, that means you’re losing 20,000 visitors every month before they even see your home page! Wouldn’t you rather drive that traffic to the home page instead of losing it while your users stare at some stupid Flash animation?

You want users to get “inside” your site ASAP. Don’t leave them waiting for someone to “open the door”!

Here are some of the main reasons why you don’t want your user experience to start with a splash:

Hurts Search Rankings
Having a splash screen usually complicates your website’s structure. Search engines rank top-level URLs first, so having your home page under /us/wpcontent/home/ (or any other nested directory structure) can really hurt your rankings. Why waste your top-level URL on unimportant splash content?

Splash pages are not optimized for search engine indexing. The content of a splash screen is typically Flash or graphics heavy. This lack of text makes the page nearly invisible to text-based web crawlers… that is, all search engines.

No Keywords, No Links
Online search results are based on keywords. Splash pages typically contain no text except for the “skip intro” or “enter site” link. These keywords are obviously useless in terms of SEO.

Online search results are based on links. But the only link on your splash page goes to your home page. And what are the chances that anyone else will ever link back to your splash page? I’d say slim to none.

In terms of SEO, splash pages are a complete waste of your best online real estate.

Base-level URL Redirection is Bad
Splash pages often redirect to the home page. Search engines like Google and Yahoo! want to deliver people directly to the information they are seeking. When they see that your base-level URL is redirecting to another page (after the splash “performance” is done), your site’s ranking will be affected negatively.

You almost HAVE to redirect from a splash screen. There’s no good reason to redirect from your base-level URL (e.g. www.site.com/), but having a splash screen sit there pretty much forces your hand. Either you redirect the user to make sure he actually makes it to your content, or you risk losing him to splash frustration.

User Frustration
Even user-friendly splash pages include a “skip intro” link. This tells the user this page is less important than your other content, i.e. not worth viewing.

Most splash pages waste time. You’re asking the user to wait for content to download. Then they have to sit through an unwanted presentation. And you wonder why they’re leaving? Many sites even force users to see the splash page each time the site is loaded.

Reduced Credibilty
Your home page is the most important page on your site. Splash pages are a wasted opportunity to make a good first impression.

No matter how someone reaches your site, eventually they will visit the home page. Users want quick access to information. Splash pages are a speed bump, hindering access to your site’s content.

Poor Site Performance
Splash screens are graphically intensive and slow to download. Users with slower connections (mobile, dial-up, foreign countries, etc.) will get stuck with a “loading” message, and may never even make it to the home page. If your site is getting heavy traffic, the bandwidth used by the splash page will reduce your entire site’s performance.

Page load time is a now a major factor in search rankings. If your site loads slowly, your search ranking will suffer. Get your users to the home page as quickly as possible!

There’s a good quote floating around from Jared Spool of User Interface Engineering on how to convince your clients that splash pages are bad:

“When we have clients who are thinking about Flash splash pages, we tell them to go to their local supermarket and bring a mime with them. Have the mime stand in front of the supermarket, and, as each customer tries to enter, do a little show that lasts two minutes….

“Then stand back and count how many people watch the mime, how many people get past the mime as quickly as possible, and how many people punch the mime out.

“That should give them a good idea as to how well their splash page will be received. That’s the crux of it.”

Lightboxes: A Better Splash Option?
If you’ve explained everything above but your client still insists on having something “splashy” upfront, you may consider recommending a lightbox. At the very least, lightboxes have a better reputation among users than splash screens. And when your users click on the “CLOSE” or “X” button, you won’t be losing them into the ether… in fact, they’ll be looking right at the content you want them to see.

Lightboxes may not be as Flash-y (pun intended) as a splash page, but they give your site a chance to project some sort of welcoming message or offer without such a high risk of losing visitors.

They’re also much more friendly for SEO purposes. Lightboxes don’t dilute the strength of your site because your home page sits at the base-level URL, and the content inside a lightbox – images and/or text, rather than Flash – is typically more friendly to indexing by search engines.

Anybody out there have a positive or negative experience of using a lightbox as a splash screen to share? How about any other ideas on replacing splash screens when the client absolutely insists?

What if you have a client that has difficulty implementing changes you recommend? What if he/she is restricted (for whatever reason) from making any real meaningful changes to the source code?

Is it possible not to touch the code of a site and still optimize it?

The answer is yes. A good SEO Consultant knows that the search engines read “backlinks”. That’s one of the ways search engines figure out what your site is about. As a matter of fact, the thesis paper from the founders of Google is called Backrub because it measures on “backlinks”. This type of optimization is called Off-Site Optimization. Your goal is to appear as the subject matter expert in your topical neighborhood. And by using a Strategic Link Campaign, this is possible.

The link development factors to look for are many, and a time consuming discovery process. But a well crafted Strategic Link Campaign will be well-targeted research and meet the Criteria & Time Period for Link Effectiveness.

A well crafted Strategic Link Campaign can have the SEO power to boost a site to position #1 if the right link combinations & quantities are used.

Your goal is to appear as the subject matter expert in your topical neighborhood. The best sites to get links from are in your same topical neighborhood, and under Google’s “radar”.

Some websites neglect to focus on link building when optimizing their site. Instead, they allocate budget on hiring an SEO Consultant that can optimize their code, and get them “free” rankings. However, without link building many of these types of on-site optimizations just don’t produce the results that satisfy website owners.

I’ll use the analagy that onsite optimization is like planting the seeds, and link building is the nourishing rains that will produce the harvest.

Link building is an easy and affordable way to improve your website’s keyword rankings, and brand presence in your industry.