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
-
Are provincial third-level domains bad for SEO?
My prospect's domain ends in ".on.ca" (Ontario, Canada). The structure of their site is companyname.on.ca (main page) and all other pages are sub-folders (companyname.on.ca/page-name-1 All pages are no more than two levels deep. I'm wondering if anyone knows if the provincial sub-domain (.on.ca) presents an SEO challenge?
Web Design | | 22Eighteen1 -
SEO Audit for site redesign
I'm in the process of preparing my company's ecommerce site for a redesign - largely to move to a responsive design and improve issues with UI and some much-needed features. This is a very small ecommerce business (Less than $300K annually), and we have settled on Magento Community Edition for our platform. We understand it to be very "SEO" friendly, and its similar to our current platform - it gives us a lot of flexibility in design, and it appears scalable. While I am aware of our current sites shortcomings (from an SEO standpoint), I was wondering if I should employ an SEO person/company to do a pre/post redesign audit. I looked at the MOZ checklist, and ran my site through Hubspot and WooRanks free tools, and am aware of what they are reporting as SEO items to be fixed. As I am so small, I was wondering if an SEO audit in addition to what I already know might be overkill? Any thoughts/suggestions are welcome.
Web Design | | Artfx1 -
What would be the best way to translate my website for international seo?
I am planning on creating a multi language website that targets different countries and would like to know what would be the best way to translate my content from English to multiple different languages (French, Spanish, Swedish, Chinese, etc.). I would hire a translator but doing so for all these different languages would be too costly. Using Google translate will leave me with at best a rough translation. What are my other options? Is there a website that can provide me a better translation? Would Fiver be a better/cheaper alternative? Thoughts?
Web Design | | Shawn1240 -
Best way to handle Spanish/English WEBSITE
Hey guys, How are you doing? I have a website (www.aceromart.com ) in which the primary language is Spanish. The company is oriented toward the Mexican Audience. However, recently we are dealing with many U.S companies. Also, we want to be included in the Yahoo Directory and several other directories which demand a U.S version of the website. So i want to have a U.S version of the website. My ecommerce is based in the NETWORK Solutions platform and has around 1,000 products and pages. What is the best way to include an English version of the website. Ive seen some pages using the Google traslate tool, which only traslates the text. Hope to hear some of your ideas, Regards,
Web Design | | JesusD0 -
Worth Splitting Up Main Site into Several Microsites?
The company I work for offers a variety of very different products, that are sold to different audiences. Right now (and for the past 4 years) all the products have been listed on one main website. Over the years, we have accumulated over 200,000 links and rank relatively well in most of the product-specific keywords. Still, for business purposes we really feel that having a unique site specific to each product would be more beneficial than having them all on one site. What are the pros and cons of making a move to different subdomains from a main site. (i.e. instead of www.cleanedison.com/solar we would set up a solar.cleanedison.com)
Web Design | | CleanEdisonInc0 -
Websites with only one "html file" and page href # is good for SEO?
I bought one website from templatemonster that contains only one HTML and the pages are generated by links (PROGRAMACAO) My website: www.nextformaturas.com.br This is good in term of SEO? or it is better an website with deveral pages with diferent contents? What are the pros and cons? I really lost on this.
Web Design | | Naghirniac0 -
SEO Friendly Image Swap Functionality Software
Anyone know of any software for this... I need a simple way to create SEO friendly Image Swap Functionality on multiple product pages of a static site. The idea is that customers can see different images within the product screen by clicking on thumbnails. For SEO purposes it is essential that: The rollover does not create a new URL when the product images are cycled The image needs to have an alt attribute (a different attribute set by the client for each product) As per: http://www.seomoz.org/blog/tips-and-musthaves-for-your-ecommerce-platform Thanks in advance. Justin
Web Design | | GrouchyKids0 -
Best Practices for web layout dimensions
Hello Moz community, I have my own ideas...but what are your opinions on best practices for landing page width size in pixels 900px 720px What is a common pixel height for "above the fold"...my target is North America
Web Design | | johnshearer0