SEO Text via CSS Positioning

Hello,

We are trying to use CSS positioning to move SEO text visually towards the bottom of our page, but physically near the top of our html.

We have achieved this via the following code -- but there is one problem -- the magic line "bottom: -165px;".  This offset varies depending on how many product list items there are.

How can we achieve the same results with static css, ie, css that doesn't need to change based on the page contents?

<html>
<head>
<style>
#container
{
	border: 1px solid black;
	width: 996px;
}

#header
{
	border: 1px solid purple;
}

#left
{
	border: 1px solid blue;
	width: 198px;
	float: left;
	position: relative;
	display: inline;
}

#right
{
	width: 796px;
	float: right;
	position: relative;
	display: inline;
}

#products
{
	border: 1px solid green;
}

#seo
{
	border: 1px solid red;
	position: absolute;
	bottom: -165px;
}
</style>
</head>
<body>
<div id="container">
	<div id="header">
		Header
	</div>
	<div id="right">
		<div id="seo">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
		</div>
		<div id="products">
			<ul>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
			</ul>
		</div>
	</div>
	<div id="left">
		<ul>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
		</ul>
	</div>
</body>
</html>

Open in new window

epicdevelopersAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
If you're not averse to using javascript you could use one line at load that moves it and no need to worry about any size issues

document.getElementById('movetohere').appendChild(document.getElementById('movefromhere')
0
 
Julian HansenCommented:
Firstly, I don't recommend doing this - you probably won't be caught and penalised by Google but this is not considered above board.

However if you want to go ahead then you can do this. Create a container around the left and right div. Move the seo block out of the right block. Make the containing div position relative and add a clear both element at the bottom.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
});
</script>
<style type="text/css">
#container
{
	border: 1px solid black;
	width: 996px;
}

#header
{
	border: 1px solid purple;
}

#left
{
	border: 1px solid blue;
	width: 198px;
	float: left;
	position: relative;
	display: inline;
}

#right
{
	width: 796px;
	float: right;
	position: relative;
	display: inline;
}

#products
{
	border: 1px solid green;
}

#seo
{
	border: 1px solid red;
	position: absolute;
	bottom: -165px;
}
#inner-container {
	position: relative;
}
</style></head>
<body>
<div id="container">
	<div id="header">
		Header
	</div>
	<div id="inner-container">
		<div id="seo">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
		</div>
		<div id="right">
			<div id="products">
				<ul>
					<li>Product</li>
					<li>Product</li>
					<li>Product</li>
					<li>Product</li>
					<li>Product</li>
					<li>Product</li>
					<li>Product</li>
					<li>Product</li>
					<li>Product</li>
					<li>Product</li>
				</ul>
			</div>
		</div>
		<div id="left">
			<ul>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
				<li>Menu</li>
			</ul>
		</div>
		<div style="clear:both"></div>
	</div>
</body>
</html>

Open in new window

0
 
epicdevelopersAuthor Commented:
Not quite the answer we are looking for because this makes it a full width footer, rather than 796px width (simply more content for the "right" column, but visually under the product content within this column).

"I don't recommend doing this" has me more concerned though, as this "css absolute positioning" technique was recommended to us by a supposedly "white hat" SEO consultant we contracted... hmm.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
GaryCommented:
You very likely will be caught by Google and may be penalised
This is classed as greyhat SEO and it has been known a while that Google will translate your css to see what the page really looks like for what they consider should be used for their listings.
0
 
GaryCommented:
Cannot find a definitive link but this encompasses it
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353

How Google defines what you are trying to do is the important bit.
0
 
Julian HansenCommented:
Not quite the answer we are looking for because this makes it a full width footer, rather than 796px width (simply more content for the "right" column

Then you are potentially going to need javascript to stretch the product list to the height of the menu.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	console.log($('#left').height());
	$('#right').css({minHeight: $('#left').height() + 'px'});
});
</script>
<style type="text/css">
#container
{
	border: 1px solid black;
	width: 996px;
}

#header
{
	border: 1px solid purple;
}

#left
{
	border: 1px solid blue;
	width: 198px;
	float: left;
	position: relative;
	display: inline;
}

#right
{
	width: 796px;
	float: right;
	position: relative;
	display: inline;
}

#products
{
	border: 1px solid green;
}

#seo
{
	border: 1px solid red;
	position: absolute;
	bottom: -165px;
}
#inner-container {
	position: relative;
}
</style></head>
<body>
<div id="container">
	<div id="header">
		Header
	</div>
	<div id="right">
		<div id="seo">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
		</div>
		<div id="products">
			<ul>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
				<li>Product</li>
			</ul>
		</div>
	</div>
	<div id="left">
		<ul>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
		</ul>
	</div>
	<div style="clear:both"></div>
</body>
</html>

Open in new window

0
 
Julian HansenConnect With a Mentor Commented:
@GaryC123 - just to clarify my comment. While I believe Google does look at these "transgressions" I also think it is very hard for them to decide (automatically at least) what is a deliberate attempt to fool the spiders and what is just an attempt at implementing a complex design.

To take a simple example I might markup a page like this
<div id="slider">
   <a class="nav left"></a>
   <a class="nav right"></a>
   <div id="viewport">
     <img src="image1.jpg" />
     <img src="image2.jpg" />
     <img src="image3.jpg" />
   </div>
</div>

Open in new window

In the above example the <a> tags are my navigation arrows which I would probably position absolutely at the bottom of the #slider box.
A legitimate moving of content.
I am not an expert on what Google uses to measure these things - which is why I am against this strategy - but I am not certain that it is a likelihood that the site will be penalised - might be a subjective call.
Still my advice is not to do it - it is too close to the edge.
0
 
GaryCommented:
Found a more relevant link, though this it targetted more at people showing ads it is still relevant
http://www.vanseodesign.com/seo/page-layout-algorithm/
http://googlewebmastercentral.blogspot.ie/2012/01/page-layout-algorithm-improvement.html
0
 
Julian HansenCommented:
this "css absolute positioning" technique was recommended to us by a supposedly "white hat" SEO consultant we contracted...
@epicdevelopers - basic rule of thumb - if a consultant advises you to do something that means fooling the spiders or showing them something different from what you display to visitors - best you double check it.
0
 
GaryCommented:
Look at my new links.
When I say penalised it doesn't necessarily mean they send you to the naughty corner so noone can find you anymore ;o)  But what Google defines as deserves this only Google knows.
It's greyhat seo - not bad but not good either.
But check the links above, trying to spam the listings by adding nice seo keywords/content at the top of the page (as far as the source is concerned) and then moving it down the page is being discovered by Google.
0
 
GaryCommented:
basic rule of thumb - if a consultant advises you to do something that means fooling the spiders or showing them something different from what you display to visitors - best you double check it.

Thats why so many of them promise you the earth then give you a shovel

Edit
I have not trademarked that saying ;o)
0
 
epicdevelopersAuthor Commented:
Closer, but real world text is dynamic and the solution breaks if you use lots of text.

		<div id="seo">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
		</div>

Open in new window


The magic "bottom: -165px;" is still in the solution, which does not work for dynamic real-world examples.

If you want to continue finding a solution, this problem has become more academic and educational than anything -- I think we've concluded any trickery is probably going to cause us more harm than good, and shame on our SEO consultant.  Google is good at what they do -- they should still be able to find our text even if it is buried by menus and products.
0
 
epicdevelopersAuthor Commented:
Never did get a pure CSS solution that works in multiple cases (moving this content via javascript seems even more shady), but realized after all of the helpful comments that none of these techniques are worth the risk.  We thought our consultant was purely white hat but are now realizing he's obviously not.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.