Browsing articles tagged with " Landing pages"

Using JavaScript to Hide Content: Advanced White Hat SEO?

Oct 18, 2011   //   by Darren Slatten   //   Contests, Copywriting, Google, SEO  //  28 Comments

If you provide some kind of SEO-related services, there will come a time when your client or boss looks you in the eye and says something like this:

“Yeah, so about those page edits you recommended…

We’re actually quite happy with the current design of our landing page, and our tests have shown that adding text to the page actually decreases conversions. So…um…is there any way you could optimize this page…like…without adding all those words to it?”

To most SEO’s, the idea of achieving top rankings in a competitive niche–without putting keyword-rich content on the page–is unrealistic if not downright ridiculous. But from a design perspective, we also have to acknowledge that text and keywords are not always what’s best for Users. Sometimes, the best User experience comes from a simple, minimalistic interface with no distractions.

The Google home page itself is a perfect example. Arguably one of the most valued resources on the Web, and certainly one of the most visited, google.com currently displays a total of 25 words.

+You Web Images Videos Maps News Gmail More Sign in Google Search I'm Feeling Lucky Privacy Change background image About Google Advertising Programs Business Solutions

But what if Google was your client, and they wanted you to optimize their home page to rank for keyword phrases related to search engine

Would you recommend something like this instead?

Google home page with Wikipedia-style text

Hmm…no, that’s not going to work. So it’s kind of a Catch-22, isn’t it? On the one hand, you’re trying to satisfy your client and their Users by providing a slick, clutter-free interface…and on the other hand, you’re trying to be mindful of Google’s relentless addiction to plain text content. So what do you do?

Well, if you don’t know how to code basic JavaScript (or you’ve seen how bad Google sucks at reading JavaScript and thus avoid it entirely), then you probably pick content over User interface, pollute the page with stacks of keyword-dense garbage, and hope that the potential increase in search traffic eventually makes up for the immediate loss of conversions.

But what if you didn’t have to choose? What if you could fill your landing pages with SEO-friendly content…without it getting in the way of your Users?

Luckily, there’s a solution. It’s called hidden content.

* GASP! *

That’s right, folks…if you’re trying to improve your website’s User experience without hurting your search engine rankings, then you need to start hiding some content–ASAP. But you can’t just hide it anywhere–you need to hide it somewhere where search engines will see it for sure…but Users won’t.

Wait... isn't that SPAM?

That depends on a number of variables, but the short answer is:

No, it’s not spam. It’s not even gray hat SEO. Hiding content is perfectly acceptable, as long as you do it right.

Which brings us to the million-dollar question…

What is the right way to hide content?

Unfortunately, Google isn’t likely to provide a useful answer anytime soon. So you know what? I’m going to take a crack at it. Seriously. I’m going to make a genuine effort to lay down some technical guidelines for all the aspiring content-hiders out there, and I’m going to do so without pretending like “your intent” has anything to do with it.

So here we go. First I’m going to suggest the guidelines; then I’m going to provide a working example that incorporates all of these best practices.

Basic Implementation Techniques for Content Hiding

  • User Friendly – Hidden content implementations should improve the User experience and must not impair the User experience.
  • Dynamic – Hidden content elements must have a visible state–a set of conditions under which the hidden content is visible and readable by Users. The visible state must be capable of being activated by a browser event. The event should be automatic (e.g., document.onload) or it should be triggered by Users’ actions (e.g., element.onclick). In the case of Users’ actions, the trigger element should be conspicuous and intuitive.
  • Accessibility – Hidden content should not be implemented in such a way that it causes the content to be inaccessible to Users with disabilities or Users who rely on screen readers or similar devices.
  • Progressive Enhancement – Hidden content must default to a visible state when rendered in a browser that either doesn’t support JavaScript or doesn’t have JavaScript enabled. A document in which all hidden content elements are in the default visible state should provide a User interface that is functional, cohesive, and reasonably intuitive.

A Perfect Example of Hidden Content

If you don’t really understand the BITCH, don’t worry–I have an example for you. And this isn’t just any ol’ example; this is my attempt at creating a perfect example.

Let’s say you have a news blog with the 10 most recent stories showing on the home page. For whatever reason, you decide that the home page should include the full text of each post. The problem is…your Users are overwhelmed by all that text, and all they really want is an easy way to scan the latest headlines before they choose a story to read. The solution…hide some content!

This example has two versions: the original plain text version and the modified “hidden content” version. As you can see, the User experience is much better in the modified version, simply because it’s easier to navigate (especially on a mobile device that requires swipe scrolling). But the real magic is in the code, so take a few minutes to view the HTML and JavaScript source. Before you go check it out, I’ll leave you with some questions/concepts to think about:

  • Compare the HTML source between the two versions. What differences do you see?
  • What happens to the Hidden Content version when JavaScript is disabled?
  • What is the likelihood of Google flagging the Hidden Content page as suspicious or deceptive?

Plain Text Content

Plain text content example

Hidden Content

Hidden content example

 

Download the Hidden Content Example

The live examples linked to above are hosted on GitHub. This means you can easily download the source code files for your own personal or commercial use (files are released under a non-restrictive free software license). And for the truly advanced SEO’s out there: you can even fork it or suggest improvements via pull requests.

Download the Hidden Content example source code files!

Darren Slatten

Darren Slatten is one smart mofo. Some say he's the World's Greatest SEO. When Darren isn't studying SEO or web programming, he's usually busy developing online marketing strategies and web hosting solutions for local small businesses. Darren also likes to use keyword-rich anchor text in his guest blog bio links, but only when it makes local SEO for small business sense to do so.

More Posts - Website

3 Tips to Get the Most Out of Your Call to Action

Sep 19, 2011   //   by Chris Help   //   Copywriting, SEO Blog  //  4 Comments

Whether you need to create landing pages for various products you’re selling or you’re providing copy for your home page on your business site, your call to action is one of the most crucial pieces of the puzzle. Nevertheless, tons of people get it wrong. In fact, many business websites fail to have any call to action whatsoever. I’ve even had clients ask me to take the call to action out of the copy I’ve done for them. It never ceases to amaze me.

But assuming you’re open to the idea of a call to action, here are a few tips to help you get the most out of yours.

1.       Avoid the generic—Yes, “Contact us now!” is nice and urgent sounding, but urgency isn’t the only thing your call to action needs. You need to avoid the generic line and add some specifics. Otherwise, you run the risk of sounding like one of those late night infomercials. How do you circumvent the generic? Make sure you explain what’s in it for the customer.

2.       Don’t forget the “how”—Research is conclusive: customers need to be told what to do. Like sheep, they need to be led directly to the proverbial slaughter. But guess what? They won’t get there unless you tell them how. You can tell a sheep to go lay down all day, but until you guide him there, nothing’s going to happen. In the same way, make sure your call to action tells the customer the exact step you want them to take.

3.       Make it visible—Yes, good copy usually ends with a strong call to action. But is it possible it can get lost there? Maybe. Assuming your copy is good enough to lead the reader all the way to the end, you still need to do something to make the call to action stand out. Italics or boldings are good for that.

But what happens if your potential customer never scrolls to the bottom of the page? For this reader, you need to make sure you have a call to action that shows up before they ever have to scroll down. Maybe at the end of the first paragraph, maybe on a button at the top of the page…

It may seem silly, but a simple sentence or two can truly make the difference between an interested party and a paying customer. What else do you do to better your calls to action?

Chris Help

Chris HELP started his own copywriting agency, HELP! Copy and Design, a few years back as a sort of side project to showcase his passions. But what ended up happening is it snowballed into full-fledged thriving business. So whether you need press releases, SEO articles, or good old fashioned high-conversion copy--he's ready, willing, and more than able.

More Posts - Website

6 Tips For Increasing Your Company Revenues Via the Web

Oct 10, 2008   //   by Gerald Weber   //   SEO Blog  //  6 Comments

In this post we will be talking about increasing conversions with good landing page strategies.

Tip 1: Have an offer, along with a clear call to action

Your landing page was created with one idea in mind and that is an online conversion. Now a “conversion” can mean different things, depending on what you are trying to accomplish. Whether it is for the user to fill out a contact form, or to make a purchase, you need to have a clear call to action that very clearly informs your visitor what needs to be done. (i.e. “Call today!”,or “Fill out the form to the left!). It helps to give users an incentive such as a special discount or a free consultation (remember to put a time limit on your special offer). Read more >>

Gerald Weber

I founded Search Engine Marketing Group in December 2005. More recently I co-founded viralcontentbuzz.com. which is the free platform that helps bloggers generate REAL "social buzz" on their best content. Feel free to follow me on Google+

More Posts - Website

Follow Me:
TwitterFacebookLinkedInPinterestGoogle PlusStumbleUponDelicious