Recently, as I was reviewing a new site launch and redesign, I found myself nodding in agreement with each new, cool design feature that I saw. However, as I kept scrolling, I eventually came across something in the site design that put all head nodding to an abrupt halt and left me with a heavy sneer. What could possibly have been so visually repulsive, you ask? Text. Walls. of. text. I'm not talking about a mere line or two of copy, but large paragraphs that disrupted the nice flow of the site's minimal design and left the user with tons of content that they will surely never take the time to read.
However, as a marketer experienced in search engine optimization, I know that this text is a painful necessity in many instances. Without a decent amount of keyword-rich text (lets say about 600-700 words) on a given page, it is not likely that the page will have much hope of ranking organically in search engines. However, there are always ways to balance your desire for a content heavy page that will rank well with your desire for a beautiful and clear web page. One of the best ways to achieve a good balance is to include your text within your web page, but keep it out of sight unless requested by the user. This way, your content will be present and crawlable by search engines, but can be kept out of sight for the majority of the time.
There are several site features that, when implemented, can help accomplish this goal. The following 4 site functions are especially helpful in meeting both of these desires. By implementing any of the following site functionality, you can help craft web pages that are both visually pleasing and SEO friendly.
1. Rollover States
Rollovers are a great way to couple eye-catching visual content with some informative text. Rollover / hover states can allow you to include a small chunk of text that will display when rolling over a particular image. When applied, images are usually turned translucent and text is layered on top. thebestdesigns.com uses this technique to provide tags and calls to action and for each of the featured websites on their homepage.
While thebestdesigns.com uses this technique for social links, tags, and calls to action; it can easily be used to include a small paragraph of keyword-rich copy. This technique can also prove to be especially helpful for ecommerce category pages that include a catalog of product images. In this scenario, each image can provide an opportunity to include keyword rich text to help your product-category page rank.
2. Revolving Carousels
Implementing a rotating carousel or image slider can open up a huge amount of real estate on your web page. An image carousel enables an area of your web page to be replaced with a sequence of alternate "slides" and messaging. The amount of copy that you can include with this site feature is only restricted by the number of slides that you choose to include.
The carousel on the homepage of Evolution Capital Partners, a business investment company, accommodates small paragraphs of text that are displayed off to the side, out of sight, until the user clicks and scrolls through each section of the carousel.
3. Navigational Tabs
Another method for including additional copy on a cleanly designed page is to hide text within a navigational tab. Blue Fountain Media's website, for example, includes case study pages that incorporate tabbed content that is only visible when that tab is selected.
This allows us to showcase visual elements, like screenshots of our work, but also allows us to include lots of keyword rich text that relates to the services that we provide.
4. Click to Expand
Similar to navigational tabs, the click to expand function keeps content hidden until a user clicks a "more" or "details" call to action. Click to expand is a particularly useful function because it allows marketers to keep content hidden as well as try to appeal to visitors to get them to read the remaining majority of copy. Click to expand allows you to tease readers with a small, initial snippet of copy. Coupled with a strong call to action, your initially hidden content has a large chance of being read.
Dujour's teaser text with button to expand.
Dujour.com , the monthly online magazine, incorporates the click to expand function well. At first, each individual section or story on the site is quite compact in its design. Upon clicking the "read more" call to action, each full story fully opens up, expands its display and allows you to read and scroll through several paragraphs.
Dujour with expanded content.
While cloaking and any other shady SEO techniques will obviously lead to Google penalties, these tactics are safe and legitimate ways to include text in a more subtle manner. Do you have other methods for including large bodies of text in a discreet manner? Let us know in the comments below or tweet @BFMweb.