I am not an SEO expert. I said not long ago that I believe it’s mostly just a matter of common sense. However, I do find the subject interesting. Being the #1 result for a search term is a big deal. It can mean big bucks. For those of us with clients, they desire this and look to us to help. So if there are reasonable steps we can take to help with this, I think we should.
One of the SEO principals that really seems to make sense to me, is having the most important content on the page as close to the top of the HTML markup as possible.
Take a look at the web layout below. Common sense would have us order our markup logically as such:
What this screenshot doesn’t show, is that the menu is actually dropdown navigation. It is a series of nested unordered lists. The navigation code is actually 142 lines of code! That is an awful lot of “content” before a search bot would see the important stuff we want it to see.
What would be ideal, is to get our source code in the order of importance of the content. Like so:
That’s easier said than done. We’ll have to resort to some CSS trickery to make it happen. Namely, absolute and relative positioning.
It all starts with the header. We’ll put the h1 serving as the page title in a wrapping div with relative positioning. Then we’ll absolutely position the h1 tag inside it, with bottom and left values. That means that if it grows, it will grow upward not downward.
We’ll also give the header excessive bottom padding. This bottom padding will be equal in height to the expected height of our navigation bar. This ensures that there will be space after the page title and before the rest of the content.
Then we give the page-wrap itself relative positioning, and move the navigation code all the way down to just before closing </div> tag. Then we can absolutely position the nav with top and left values to get it to show up in that gap we created in between.
Ta da! We now have source code that begins like this:
<body>
<div id="page-wrap">
<div id="header">
<h1 id="mainPageTitle">Content is King</h1>
</div>
<div id="main-content">
<h2>This Paragraph Appears Above Nav in HTML</h2>
<p>Pellentesque habitant morbi tristique senectu.....
The important stuff is right up top. For accessibility, we should include a link like this right in the header:
<a class="hide" href="#nav">Jump to Navigation</a>
The “hide” class does exactly that, but doesn’t use display: none, which is actually inaccessible.
.hide {
position: absolute;
left: -9999px;
top: -9999px;
}
Now the first thing read in a screen reader is a “jump to nav” link, which may be useful.
Does this actually help?
I don’t know. It seems like it could to me, but I don’t have any hard evidence. I also don’t think there is much risk on penalization for doing it. After all, this is what CSS is built to do.
Good article, I have been doing this for a while now, but as you say, it’s difficult to prove if it has any benefit or not. SEO peeps seem to say that it does so thats good enough for me. I find it easier to absolutely position navs anyway so they may as well be shoved at the bottom of the markup. I must admit I wasn’t considering screen readers though – thats a useful tip. Cheers.
good one Chris, I have not thought about this before. Well worth a try.
I’m wary of this, though I can see the argument. I believe that the HTML should follow the same structure without CSS as it would when styled. I’ve yet to see any entirely convincing evidence that it has a major impact on SEO to do otherwise, and I’d want to see that before giving the HTML page an illogical structure.
It’s only illogical if you can’t get past corresponding visual with HTML markup. If you can start to think in Code Logic rather than Visual Logic, you’ll do fine.
Also unless you have a “skip navigation” link anyone using a screen reader will have to hear the whole menu read out on every page they visit.
that’s great. and it’s help. you should look this http://www.sohtanaka.com/web-design/markup-hierarchy-advantages-seo/ – higher content, more seo (:
wow, thanks as well for your link too Art.
although it seemed at times to be a very similar read as this, i did pick up info new to me from both.
again, thanks to this previous post art, and thanks to you Chris for yours.
Is not the the navigation important as well? That would be my only concern. If a user disables styles the nav will be at the bottom.
That’s what the “jump to navigation” link is for!
It would get annoying having to click a link to jump to navigation on every page though.
Still, it’s an interesting discussion topic.
It’s far more annoying having to click a “jump to content” button in every page. When on a mobile I usually jump straight to the article I want, I rarely want to navigate through the site.
Its interesting idea but practically could be a bit annoying, its easy to skip past then have to skip to then skip back again
On the flip side, if that huge menu was shown at the top before the content (with CSS disabled), would it not be more annoying to have to scroll past that every time you wanted to get to the real content? It makes more sense to have the content first, navigation second – after all, people will be reading content and then going elsewhere, not the other way around.
I think what makes more sense is like you mentioned putting your sidebar below your main content. Most people just put the sidebar above with a float:right
Just wondering…who disables styles? Nobody of any consequence that I can think of.
Folks who pull up pages on mobiles without full browsers, like Blackberrys.
True, but that’s why you build a mobile version of the site if it’s important to you.
I work at a company where SEO is one of our specialization’s. Let me say, it’s always a good idea to important information as high as possible in the readable HTML markup. It’s only illogical if you can’t get past corresponding visual with HTML markup. If you can start to think in Code Logic rather than Visual Logic, you’ll do fine. But i will say, a well developed menu system can also be beneficial to the SEO process, since links are part of the conversation.
I use this technique often and I can attest that it does work and works well. There are other guys in Marketing who could tell you the SEO benefits (which we can document), but from a basic usability standpoint, this has been great. Here is my latest example…
http://facilitysigns.com/
There are two huge benefits to this technique. First, it guarantees your content will appear immediately even if the user isn’t able to view CSS. Rather than scrolling through 30 or 40 lines of menu items on every page, the important information is always “above the fold.” The industry to which we cater spans a fairly wide array. Some of our clients (whose names you would know) are among the most technologically advanced companies on Earth. Others have no need to use up-to-date browsers, so we still get a sizable number of hits from Netscape Navigator and Internet Explorer 4.
Second, all of the menu items (in the case of facilitysigns.com : header, menu, and quick links) can be controlled using a single PHP file, since all the extra elements appear together at the bottom of every page. This helps the designers because any of us can make site-wide changes by editing a single file. It also means that new pages (with new content) are much easier to create and edit. Which, in turn, means there is less of a chance for designer error, since we only have two files to worry about (the page itself and the menu).
I don’t think you will gain any real benefit in search engine ranks by restructuring your HTML code in this manner. Search engines are likely to rank your page based on your heading tags, linked text, and the title tags on your images and links, as well as your page titles and incoming links. Your code should appear in a hierarchy that makes sense to the end user without CSS for accessibility purposes.
I am also not an SEO expert, but rearranging the contents of your page just doesn’t seem to be the way to gain SE ranks. Using proper markup and having meaningful content makes the most sense to me, and that is what will win at the end of the day.
This is definitely the “other side of the coin” which makes sense to me as well.
It guess it is part of a well-structured and semantic markup. I have just relaunched my site. Besides better and more content, more helpful links inside the content (not nav-links), I tried to compose a very strict and semantic markup including exotic things like the dfn-tag.
What Chris is talking about is just that special aspect of not mixing up content and formal part (e.g. navigation). Maybe it is not as important as we think that content comes b e f o r e nav in the markup. For SEO it should be enough that there are no headlines in the nav-div. If I would the Googlebot I would jump from the title directly to h1 then to h2 and then to the first paragraph. The bot does not bother how far it has to jump.
The bot should understand popular div-names like “nav”, “wrap” and “content”.
The assumption that only the basic semantics of the markup matter is just flat out wrong. Google makes it very clear that they are watching the precise position of content on the page.
“Our search engine also analyzes page content. However, instead of simply scanning for page-based text (which can be manipulated by site publishers through meta-tags), our technology analyzes the full content of a page and factors in fonts, subdivisions and the precise location of each word.”
Source: Google Technology Overview
It’s fairly common knowledge that Google reads JS/CSS files (check your server logs). So, if Google knows the precise location and styling of each word on the page (directly from reading the CSS), all of the tricks in this article are probably just a waste of time.
Google knows that the nav still comes first in the example. You’re not going to fool it by moving things in the markup.
When Google speaks of the “location” of a word I believe they’re referring to its sequential position in the markup, not its visual position on the graphic page; for example the relative proximity of two terms as measured in characters or words.
It would be an enormous waste of resources for their search-bot to attempt to deduce the visual presentation of a page, particularly since there is no single appearance to many or most pages given the wide spectrum of browser capabilities, window widths, user style overrides, and all of the other variables that make our work so interesting.
If that were true… Google wouldn’t have said, “precise location of each word” while also talking about “fonts,” “size” and “subdivisions.” After all… the order of the markup has really nothing to do with “precise location of each word.”
Think about the phrase, “precise location of each word.” That is not just about reading markup from top to bottom. There’s more to it than that.
If that were true… Google wouldn’t have said, “precise location of each word” while also talking about “fonts,” “size” and “subdivisions.” After all… the order of the markup has really nothing to do with “precise location of each word.”
Think about the phrase, “precise location of each word.” That is not just about reading markup from top to bottom. There’s more to it than that.
It is important to note that this technique isn’t trying to “fool” anybody. I would consider that black-hat and never recommend it. CSS is a tool that allows us to create non-source-order dependent layouts, and this is exercising that power in a way that has benefits both for accessibility and in helping show search bots what is important on a page.
I can’t say for certain, but I would seriously doubt any penalty would come from using this technique.
I agree with the spirit of the technique. I never said a “penalty” would likely ensue. I was only saying that red-flags might be raised, and enough red flags were detected…Google’s spam-hunters would then investigate for spam potential. They wouldn’t give you a penalty (or remove your content) because it’s definitely not Black-Hat SEO. It’s just funky.
The problem would be when people take your technique to the 10th degree… using it to hide and elevate SEO weightings for black-hat use. I know that’s not what you’re suggesting. But, some people might believe it would work (it won’t).
The point I’m trying to make is that it’s probably just a waste of time because Google makes it very clear that they take into account the precise position of elements on the page (not the order of the markup) when determining SEO values.
At best… this technique is really only an accessibility improvement (for text-browsers, screen readers, etc). But a “Skip Navigation” link would be a little bit easier to implement.
Nice try though!
I use this technique all the time, but mostly for accessibility reasons (for instance, you mentioned screen readers). The benefits are pretty obvious the first time you look at a site built in this way with CSS turned off, or in Lynx (or older mobile browsers, etc. etc. etc.). If there’s any SEO benefit, that’s just gravy.
This is good and it’s the way I’ve been doing things for a while but I’ve changed my ways. For example I read a PowerPoint slide of what people with acceptability needs expected, one was navigation at the top. Granted you could do your testing or survey and might find otherwise.
http://www.smileycat.com/miaow/archives/000261.php just a quick Google search, the link is dead and it is from 2006 but can anyone prove otherwise? Or is there actually a cut off of code?
By the way awesome website and thanks for the excellent videos.
Great tip, but if you want to score good in SEO, you should know that using a H1 for you site-title is pretty wrong. The H1 should be used exclusive for the main (unique) content title. Please remark that there should be only one H1 in a page
I usually keep to 1 H1 on a page but this is an interesting answer to the multiple H1 issue.
http://www.seohelpbook.com/video/matt-cutts/more-than-one-h1-on-a-page-good-or-bad-video_a81fd6bf6.html
Google actually released a video a couple weeks ago stating that this is wrong. You can have multiple H1 tags on your page if the content warrants it .
What they said that they would penalize for is putting large blocks of text (your content) in an H1 tag and using CSS to make it look nice.
Here’s the video for reference
Hi Chris, it’s been a debate that’s been running around the SEO community for a number of years now. Personally I don’t do it like this because for me the navigation is just as important (if not more so, than the content).
The search engines will only index a certain amount of a page source (most sites don’t have to worry about this as the limit is quite high) but for pages with really long content, it’s possible that the spider may never reach the end of the code. So where does this leave the navigation?
Well, search engines rely on navigation to get from one page to the next and to discover other pages in the site and rank them. They also use them to pass PageRank and relevance from one page to the next, so if search engines never get to your main navigation then you may be missing a huge opportunity.
It can work if used correctly but I wouldn’t suggest everyone use this method without first considering what the consequences might be and then thoroughly testing their results rather than assuming they’re ranking well because their content is first as there’s so many variables involved in SEO. I’d personally rather 90% of all of my content be indexed than 100% of a few pieces of content for example.
Check this out too:
http://www.sohtanaka.com/web-design/markup-hierarchy-advantages-seo/
In that situation wouldn’t you agree that the ecommerce site probably has a fundamental problem with their navigation and design?
It is definitely a useful technique in certain circumstances but should be used with caution and definitely shouldn’t be used as a quick fix.
In the situation quoted above, I’d suspect that whilst some content may rank better, some will also lose rankings due to links to them being further down in the source code.
It’s swings and roundabouts sadly which is why SEO is more of an art than a science.
Hi Dave,
Excellent points! I would argue that if one finds it beneficial to their SEO to switch their descriptive content with their navigation, it does not necessarily follow that they have a problem with their navigation. Even a code-lite navigation above your content pushes your content down a bit. And for sites who have larger navigations or even drop down menus that add even more code, this technique may prove even more useful.
Don’t forget, you can always restate your most important navigation links just below your descriptive content, which would in fact place them higher in the code in this scenario.
This is a great method for usability that is completely new to me. I guess if you have a content heavy site, use this method? I’m not sold on this simple enhancement to get your client up the google ladder though.. Usability in my book is always top priority so I’ll give this a try and SEO isn’t an overnight venture so this can’t hurt.
Great tip, Chris thank you!
Hey this is a fair idea, in fact – I like it!
I think I shall find try and find time to put this into my new site, and all up-coming sites may well include it now!
Many people believe that Google’s Hypertext-Matching Analysis algorithm actually understands CSS.
Google’s own Technology Overview page highlights this technology.
The key here is “precise location of each word.”
It’s well known that if you look at your server logs, Google is reading your CSS files and your JavaScript files — looking for clues on how you are positioning and styling your text. Google understands that CSS adds context to content, so it’s believed to be a very important part of Hypertext-Matching Analysis.
So, I think we can assume that Google knows when you’re trying to shuffle things around. It knows when you are trying to play tricks on it. It knows that the Navigation bar is actually above the content — even when it’s not that way in the markup. And the algorithms are constantly being improved to analyze these tricks.
But, it works both ways! That same logic would suggest that Google also understands that most of those 142 lines of Navigation code are hidden. And therefore, it would discount the value of the content within the drop-down menus.
Not to mention that the Hypertext-Matching Analysis would also recognize that the main content still resides very close to the top of the page (remember, “precise location of each word”) — despite all the markup placed above it. In other words, the actual main content on the page would be given more weight than the hidden markup above it.
All this tricky style shuffling probably does is raise some red flags at Google. When a site has too many red flags, a Google engineer is alerted to go take a look to see if your site using doing malicious SEO tactics.
The moral here is that it doesn’t pay to try to outsmart Google. The algorithms know where the content is positioned, and weighs the content accordingly. Google’s webmaster guidelines just recommend building smart and useable websites. Google’s algorithms are specifically built (and are constantly being refined) to reward sites that match that philosophy.
If google knows where things are positioned on the page, how will the position of code make a difference to them? Sounds like wild conjecture to me…
Of course it’s conjecture. Anyone who claims to be an SEO expert is likely selling you snake-oil.
Nobody really knows what Google is up to. We can only infer from bits and pieces of information that are leaked by Google (or Google Engineer, Matt Cutts).
Nice one, thanks for the tip Chris!
While the hierarchy of code in the html does make a difference, I doubt it’s significant enough in this case to warrant the necessary CSS juggling to pull this off. While the general consensus among SEO’s is that placement is useful, I’ve never seen anyone be able to positively validate this which means it’s probably extremely low in value.
The bigger problem I see in this case is that you have a menu that actually necessitates a work around like this. I would probably try to streamline that to help cut down on the number of links you have to avoid overwhelming your users with choices. I’ve noticed that by moving away from flyout menus altogether that some of my sites have seen a 5% drop in bounce rate and about a 10-20% increase in page views. See this great article from Nielson on drop down menu usability (http://www.useit.com/alertbox/20001112.html).
Another big advantage to moving away from lots of links is that you sculpt the page rank on your site a lot more effectively since page rank is distributed among all the links on a given page. Would you rather have 100 deep pages with low page rank or 5-10 top level pages with high page rank?
I get a lot of search traffic on my websites that go directly to a top level category page, from there it’s very easy to funnel them down to a lower tier page that’s usually a lot more specific to what they are looking for (but never would have seen in the first place if the top level page didn’t rank as well).
Not too long ago at work, we all were required to attend a webinar about different SEO best practices, etc. The speaker made the comment that only the first link in the markup counts towards your ranking (or something to that effect.) So for example, if you have a nav link “About” before your content, but in your content you have also have a text link to your about page with something like “Orlando-based Web Marketing Firm”, (unless you have a nofollow) on “About”, that’s what’s going to count. So if you’re trying to get fancy with using/ranking for keywords in that 2nd link, it’s no good. In that case, it makes the most sense to put the nav last in the source code.
I think that’s the gist of it. I’m no SEO expert either.
Either you heard him wrong, or the speaker was ill-informed. That is not the case.
Hi all,
I’d like to respond to a few comments I’ve seen on here.
First off, it’s true that you’ll get different answers from different SEOs. That’s why it’s important to try and stick to what people like Matt Cutts (an engineer at Google, who thus has ‘insider information’ ) say, and take most of what else you read with a grain of salt.
As for the relevance of having keywords early, Matt Cutts himself admits that this helps ‘a little’ 1:02:20 into this video.
http://tinyurl.com/d68zry
As for the implied statement that the benefits aren’t significant enough to warrant using this technique, I would argue that no technique for better SEO is too insignificant to bother with, especially if you depend on SEO for revenue. Once you’ve covered your basics, it’s good practice to pursue these more niche techniques.
We actually just had an SEO expert come into the office the other day for a meeting. We asked many questions, this was one of them. He seemed to think it would help, but of course it’s only a small piece of the puzzle.
I would think that Google would consider current/common coding practices so you might think that it would accommodate for lengthy series of nested unordered lists at the start of a page?
I think a “skip nav” link is good but a “skip to nav” link is making it one of those “dont make me think” things, anyway just some thoughts, love your work : )
Been doing this for about 2 years now (still not convinced of its benefits to SEO). It can get quite annoying depending on the complexity of the layout and whether or not IE feels like co-operating.
Actually makes me look forward to the CSS Advanced Layout module. Or maybe just hope people never turn javascript off anymore and use js to rearrange the dom. Or maybe they should add some new simple CSS feature just for this purpose.
Re trying to establish it if actually makes a difference, one way you could look at it is to see what the big SEO companies do. Tap ‘search engine optimisation’ into Google and you get BigMouth Media, who I’ve worked with in the past on topshop.com.
These guys advocate the use of content first, navigation later and as they’ve reached the number one spot for this search term, perhaps they’re right.
Of course it’s only one out of a whole bunch of optimisation tricks you can use but they all add up and if you’re business is reliant on search, even a small gain on your competitors is arguably going to make the effort worthwhile.
Very interesting idea and discussion is starting to spread out :) Didn’t know it makes a difference if Your main content is higher as possible :)
After seeing a video on youtube by a blind guy who always first jumps to the h1 title on a page with his screenreader, I structure my xhtml that way.
You can reach high rankings in search engines either way, but from the point of usability it seems the most appropriate to me.
Wow – something I never thought of doing before. Will have to try this on a site and see if it works to improve SEO.
Another thing you could probably get away with is simply adding
rel="nofollow"
to the first set of navigation links, then simply repeat those same links at the end of your markup without the nofollow. That way you’re not losing any robot link juice before the content is slurped up and people aren’t pissy about clicking “skip to navigation.”Our company paid for a ‘professional’ SEO company to give us a lesson on the subject and he specifically stated that the menu should be as high as possible.
Apparently robots think that lists of links further down the page think the developer is link spamming, almost like a footer with links in it – they hate this too.
So having your menu further down the page could make the robots think that these links are useless.
This isn’t my opinion, I’m just passing the info along. :)
Take a look into your logfiles, guys. Bots do not follow links directly. They never do. If you don’t have a xml-sitemap, the bot starts with index.html by reading it from top to the bottom. He won’t follow one single link in this document immediately in that sense that he is leaving index.html by following the first link. Imagine this would be an external link :)
After a while of processing index.html, the bot will come back and load all that pages that were linked from index.html. It knows those addresses from his first visit.
Even if you offer an xml-sitemap, the bot doesn’t crawl all your pages and reflect about your webseite like a human being. Every visit covers just a couple of pages. Very often it is just one single page at once. These will be indexed and evaluated basing on the title-attribute and h1. Adding new pages from your website, the index has to re-elaluate everything until the index is ready for your whole site. In this manner, the searchengine is working through your website step by step, collecting your titles and headlines first and establishing a hierarchical system. Of course, real global navigation will be recognized as that what it is, as well as contextual links inside the content.
Seperating content from navigation might be a help for indexing faster. But there is a golden rule: strong textThe content begins with h1 and nowhere else.strong text
I don’t think Chris was concerned about indexing speed. The recommendation was an attempt to enhance the weighting of relevant keywords.
Just to add (confusion) to the conversation, seedmagazine.com, a well designed and developed site (and Zeldman-approved in his big think video), puts the top nav way down in the source. In fact, the ID of it is “seoNav”! Also, the sidebar holds the tag cloud which is actually written in with javascript.
Nooooooo,
Ah, I thought I was the only one doing this… It makes such a difference and not many people I know in comparison to my competition do this so keep it under your hat.
What if you’re working with a fluid height/width page? Can you resize the text and still make it fit inside the given height? I’m just asking since if you got to give your navbar a fixed height, it seems bad for accessibility.
thanks for this tutorial, I just have one question: what about users who are not using a mouse but their keyboard to tab through your page? i used this approach on our site and then myself found it very confusing not to be able to access the navigation links at the beginning.
your example doesn’t have that problem, as there are no links in the content.
I guess this will help me.
Thank you very much man, also, I love this site… CSS is great.
I totally support this. I’ve see great results just by knowing how (and where) to place the contents of my pages.
There are a number of downsides to this approach:
This will only work with fixed headers that have consistent height on each page
This wil probably not work very well on various mobile devices
This solution has accessibility issues as getting to navigation requires more tabbing and faffing around
Google will find it harder to index other pages on the web site as it needs to dig deep down to find the main navigation
Thanks, keow. I was wondering whether anyone else would point out this significant flaw in the plan. That’s one of the tricky bits about horizontal menus — you don’t really know how tall they’ll grow unless you deliberately screw your visually-impaired users by preventing text-enlargement with replacement graphics or by allowing the menu to disappear horizontally out of the window as it enlarges. You can try sizing the bottom padding of the header in ems, but that only accounts for the growth of a known number of lines of text and falls apart immediately with word-wrap. While it’s interesting and sometimes useful to learn methods for styling content in a different presentational sequence than the markup, the wrap-around problem makes this one a poor example.
The primary rationale for this technique is a top-of-page dropdown menu (“actually 142 lines of code!“) which poses an accessibility challenge for folks with fine-motor-skill disabilities. Hey, flatten your main nav menu to a single set of half a dozen links so it doesn’t “bury” subsequent content and the problem disappears, and then you don’t have to go out of your way to create a layout that breaks on text-zoom.
But really — “bury”? “Dig deep”? Is the idea that the poor little search-bot gets tired and discouraged after crunching a hundred forty lines of markup or a couple of thousand words? Not. Or does Google think that if a web page begins with several dozen hyperlinks then the h1 and subsequent content are of reduced significance? In the context that the vast majority of the billions of web pages on the net begin with nav links? I don’t think so. If the “buried by preceding content” concept applied, then the conclusions to zillions of articles and essays would be less well indexed than their introductions, which would be a remarkably stupid way to run a search engine in the real world. Of all the things Google is, stupid isn’t really one of them.
Worrying about the placement of a nav menu here or there is faux seo.
When you highlight anything on this web site it changes the highlighted colour to orange. How do you make this happen with regards to the code?
I agree it may be hard to prove whether or not this is of much benefit for SEO purposes, but if nothing else it would certainly make for a more friendly site for screen readers, especially a site with a lot of navigation links as your demo has.
Nice article Chris. :)
This technique is pretty silly. It sounds cute and all but google IS going to find your content just the same whether the nav is at the top or bottom of the markup. Just write your pages with clean markup and google will find EVERYTHING and place the same amount of importance on your content whether it be below or above your nav.
I know you new front end guys are always looking for the latest and coolest “tricks” but instead of relying on silly tricks just write clean, structured code and you’ll do just fine.
yes I already worked like this for 2 sites. Any way thanks for posting it. in a easier way. This will help freshers
there are many layouts out there with this html structure:
header
first sidebar
second siderbar
content
footer
this structure is absolut not seo friendly – but this structure is seo friendly:
header
menu
content
first sidebar
second sidebar
footer
googlebot understand the difference between the first menu and content
and if you have a css dropdown – not js – you loose the trust for your intern links with this method.
for googlebot is it necessary to use mark up – but it is not useful to think about 2 h1 on one html site ;)
regards
Does this actually help? YES. I checked that in my SEO projects and it really works fine so for all of us not doing it better think of it