dizzySEO

From an SEO perspective, text content on a page is very important. Sometimes this runs into a conflict with the design of a website or would require significant design changes to accommodate for the addition of text. This is even more important when it comes to a homepage of a website- which is typically the most powerful (and likely to rank) page on any website.

The minimal requirements for text on a page include
1. Rendered in the HTML by the server, not by javascript, AJAX, flash, or embedded in images.
2. Not the same color as the background (most people know this, but you’d be surprised how many developers still suggest this as a solution).

Below are some examples of ways we could both get content on a webpage while maintaining the integrity of the design.

Add content at bottom of the page
We don’t need the SEO content of a page to be right at the top. You could place it at the bottom, even “below the fold.” Please do not enclose the content in the same HTML element as the footer, but it can be located right next to the footer element.

Example: http://www.justalab.com/ ( you don’t need the jQuery that takes visitors to the respective sections at the bottom of the page- just note how much content is on this page without appearing to be content-heavy)

Truncate content
Although there are many SEO advantages to having a little more content, sometimes the content needs to be pared-down in order to fit it into the design of the page. Just be sure to mention variations of the core keywords a couple times. The downside of this is that the text can seem forced because we are trying to squeeze keywords into a limited space.

Create CSS tabs that display portion of content
You can use CSS to create a series of tabs that, when you click on a tab, a different section of text is displayed. Since we are using CSS here, technically all the content is rendered on the page for the search engines to see, even if humans have to click on tabs to see additional content. There are some indicators that Google is starting to devalue text “hidden” by CSS, so be sure the tab-section that is initially visible contains your main keywords.

Example: http://blixt.org/articles/tabbed-navigation-using-css

CSS Fade-Out Bottom Effect
Some of this text is hidden except when you scroll down on the page. This might be questionable as far as rendering text as the same text as the background, but as long as the first paragraph is readable (and contains your major keywords) this could be an effective way of rendering text in an unobtrusive manner.

Example: http://css-tricks.com/examples/FadeOutBottom/

Create CSS expandable section that hides content
The classic “Read More” that expands to show additional text is similar to the CSS tab solution, in that text is rendered in the HTML of the page but not initially visible to the visitor. The difference is that none of the text is visible until a visitor clicks on the designated element. Like the CSS tab solution, this might be devalued by Google.

Example: http://www.cssnewbie.com/example/showhide-content/

What are some other ways you have used or would recommend for adding text to a page without coming into conflict with the page’s design? Examples are welcomed!