#1
  1. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Mar 2015
    Posts
    13
    Rep Power
    0

    Putting header to bottom of HTML, and aligning with CSS - benefits?


    Hi,

    I'm currently working on a re-design of my site, and I'm trying to do some SEO while in here. One idea is to move our quite heavy "header" into the bottom of our page. So for example, we have:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Test</title>
    </head>
    <body>
    
    	<div id="main-wrapper">
    		<header>The header stuff here</header>
    
    		<p>Main body here</p>
    	</div>
    
    </body>
    </html>
    So what I'm suggesting, is we do:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Test</title>
    </head>
    <body>
    
    	<div id="main-wrapper">
    
    		<p>Main body here</p>
    
    
    		<header>The header stuff here</header>
    	</div>
    
    <style type="text/css">
    	#main-wrapper {
    		position: relative;
    	}
    	header {
    		position: fixed;
    		top: 0;
    		width: 100%;
    	}
    
    </style>
    
    </body>
    </html>
    i.e more the header BELOW all the main content. Then align it using some CSS. This way google *should* see the contents of the header further down (there are undesirable keywords in the header, such as "Login" , "Members", etc, all of which don't add to the content of the page, and this we don't really want ot give priority to the indexed pages)

    Does this even work? Or will google be clevered enough to know that this is happening, and just read it visually, instead of how it is in the code?

    Cheers

    Andy
  2. #2
  3. No Profile Picture
    Moderator
    SEO Chat Good Citizen (1000 - 1499 posts)

    Join Date
    Sep 2016
    Location
    USA
    Posts
    1,413
    Rep Power
    2532
    It seems to me you are going about this the wrong way.

    It may be better and far easier to move the actual content from the header to the footer section of the page. I mean things like "LOGIN", "Members", the undesirable stuff as you put it .

    Just moving the code around on the page is not going to make a difference, the undesirable stuff is still going to be there, but that is just my opinion. Then in addition to your normal css and such, now you're adding additional bloat to move it around on the page, increasing the page size. Yeah, so it is small amount, who cares right ?

    To sum it up .... If it is that undesirable to begin with, it shouldn't be there. Leave the header alone, move the content to elsewhere.

    Edited to add..

    OH and to clarify my meaning...

    Yes links higher up in the html code carry more value. So with that in mind why would you want to devalue your ability to rank your inner pages ???

    What I am getting at is your Navigation it normally sites in the header of sites... sort of like a convention. You would be affecting your whole site in a negative way.

    Comments on this post

    • craigseo agrees : Spot on
    • Chedders agrees
    Last edited by KnowOneSpecial; Jan 16th, 2017 at 01:13 PM.
  4. #3
  5. Dinosaur
    SEO Chat Genius (4000 - 4499 posts)

    Join Date
    Jun 2011
    Location
    UK
    Posts
    4,242
    Rep Power
    6650
    Also remember google do render the page and not just look at the order in which code is written as they know only too well this can be changed via CSS

    Comments on this post

    • mainstwebguy agrees
    Owner of Page Explorer the page onsite SEO checker
    Useful Tools: Site Crawler: Screaming Frog | Free SSL: Cloudflare
  6. #4
  7. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Mar 2015
    Posts
    13
    Rep Power
    0
    Thanks for the replies guys. In that case, I think I will put it back to how it was! I assumed that if we moved it down the page, then google would give it less priority. The reason I was trying that, is because we have a pretty large filters bar at the top of the page:

    Code:
            <div id="filters-bar" class="clearfix">
                    <form id="top-search-bar-green" class="container-custom">                    <table style="width: 100%" id="top-filters">                        <tr>                            <td class="filters-search-term first" style="min-width: 125px">                                <div id="top-search-input-wrapper" class="clearfix">                                    <input type="text" class="form-control" placeholder="Enter place name..." />                                    <select class="form-control" id="theRange">                                        <option value="">+10 km</option>                                        <option value="">+20 km</option>                                        <option value="">+30 km</option>                                        <option value="">+40 km</option>                                        <option value="">+50 km</option>                                        <option value="">+60 km</option>                                        <option value="">+70 km</option>                                        <option value="">+80 km</option>                                        <option value="">+90 km</option>                                        <option value="">+100 km</option>                                    </select>                                </div>                            </td>                            <td class="filters-search-term end">                                <button class="btn search-btn">Go &raquo;</button>                            </td>                            <td class="filters-price first">                                <select class="form-control do-custom" id="priceRangeStart">                                    <option value="10">10</option>                                    <option value="50">50</option>                                    <option value="100">100</option>                                    <option value="250">250</option>                                    <option value="500">500</option>                                    <option value="1000">1000</option>                                </select>                            </td>                            <td class="filters-price middle">                              - a -                            </td>                            <td class="filters-price last">                                    <select class="form-control do-custom" id="priceRangeTo">                                        <option value="20">20</option>                                        <option value="50">50</option>                                        <option value="100">100</option>                                        <option value="250">250</option>                                        <option value="500">500</option>                                        <option value="1000">1000</option>                                    </select>                            </td>                            <!-- <td class="divider"> </td> -->                            <td class="filters-from-to-date first">                                <div class="input-group" id="dateFrom">                                    <input type="text" class="form-control" id="dateFromSearchBar" placeholder="Date From...">                                    <div class="input-group-addon"><b class="icon-calendar"></b></div>                                </div>                            </td>                            <td class="filters-from-to-date last">                                <div class="input-group" id="dateTo">                                    <input type="text" class="form-control" id="dateToSearchBar" placeholder="Date To...">                                    <div class="input-group-addon"><b class="icon-calendar"></b></div>                                </div>                            </td>                            <td class="filter-top-adult-child start">                                <select class="form-control do-custom" id="adultsFilter" style="width:100%">                                    <option>1 Adult</option>                                    <option>2 Adults</option>                                    <option>3 Adults</option>                                    <option>4 Adults</option>                                    <option>5 Adults</option>                                </select>                            </td>                            <td class="filter-top-adult-child end">                                <select class="form-control do-custom" id="childrenFilter" style="width:100%">                                    <option>1 Child</option>                                    <option>2 Children</option>                                    <option>3 Children</option>                                    <option>4 Children</option>                                    <option>5 Children</option>                                </select>                            </td>                            <!-- <td class="filters-reset"><b class="icon-close"></b></td> -->                            <td class="filters-popup"><b class="icon-sliders"></b></td>                            <td class="more-filters">                                <a href="#" class="larger-filters">More filters<b class="icon-down-dir"></b></a>                                <a href="#" class="smaller-filters"><b class="icon-down-open"></b></a>                            </td>                        </tr>                    </table>                </form>                <!-- this gets added in via javascript, when the button is triggered -->                <div id="filters-append-bar">                    <div id="filters-append-bar-inner">                    </div>                </div>         </div>
  8. #5
  9. Dinosaur
    SEO Chat Genius (4000 - 4499 posts)

    Join Date
    Jun 2011
    Location
    UK
    Posts
    4,242
    Rep Power
    6650
    If the filter is too large then maybe the answer is to redesign the filter system.
  10. #6
  11. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Mar 2015
    Posts
    13
    Rep Power
    0
    Yeah - unfortunately I can't do that
    Last edited by youradds; Jan 25th, 2017 at 05:47 AM.

Similar Threads

  1. Advantage of Text Header vs. Image Header
    By Lucian in forum Google Optimization
    Replies: 8
    Last Post: Oct 26th, 2011, 04:26 AM
  2. Keywords, Meta Descriptions and Title Tags HTML Header
    By navahk in forum Search Engine Optimization
    Replies: 1
    Last Post: Jul 17th, 2009, 07:26 AM
  3. Aligning text with css styles
    By grafx77 in forum Web Design, Coding and Programming
    Replies: 3
    Last Post: Jul 3rd, 2006, 04:59 AM
  4. Aligning text..
    By vibe in forum Web Design, Coding and Programming
    Replies: 3
    Last Post: Dec 24th, 2004, 06:15 PM
  5. HTML Header Usage
    By swaaye in forum Google Optimization
    Replies: 3
    Last Post: Dec 10th, 2004, 06:21 PM

IMN logo majestic logo threadwatch logo seochat tools logo