Front end coding - sending clear signals for successful SEO on Google

[Whitey]

A top flight senior SEO manager, with high end development background, I know, reviewed some code recently and nearly had cardiac arrest. [ I'm exaggerating and I wasn't told what he found or instructed his coders to do, but he was specific about how the footer links should appear in the code ).

I'm familiar enough with the visual on-page factors required for successful SEO, and the UI required to make things clear enough for a user. That's easy on my eye.

Things like breadcrumbs , call out link navigation, arrangements above and below the fold etc etc

The old style of SEO worked well with a solid framework. But with Panda and associated algorithms , folks are having to come up with funky ways to attract users, sometimes confusing Google in the new code ( perhaps ).

Specifically, I'm not familiar with how a coder should code a template to maximise Google's clear interpretation of the semantic hierarchy in link navigation

So for example let's say you want your links arranged in a particular way for the user, but separately you want to make sure that Google is 100% clear on the semantic hierarchy of the internal referral links from that page.

By internal semantic hierarchy, I mean, how the juice flows, how the interpretation of pages is supported and prioritised by parent pages, so that Google correctly interprets the meaning of those links and URL's through a validated relationship between those terms :

Widget A
Widget B >Color A > Color AB
Widget C >Color B > Color BC

Can anyone provide an answer or guidance on this specific question and other important factors for consideration that you would be instructing front page developers in, or seeking answers for.

How should front end coders be instructed ? What's the ABC checklist for successful coding in SEO?

[aakk9999]

Specifically, I'm not familiar with how a coder should code a template to maximise Google's clear interpretation of the semantic hierarchy in link navigation

One of problems I am seeing in this respect are drop-down main navigation menus that open on hover. They cause every page to have link to every other page in the navigation, hence making the understanding of the semantic structure harder.

Lets assume you have the following main navigation:

Widgets 
 > Large 
 > Coloured 
 > Antique 
 > Modern 
Gadgets 
 > Permanent 
 > Short Term Use 
 > Disposable 
Twinkles 
 > Star shaped 
 > Pulsating 
About Us 
 > Terms & Conditions 
 > Privacy 
 > Shipping Costs 
 > Contact 

If "on hover" main menu navigation is used(*) then every page will have main nav links to every URL in the above menu. If the secondary menu opens after clicking on the main nav option, then links to other sections are limited to the top level of navigation only, and the secondary menu shown is for the current section only, giving the section more semantic relevance.

The second problem is putting all links to the footer - this also muddies the semanthic relevance.

(*) There are ways to do 'on hover' main navigation without impacting semanthics of the navigation structure, although it may not work for every site. For example, loading secondary menus for the structure outside the current section via AJAX is one of possibilities.

[aristotle]

By internal semantic hierarchy, I mean, how the juice flows, how the interpretation of pages is supported and prioritised by parent pages, so that Google correctly interprets the meaning of those links and URL's through a validated relationship between those terms

I'm not sure exactly what this means, but if your intent is to flow most of the link juice to certain particular pages, in my opinion you need to be careful. Making a special effort to flow link juice to particular pages is a form of optimization, and if overdone, it becomes over-optimization. I think Google is wise to this strategy, and you could risk receiving some kind of over-optimization penalty if you're not careful.

[Robert Charlton]

Whitey... I'm suspecting that this question, like many questions about site structure, might be conflating the basic issues of navigation and category structure, urls and directory structure, faceted navigation, duplicate content, product attributes (like color, suggested in the example?) vs categorization, best practices of html menu markup, how many times Google counts a link, etc etc etc.

The old style of SEO worked well with a solid framework. But with Panda and associated algorithms , folks are having to come up with funky ways to attract users, sometimes confusing Google in the new code ( perhaps ).

Reading between the lines, I'm guessing this part of your question is talking about AJAX and product sorting, which might be one way of dealing with faceted navigation. Bringing Panda into it, I'm thinking, might suggest that you're wanting to keep the user busy. Am I on the trail?


But then...

Widget A
Widget B >Color A > Color AB
Widget C >Color B > Color BC

