Html 5 main and secondary navigation for SEO best performances
-
I am building a website which will have a main navigation related to the site and each link of the main navigation will have a secondary navigation. We do not want to use a megamenu style navigation. I will try to explain it with a example:
Let's start with an example for a computer store "My PC Store", the Main Navigation would be:
Desktop PC's Notebook & Tablets
MultimediaWhen clicking on the "Notebook & Tablets" the user is directed to the page domain.com/notebook-tablet.html and on this page the secondary navigation appears: Laptop Netbook Tablets / iPad I am confused on how I should organize the semantic navigation for best SEO performances and I need advice / suggestions. I thought about 2 different ways to do it but which one is more appropriate in terms of SEO? PROPOSITION A Home Page:
<header>
My PC Store <nav>
- Desktop PC's
- Notebook & Tablets
- Multimedia </nav> </header>
Sub-Page (Notebook & Tablets):
<nav>(or
<aside>?)
- Desktop PC's
- Notebook & Tablets
- Multimedia </aside>
</nav>
<header>
Notebook & Tablets <nav>
- Laptop
- Netbook
- Tablets / iPad </nav> </header>
As you notice on the home page the Main Site Navigation is included in the
<header>while it is not in the sub-pages.
PROPOSITION B
Home Page:
<header>
My PC Store
<nav>
-
Desktop PC's
-
Notebook & Tablets
-
Multimedia
</nav>
</header>
Sub-Page (Notebook & Tablets):
<header>
Notebook & Tablets <nav>
- Desktop PC's
- Notebook & Tablets
- Multimedia </nav> # Notebook & Tablets * Laptop
- Netbook
- Tablets / iPad </header>
The main navgation remains always in the
<header>(home page / sub-pages) of all page.
I need suggestions... How would you guys organize the nav ?
</header>
</header>
-
Apologies, typed that up wrong. Have updated above post.
-
Why are you inserting
outside
<header>?</header>
-
My apologies. I would go with the following example in order to maintain a good SEO with your webpage headers and also a solid navigation:
Home page:
<header>
My PC Store
<nav>
-
Desktop PC's
-
Notebook & Tablets
-
Multimedia
</nav>
</header>
Sub Page:
<header>
<nav>
Notebook & Tablets
*** Desktop PC's**
- Notebook & Tablets
*** Multimedia**
</nav>
</header>
**<nav>
- Laptop
- Netbook
- Tablets / iPad </nav>**
Hope this helps.
Matt.
-
-
OK but you don't answer to my question since we do not want any mega menu or drop down menu.
-
This is true if it is wrapped within JavaScript, so that the search engines cannot read it. However, if you use two separate navigation menus then you can negate this problem.
Also, if you were to code up the 'mega menu' style navigation with CSS3 then you could also avoid these crawling problems and make the navigation much more search-engine friendly.
In general, I try to avoid using sub-pages within site to extend navigation (unless it is completely different product areas or business verticals).
Matt.
-
Well there are in general SEO concerns in the use of navigation Mega Menu style and this is why we want to avoid it.
-
Hi There,
I think I have got the jist of what you're trying to achieve.
What I would recommend is that you have links to Desktop PC's, Notebook & Tablets, Multimedia, Laptop, Netbook, Tablets / iPad directly from your homepage. The reason being that this will allow the search engines to crawl your webpages easier and the subcategory pages won't be so deep within the domain.
What I mean is that I would use either a drop down list, so that when the Notebook & Tablets is hovered over, the subcategories are then displayed below it. Alternatively, you could have a secondory naviagtion on the homepage, i.e. with an extensive drop-down list lower down or at the side of the webpage.
Great examples of this type of navigation can be found on: http://www.ebuyer.com or http://www.musicmatters.co.uk/shop.html (look at the secondary nav on the right for the Music Matters shop page.
I hope this helps.
Matt.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
International SEO | Question about Hreflang
Hi, I have an International SEO question and would like to get some help from Moz forum: Our company has a Taiwan office for a few years already, but never had any Traditional Chinese (lang code: ZH-TW) webpage publihsed on our site: https://www.abc.com. The regional team recently has built a 50 page ZH-TW microsite based on translations from select pages from abc.com. The site will have it's own navigation. Currently our CMS doesn't have a language directory to support ZH-TW (such as https://www.abc.com/zh-tw) If we do not add a directory, the pages would have to be published as ZH nodes (for Simplified CHINESE) with ZH language tags and canonicals. The only tag we can set for ZH-TW would be the Hreflang tag. Example:
Web Design | | ThinkingPanda0 -
Best Practice For Website Redesign & Migration
Hi, I'm looking to redesign my current live website to a new Wordpress site using "Studiopress Enterprise Theme". I'm new to Wordpress and therefore will be embarking on lots of testing & development.
Web Design | | Mark_Ch
I do not want to hurt my current live website whilst testing the new Wordpress site. However, it would be nice to bring the test site into the current live environment without changing untold urls, etc. Question
What is the best practice to setup this new Wordpress environment for my domain: www.sampledomain.co.uk How would you restrict Google, Bing, etc from indexing, etc. whilst testing in the live environment. What other consideration should I be aware of Thanks Mark0 -
White Text / Black Background & SEO Impact
Does anyone know of any testing / studies with evidence that Google prefers dark text on a light background vs. light text on a dark background? I have a website that currently has light text on a black background, and really like the way it looks, but am concerned that the style may be hurting SEO. Moreover, redesigning something inverse with the same quality would be a large project and fairly costly, so I'd like to make sure the benefit will really be worth the cost before moving forward.
Web Design | | Bromtec0 -
Finding a good wordpress web developer for SEO fixes
I have gotten a good audit done of my site now it is time to get the fixes done. I have a developer I worked with for a long time that is good at coding and fixes on my site. However I am not confident in his abilities to execute some of the seo changes that need to be done. Their are some common stuff he can tackle but when it comes to GWT and proper handling of 404's and 301's and other seo tasks I am not sure if he is the right choice.Maybe due to a lack of experience of dealing with the issues I have or is just not his specialty or web devs just don't know seo...lol.... Is obvious a lot of SEO's don't make the changes themselves but leave it up to the devs to handle it their suggestions and fixes. But from my experience devs are not so well versed in seo and you have a hard time knowing if they are doing it correct or can even do it.(of course they will say they can they want your cash and i understand that ). In particular a good amount of wordpress devs claim to know seo but i find that far from the truth.Even when guided to issues some of them will often leave you disappointed. Sorry for my rant! Now to my question , obviously not many SEO's make the actual code changes themselves (how i wish i knew a one that did) are their ones out their that do? If not how do i find a good wordpress dev that can make proper seo changes and knows his stuff....example i need someone who can trouble shoot and track down some serious GWT I have and deal with some hardcore 404 & 301 issues . A lot claim to know but when push comes to shove I have been left disappointed. Thanks in advance for your help and suggestions or recommendations.
Web Design | | chrisyak0 -
SEO and Server Connectivity....
Good Morning/Evening Mozzers, I arrive at work this morning with 5 emails from GWT for my separate domains reading, **"Googlebot can't access your site - **Over the last 24 hours, Googlebot encountered 39 errors while attempting to connect to your site. Your site's overall connection failure rate is 15.1%." I have passed this on to the Web Dev team to resolve ASAP. My Question, will server connectivity issues harm my rankings? Is there a danger if this continues that URL's could be de-indexed? Input would be greatly appreciated.
Web Design | | RobertChapman0 -
Alternatives to Wordpress for updating content of a static html site
I have a static html site which I cannot update myself. What solutions/ programs would you recommend for gaining the ability to update it myself? I'm reluctant to switch to WordPress because the sites that use any CMS that are hosted by my web hosting company get routinely hacked. Thank you!
Web Design | | translate0 -
What are some good places to read about SEO with Joomla CMS?
I recently was asked by a potential client to work with them on Joomla based website. I very rarely come across people with Joomla based websites and am struggling to find good resources outside of Joomla's own community site. At this point, I am not very comfortable working with them on Joomla. Any tips or advice?
Web Design | | GCSMasone0 -
How do you deal with lack of understanding about SEO?
Since I subcontract out to web design people or work doing SEO for small businesses, I am wondering how others (and if others) deal with non-compliance with good SEO practices. For instance, I had a web designer change a few of the terms for a website because the client wanted another term they thought was better instead of sticking to the SEO they contracted for and she diluted the site architecture in the process. A former small business client called for some changes and I discovered she had made some changes she "thought were good terms." Do you encounter such issues, and if so, how do you deal with them--or do you just oblige the request? Also, I've been getting requests to do "partial" seo instead of entire sites. Is that ever a good idea and if so, how would you handle it? If not, how do you successfully dissuade a client from doing so? (Both small biz and web design peeps)
Web Design | | TheARKlady0