?
Solved

SEO Text via CSS Positioning

Posted on 2012-09-12
13
Medium Priority
?
444 Views
Last Modified: 2012-09-17
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

0
Comment
Question by:epicdevelopers
  • 6
  • 4
  • 3
13 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38392501
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
 

Author Comment

by:epicdevelopers
ID: 38392580
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
 
LVL 58

Expert Comment

by:Gary
ID: 38392581
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 38392634
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38392692
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
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 1000 total points
ID: 38392713
@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
 
LVL 58

Expert Comment

by:Gary
ID: 38392718
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38392724
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
 
LVL 58

Expert Comment

by:Gary
ID: 38392749
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
 
LVL 58

Expert Comment

by:Gary
ID: 38392761
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
 

Author Comment

by:epicdevelopers
ID: 38392770
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
 
LVL 58

Accepted Solution

by:
Gary earned 1000 total points
ID: 38392804
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
 

Author Closing Comment

by:epicdevelopers
ID: 38405339
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month17 days, 3 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question