Simplest Trick to Optimize Body Content
So, the general rules of thumb for body content are this…
- Keywords in important tags (h1, h2, h3, b or strong, em, maybe alt tags)
- Unique content as close to the top of the page as possible.
The first issue is quite easy to handle, and has been spammed to death across the internet since the inception of search engines. However, moving unique content to the top of the code while maintaining an attractive, Google-guidelines-compliant page has proven more difficult. Let’s take a look.
Headers, advertisements, navigation and more normally precede the really unique content on the page. But how much code and duplicate content does that create?
In the case of FindArticles.com, we are looking at nearly 370 lines of code between the body tag and the unique content!
And what does Google say about this? Sure enough, it found the non-unique navigation text before the main, unique content.
So, how does FindArticles (or any site) move that content up to the top without causing a problem. Well, there have been many solutions, all imperfect, and some quite dangerous. The simple method that avoids using noscript, display:none, visibility:hidden, or absolute positioning is as follows…
Step 1: Put your content in a span tag, with an ID, directly after the body… (use a span so that when the javascript is executed, no spacing will be left)
<span id=’mainContent’><H1>Your Unique Title</H1>Your Content Here</span>
Step 2: Create a Target Span wherever you want your content to end up… (use a span so that your content will easily wrap around images and aligned tables)
Step 3: Add simple javascript to the end of your page.
document.getElementById(‘contentTarget’).innerHTML = document.getElementById(‘mainContent’);
document.getElementById(‘mainContent’).innerHTML=”;
</script>
This script will simply copy the content of the Div you have placed below the body tag and put it into the target location. Their is no cloaking and no hidden text. It will cause no wrapping issues, can be used in fixed width or variable width designs. The only limitation is that on very slowly loading pages, it will be possible to see the text for a fraction of a second at the top before it is moved down.
Now, if only I would follow my own advice on theGoogleCache.
Why bother? You can put the content where it belongs if you use css properly. I really don’t get this at all. Fixed or variable width, liquid design or whatever, it’s just a matter of getting the css correct.
And what happens if some paranoid visitor arrives with JavaScript turned off? Won’t the whole design just collapse?
And I do follow my own advice… 😉
Edit: You are absolutely right. This is just a hack for people who don’t have the time or money to invest in a new CSS solution that would solve all of these problems. The majority of our clients have large sites with bureaucracies that would even make a Democrat (myself) cry. It is much easier to push through a minor fix than to revamp the entire design.
As for javascript – yes. Turning it off will prevent this from working. That being said, the people who turn off javascript also tend to turn off cookies. At that point, most web sites that are trying to optimize might as well give up altogether, seeing as this visitor is unlikely to be able to navigate through any modern shopping cart.
However, I agree completely. If you can do it right, don’t do this at all.
yup… this is dangerous advice in my eyes. Using javascript for this kind of content / SEO manipulation is just foolish.
Perhaps you shouldn’t be solving the problem but researching the actual impact of the issue (content not being reached until the search engines sifts through nav code, etc.)
Does this actually make a difference? And now that you have solved it with a javascript hack, will me website actually gain from it?
Response: Yes, it does make a difference. There are countless examples of websites facing massive “supplemental hell” and/or duplicate content issues which are the result, in part, of having poorly optimized, non-unique code. I am not saying that your site cannot rank in spite of such errors; rather, that all things being equal, your competitor will out rank you if they have employed a template without these problems.
In reply to the first comment:
Is it even possible to to bring the main content to the top of the source code using CSS alignment in a non-absolute way?
Hey guys, I’m trying to get this to work to no avail. I’ve got the code exactly as you have it above, is there something I’m missing? I get [object HTMLSpanElement] where the content should be…
Although I like the concept of this I just can’t see any of this being worth the effort, please remember Google is very very good at knowing where the ‘meat and potatoes’ content is in a page even if all the header, navigation and menu type code is quite convoluted.
Rule #1 stick to making unique content, always.
Joe Newman