I might interpret this as an exemplified metaphor for the effects of a sequence of links, or I might interpret it as a question about the selection of colors on a product page. I'm guessing it's not the latter, and you're not really asking about product attributes (like color) here, but I'm not sure.

Taking it further...

Specifically, I'm not familiar with how a coder should code a template to maximise Google's clear interpretation of the semantic hierarchy in link navigation

Is this a question about the construction of a hierarchy and taxonomy... from the general to the more specific... with appropriate taxonomical relationships like...

Clothing
- Men's | Women's
--- Men's > Shirts, Trousers, Jackets, Socks, Sportswear, etc etc
--- Women's > etc etc...
.....and then each of these subcategores gets broken into products, etc. Is this the question?

With regard to coding, the question might involve directory vs linking structure. Dupe content issues get into it as well if you navigate to the same content via different paths.

Or is it a question about how to code a drop-down menu? I'm with aakk9999 on this, btw... who I think has gotten to an important issue about what you're asking, that main menus which display all pages on hover end up making SEO for Google very difficult.

But I've had arguments with many "top flight" SEOs who feel exactly the opposite of how I feel about this. Many SEOs say that large drop downs are the way to go because they're "more user-friendly" (which IMO they're not) and that they give the user more choices. Who knows the specifics of what was going in your footer? But, be warned that there's no consensus, and some of us might not agree with your SEO guy at all. In its present form, though, the footer question is too vague to waste energy speculating about.

More clarity on the question would help, and I suggest more focus is needed on the scope of what we're discussing here. The above is a range of main issues that come to mind.

We've had numerous discussions in this forum over a great many years on all of these topics, and I doubt that anyone is going to lay all of them out on one tray... but we can nail down an overview of the basic concerns.

Also, throwing "coding" into the issue potentially confuses what you're really asking about... or at least for me it does. IMO, it's a conceptual issue first that then involves coding to execute. Again, I'm guessing a bunch of things about what you're wanting to ask. I hope this helps to get to a more clarified version of the question(s).


aristotle said...

I'm not sure exactly what this means, but if your intent is to flow most of the link juice to certain particular pages, in my opinion you need to be careful. Making a special effort to flow link juice to particular pages is a form of optimization, and if overdone, it becomes over-optimization. I think Google is wise to this strategy, and you could risk receiving some kind of over-optimization penalty if you're not careful.

aristotle - if I'm understanding what you're saying, I disagree. Matt Cutts has frequently urged webmasters to emphasize their most important pages, even to link to them from their home page. The trick, I feel, is how to do it in a way that will scale.

Regarding linking from home, btw... though there are some who suggest you make your site very flat and try to link to everything from your home page, on a site of any size, global linking from home doesn't scale very well. The more links you add to home, the less link juice each one will flow.

You do need to come up with a structure that puts your link juice where it's needed in the clearest possible way. Usually, a hierarchical structure is the best way to start to do this.

[FranticFish]

These are well worth a read, because your template is informed by your site's structure.

Information Architecture for the Small Site - part 1 [webmasterworld.com]
Information Architecture for the Small Site - part 2 [webmasterworld.com]

[edited by: aakk9999 at 12:18 pm (utc) on Dec 21, 2013]
[edit reason] Well found - added thread names [/edit]

[Whitey]

@FranticFish - Thanks - that's a lot of reading - I'm about to get started.

@Robert Charlton

Also, throwing "coding" into the issue potentially confuses what you're really asking about... or at least for me it does. IMO, it's a conceptual issue first that then involves coding to execute. Again, I'm guessing a bunch of things about what you're wanting to ask. I hope this helps to get to a more clarified version of the question(s).

I have a series of specific code related questions in my mind that I'd like answered or commented on. Sorry that the OP was broad. Let's hone down on some specifics :

1. So let's talk about H1, H2 and H3 tags in the code, for starters, thinking about responsive design for tablets and mobile, as well as desktop.

I've always believed that the h1 tag should be high up in the code, and the supporting h2/h3 tags act like an information / semantic hierarchy that support the h1. I thought this could act like a pyramid to strengthen the context of the page with key paragraphs, or design areas including graphics.

This Feb 6, 2003 thread was ahead of it's time, perhaps.

Using Layers to Position H1 High in the Code [webmasterworld.com...]

@Tedster - Small screen browsers (web enabled mobile phones, etc) will also see your absolutely positioned content the same way spiders do, not positioned at the bottom. Just a caution so you don't try anything too funky. This may well be the year of the small screen!

@SuzyUK - I would put the H1 tag first in the HTML code but set it to display: none using CSS(layers!)
1. the spider will see it first in its logical order
2. if someone using a non css / non image browser views your page the heading will show up for them as a title to the page

I also discovered that NN has a problem if an absolutely placed div is before other relatively placed divs in the HTML

Fast forward 10+ years or so.

( here's some reference material I dug up )

The six heading elements, H1 through H6, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic. Example of use: <H1> [w3.org...]

2009 - Matt Cutts - Does the ordering of heading tags matter? I dug out some reference to reflect on : [youtube.com...]

Some questions :

What importance do members place on the h1 tag as a key indicator for ranking and signal purposes in the code, and how should it appear to maximum effect?

Is it important to have your h1 tag at or near to the top of the code ?

How do you do it if the visual h1 element is not shown on the page high up for design reasons ?

Does the visual size and style of the font matter? e.g. bold / big ?

Does the order of the tags matter, I mean is it ok for the h2 to be above the h1 in the code ( let's say you have a conflict between the visual design and code)?

How do you treat this in responsive design, where minimising information, or even eliminating it from view on a mobile is visually desirable? 2014 is going to be a big year for mobile - so we need to get this right Y/N ?

[JD_Toims]

The six heading elements, H1 through H6, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic. Example of use: <H1> [w3.org...]
I think since things have changed significantly in many ways over the years, I should probably point out the preceding quote is from HTML 2.0 circa 1995 -- See the TOC here: [w3.org...] -- The 2014 edition of HTML heading use is available here:

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

---

Personally, I think one of the important points from the video linked is: They *try* to understand/interpret whatever people do -- It doesn't mean they *do* understand/interpret all the "goofy" things people do on sites correctly, so, as I've said before somewhere [lol] I think following the docs is the safest/best for algorithmic understandability/interpretation accuracy.

---

Fast forward 10+ years or so.

I'm not seeing any issues with modern mobile browsers and absolute/fixed positioning display these days -- Mobile browsers have advanced by miles and miles since the post about absolute positioning applied.

---

Does the order of the tags matter, I mean is it ok for the h2 to be above the h1 in the code ( let's say you have a conflict between the visual design and code)?

I'm not sure why someone wouldn't just change the style and keep the hierarchy correct personally?

I think the answer to most of your questions, from my point of view, could be summarized with: I put the correct structure in place first, then adjust the style as necessary.

[FranticFish]

Does the order of the tags matter... let's say you have a conflict between the visual design and code?

Only a guess: I doubt it matters for much, but I'd venture it does matter.

My impression (and it really could be my imagination) when I redo websites is that there are plenty of little tweaks that individually don't matter much, but collectively do help.

As JT_Toims emphasised, Google will no doubt try to understand any page, no matter how it is marked up, but I personally think that sending them as many of the right signals as you can helps.

I don't think it's a question of 'brownie points', but that the algorithm can be more CERTAIN about your page and perhaps trust it more.

As I said, all conjecture - I could be imagining it all :)

[Str82u]

For headings, in HTML5 specifically, my understanding is that you can use multiple H1 tags but semantically you should keep them in order. If you have a main news page with a list of articles, that page would be like this:

< h1 >These are our articles< /h1 >

< h1 >Title One< /h1 >
Description of article one.
< h1 >Title Two< /h1>
Description of article two.

<<OR>>

< h1 >These are our articles< /h1 >

< h2 >Title One< /h2 >
Description of article one.
< h2 >Title Two< /h2>
Description of article two.


Then on the page with the article:

< h1 >Title Of Article< /h1 >
Synopsis that includes subheadings
< h2 >Subheading One< /h2 >
Details about subheading one.
<h2 >Subheading Two< /h2 >
Details about subheading two.
< h3 >More About Subheading Two< /h3 >
Details to support this heading.
<h2 >Subheading Three< /h2 >
Details about subheading three.

And if you have multiple articles/subjects per page you can stack them:

< h1 >Title Of One Subject< /h1 >
Synopsis that includes subheadings
< h2 >Subheading One< /h2 >
Details about subheading one.
<h2 >Subheading Two< /h2 >
Details about subheading two.

< h1 >Title Of Second Subject< /h1 >
Synopsis that includes subheadings
< h2 >Subheading Three< /h2 >
Details about subheading three.
< h3 >More About Subheading Three< /h3 >
A little more detail for subheading three.
<h2 >Subheading Four< /h2 >
Details about subheading four.

I look at it like this; how would it read if it's printed and turned in for a college course?

As @FranticFish said

My impression (and it really could be my imagination) when I redo websites is that there are plenty of little tweaks that individually don't matter much, but collectively do help.

As JT_Toims emphasised, Google will no doubt try to understand any page, no matter how it is marked up, but I personally think that sending them as many of the right signals as you can helps.

I wouldn't (and don't) do anything tricky in coding them, like using the CSS to rearrange the elements visually, mine are in order in source code. Google may not treat the content any differently but I feel it's effective, proper and works with assistive technology.

EDIT: And remember that GoogleBot can read stylesheets and javascripts; if you go rearranging a page visually, they might think you're being deceptive (that could be MY imagination).

[Whitey]

1. So let's talk about H1, H2 and H3 tags in the code, for starters, thinking about responsive design for tablets and mobile, as well as desktop.

I might move on from this question, even though it would still be good to get other's views.

2. Where do you best position your navigation in the code?

e.g.

Widgets
> Large
> Coloured
> Antique
> Modern
Gadgets
> Permanent
> Short Term Use
> Disposable
Twinkles
> Star shaped
> Pulsating
About Us
> Terms & Conditions
> Privacy
> Shipping Costs
> Contact

or

Country A
Country B
Country C
Country D
..... and so on x 150

Will it make a difference if on a site upgrade you swap the positioning in the code around, provided the semantic hierarchy is maintained?

[JD_Toims]

I don't understand the example.

---

Personally, I put all repeated navigation near the end of the code and display it where ever I need to for the look and feel, but it's not for "gaming" purposes -- It's more about "what's unique/necessary" on the page being presented first in the source.

A visitor with a "regular" browser can "visually skip" the top nav/portion of a page easily, but those with screen readers or even on mobile browsers likely can't as easily "look below it" and also don't likely need to know what the repeated nav menu is on every page they land on before they get to what they are looking for [personally, I think it's annoying], so the "repetitive stuff people can find on an alternate device [screen reader, mobile], but don't need all the time," comes last in my code, even though it's visually displayed differently in "regular" browsers -- Does it hurt/help in search? Hmmm

[Str82u]

I didn't get the example either Whitey.

EDIT: When thinking about links, I think the friendly rule is no more than two clicks to any page... try not to count/use the sitemap.

[Robert Charlton]

When thinking about links, I think the friendly rule is no more than two clicks to any page

I strongly disagree. On a large site, this will necessarily result in a site that's way too flat, with too many links on a page, thus blurring semantic clarity. No more than two clicks to any page would be impossible to scale on a large site.

For a good discussion about how many clicks, see...

The "Mega Menu" Problem and Google Rankings
Jul 1, 2008
http://www.webmasterworld.com/google/3687528.htm [webmasterworld.com]

In particular, see tedster's post, which I'm quoting in part...

Many people worry about the ancient "3-click rule" that said a visitor should be able to go from any page to any other within 3 clicks. Well, that widely discussed "rule' from the '90s has been debunked in actual testing. the original rule was a nice guess, but unsupported by real data.

What matters to the user most is what Jakob Nielsen calls the "information scent". As long as the information scent for what they want keeps growing stronger, the user keeps clicking.

The information scent is what matters.

PS: I don't get Whitey's example either.

[Whitey]

I don't understand the example.

I'll try to clarify the above with these questions:

The second problem is putting all links to the footer - this also muddies the semantic relevance.

@aakk9999 - do you suggest putting navigation links high in the code?

Is the positioning of all navigation links, generally speaking, recommended higher in the code?

Is it better to place those links in semantic order in the code? ( There may be design instances where the navigation would be required to be in different places).

If navigation links are moved from a high position in the code, to a different position in the code [ say lower ], during a redesign, will that risk any difference to the site's ranking stability.

Does that make more sense?

[Robert Charlton]

Whitey, as I see it, the issue isn't about the position of "all links" on a page... the issue is that "all links" should not be used on any one page. I believe that aakk9999 is suggesting that too many links on a page will muddle semantic relevance.

I'm getting a sense from your questions... and I could well be misinterpreting... that you're envisioning building the entire nav structure (or at least the nav framework) for a site on a single page template.

[Whitey]

I'll do some more digging, but I suspect, for example , footer links may be given less relevance than side bar or header links.

Navigation menu going across the page or down the page in a column. This often put in a sidebar, or may form part of the header.
## A footer that goes across the bottom of the site and contains secondary information such as copyright information and contact details. [w3.org...]
My continuing concern is that "some" at least of those links in a "wrong" position in the code, may get confused or not send a clear enough signal on relevance and/or appropriate semantic interpretation. NB the use of the word "secondary". It's clear enough with pages like "About Us" , but as @aakk9999 points out, there may be a risk of those links and referred pages getting "muddied"

If so the question still remains on how to better structure those links in the code.

Probably a large proportion of websites are incorrectly structured and Google may handle this fine, yet I doubt perfectly. So I'm rather talking about what is best practice to avoid any mis interpretations on relevance - and stability when changing positions with navigation link structures in the code. What sends the clearest signals to Google and other search engines with regards to that link structure in the code, do changes to the positioning matter, and where should it be placed.

@Robert_Charlton - I'm with you 100% on the issue with regards to the quantity of links on a page ( +1 ); but separately are you saying that the positioning of those links in the code is not important? ( I'm yet to be convinced )

If the secondary menu opens after clicking on the main nav option, then links to other sections are limited to the top level of navigation only, and the secondary menu shown is for the current section only, giving the section more semantic relevance.

The second problem is putting all links to the footer - this also muddies the semanthic relevance.

Isn't this more of a case that the secondary links can interfere with the semantics of the primary navigation, rather than just the quantity.

Maybe to help clarify my question, we just stick with "primary navigation" for a moment and where that should ideally appear in the code, and whether movement on redesign matters.

[aakk9999]

I believe that aakk9999 is suggesting that too many links on a page will muddle semantic relevance.

Robert's guess was correct :)

With regards to footer links, I would have there what would normally be expected to be found there, such as Privacy, ToS, About Us, Credits and similar. I personally think Google discounts these when deciding on semantic relevance of the page, although I have no proof for this.

Probably a large proportion of websites are incorrectly structured and Google may handle this fine, yet I doubt perfectly.

If "handling it fine" means page being indexed, then yes, Google handles it fine. But what we are talking about is ranking higher for a chosen keyword(s) because the page has a better semantic relevance for the term searched.

are you saying that the positioning of those links in the code is not important?

I would first do a good main nav and secondary nav structure. Then I would use in-content linking where it makes sense, but would not go overboard.

There is a good (old) thread started by tedster that discusses site silos and "silo" internal linking within the topic versus "mesh" linking across the topics definitely worth reading:

brainstorm: How might Google measure the site, and not just a page?
March 2007
http://www.webmasterworld.com/google/3292372.htm [webmasterworld.com]
.

[Whitey]

So do you think putting main navigation high up in the code is important and / or moving the navigation around in the code can upset the stability of the site?

[aakk9999]

I would say that the clearest signals are that the main navigation in the code is specified before the content, before the secondary navigation of the main nav theme and that the main navigation is consistent on pages within the code with regards to the implementation, nav. choices and placement.

Before anybody jumps on this answer - note that the emphasis is on the clearest signals and not whether Google would understand a navigation that is structured differently (i.e. whether Google would understand the navigation that is inconsistent between pages or placed where most websites would not place it).

If by moving navigation around you mean having navigation differently structured on different pages, then I think that yes, this can be confusing.

If by moving navigation around you mean one-off change to a new navigation structure, then this can be positive or negative depending on whether the new navigation is improvement over the old one, but short term I suspect the site would be unstable even if the long term effect would be positive (at least this is my experience).

[White_Dove]

I'm using nav in the header and nav in aside menus ul on some pages and sites. And old fashion div ul li ul li /ul /li li /ul structures on others. No mega menus at all, I can not scale them into content silos. This may be over optimized for some sites, and maybe some of my other practices would be under optimized on those same sites. Its easy to personalize methods based on past success and failure.

Placement is where users expects them, near the top of the page and as a sidebar. The sidebar also serves as a design element. Reading all the way across the screen is harder on the users than reading half way then going to the next line. UPDATE: when it comes to placement within the code, I prefer content first for easier influence over the descriptions.

Widget navigation.

Widgets
> Large
> Coloured
> Antique
> Modern
Gadgets
Twinkles
About Us

Gadget navigation.

Widgets
Gadgets
> Permanent
> Short Term Use
> Disposable
Twinkles
About Us

If there is a need to link from gadgets > "short term use" to widgets > "large" it is done within the content.

One of the reasons for no mega menus is from information on Robert Charlton link The "Mega Menu" Problem and Google Rankings and other sources of information such as heat maps that convinced me they don't help users.

[aakk9999]

^^^ This is the way I do navigation too. I also prefer "on click" rather than "hover" menus.

By the way, an excellent presentation on what are the active navigation links when the user is on "Widget" page within the Widgets silo and when they are on a Gadget page within Gadgets silo.

[incrediBILL]

Things like breadcrumbs , call out link navigation, arrangements above and below the fold etc etc

Unless I'm doing an ecommerce site I rarely do breakcrumbs and when it comes to the fold, who's fold? The fold on the smart phone, tablet, netbook, laptop or desktop? A lot of SEO, beyond the basics, unless proven by facts gathered from actual testing and not speculation and guessing, are similar to old wives tales mainly spread by old wives which explains people still promoting "revisit-after" all these years later but I digress.

Having recently launched a couple of RWD sites using Bootstrap that managed to all hit the top 10 for their phrases, I can tell you the basics still work. Top down title, H1, H2, etc. and I used every label and alt text, etc. Not sure it mattered one way or the other but I went extensionless on all the new sites and they rank just as well as my other sites. Made sure the titles and page names were emphasizing the right keywords in the right places as many screw up such simple stuff. Plus image file names and other media need the right file names.

Where people typically lose their mind is forgetting that SE's really don't understand semantics of the language that well and words like "it, that, them, they" etc. don't make much sense to computers while humans can easily figure it out. Spell 'it' out for the search engines, literally, and it helps ESL readers parse the content better as well.

I never sweat the navigation, just sweat the wording on the navigation, any tool tips, etc. as that seems to make or break my ranking opposed to worrying other stuff that'll do nothing but give you second doubts and leads to ulcers. Keep the navigation simple and some put a second copy on the bottom of the page, I don't. I also don't jerk around with nofollow games trying to "funnel" the crawl as that's just stupid and one mistake can be catastrophic. Let the search engine figure it out, they're designed for doing that as long as your site isn't designed by drunken monkeys you should be fine.

Basically, leave nothing to interpretation, spell it out, avoid cutesy javascript menus and do it in HTML and CSS which works best. If you're going to use big steaming piles of javascript keep it in a separate file, not leave anything to change.

Last but not least, all of the above helps with validation and YOU MUST VALIDATE! I'm not positive but I think just like getting extra points for neatness in school that the SE's give you bonus points for not server up garbage as a sign of quality.

Cross all your T's, dot all your I's, and then sit back, wait, and see what happens.

I did nothing special, really, and I bumped out sites that had been parked there for years on the same exact terms, easily snapped up a few #1 spots. No, I didn't run out and do any link building either but it wasn't a terribly competitive term and I was up against amateur hour SEO efforts on the competition. Candy, baby, separation.

In other words, use KISS principles and common sense and you'll be fine.