asked on

Positioning content lower in HTML but higher on visible page

I'm working on a page with content that is shown on the top of every page, but for SEO reasons, I want it lower on the page.

I've tried this script from another thread:

<html>
	<head>
		<style type="text/css">
			div {position:relative}
		</style>
	</head>
	<body> 
		<div id="markupPlacement">Really on Top</div>
		<div id="otherContent">Really on Bottom</div>
		<script type="text/javascript">
			document.getElementById('markupPlacement').style.top = document.getElementById('otherContent').offsetHeight + document.getElementById('markupPlacement').offsetHeight;
		</script>	
	</body> 
</html>

Open in new window

However, with bigger blocks of text, it doesn't work quite right. It moves the top piece down, but leaves a gap on the top.

Is there a better way to do this, with JS, CSS or, egads, tables?

Thanks

COBOLdinosaur

If you need something lower down on the page then use CSS to set margin-top to whatever offset you need and it will be lower down.

Curious though. I have been at this a long time and I don't know how moving it down on the page is going to help SEO. Can you enlighten me?

Cd&

nap0leon

If you know how big (tall) the stuff on the top of the page is supposed to be... you can absolute position the two divs.

<html>
	<head>
		<style type="text/css">
			#otherContent-wrapper {position:absolute;top:60px;left:0px;background-color:pink;}
			#markupPlacement-wrapper {position:absolute;top:0px;left:0px;background-color:beige;}
		</style>
	</head>
	<body>
		<div id="otherContent-wrapper">
			<div class="content">Some other stuff here</div>
			<div class="content">Some other stuff here</div>
			<div class="content">Some other stuff here</div>
		</div>
		<div id="markupPlacement-wrapper">
			<div class="headerstuff">Header stuff here</div>
			<div class="headerstuff">Header stuff here</div>
			<div class="headerstuff">Header stuff here</div>
		</div>
	</body> 
</html>

Open in new window

This does not necessarily 'zoom' very well... if you line them up perfectly at 100% zoom, if the zooms in, there will be a slight gap. But... if your page allows for a bit of white-space separation between the header and the content, the gap can be 'intentional'.

nap0leon

@Cd& - not sure how relevant it is today, I've been out of the SEO game a few years now.

It used to be that the serach engines considered that the higher up on a page the content is, the more important it is.

Also, when a site shows up in search results, it used to be that the first HTML in the page is what the search engines display... my personal website used to have the header and part of the left-nav as the "intro text" on every page.

Just to reiterate... that is how it used to be circa 2005... not sure if any of that is relevant anymore.

drgdrg

ASKER

Higher content may be more relevant, but what I want to avoid is repeated paragraphs appearing at the top, making it look like all the pages are the same.

Basic info, disclaimers, etc., that are all the same need to be above the fold for these guys.

How big of a factor? Probably not significant, but SEO is a war of inches, not miles...

As far as the size, I really don't know exactly how big things will be. I suppose I can render on my screen but that won't match another browser, O/S, device, etc.

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial