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
-
Index Page Redirect to Home Page? Best Practices...
Hi, I am wondering what the best practice is when a site has an index page and a home page? I have two pages, listed below, and want to know if I should 301 redirect my "index" page to my standard home page. The home page is where I would like all traffic to fall on for our website. Additionally, I used the rel=canonical tag years ago on the index page to indicate that the home page is the main content. Home Page - https://www.1099pro.com/ (PA 45) Home Page Canonical: rel="canonical" href="https://www.1099pro.com/"/> Index Page - https://www.1099pro.com/index.asp (PA - 33) Index Page Canonical: rel="canonical" href="https://www.1099pro.com/"/> It seems to me that there is some extra juice that could be passed to my home page (which is the page that ranks highly for our major keywords) by 301 redirecting the index page. Is there any reason why I should not do that? Really appreciate any help - especially with extra explanations - for the simple minded like me ;)! -Michael
Web Design | | Stew2220 -
Magento 2.1 Multi Store / SEO
This is quite technical but I'm hoping a Magento expert can clear this up for me. Currently my company has two websites on separate Opencart platforms. What I'm doing now is building a Magento website and using the multi store function as well as a few modules to combine the two sites, the aim being that the link juice is shared and I can focus my SEO efforts on the one site instead of two, thus reducing my workload while maintaining the benefits. This is the intended layout: www.domain.com www.domain.com/us I have created a sub-folder (not a subdomain) as this seems to be the best way to share link juice between the new, combined sites (as well as 301s from the old, redundant site). At the moment I have created 2 separate websites, stores and store views (see attached) and have configured it according to the Magento guide, so I know that technically this is correct but I need to make sure that I have done it correctly in relation to SEO. Is the sub-folder set up correctly for instance? Currently the only files to populate that sub-folder are a htaccess, error log and index.php (see attached). Also, is there anything I could be missing in relation to SEO within the parameters of what I am trying to achieve? Additionally, only one store view appears in the "change store view" section of the home page. This is causing me to question if I have set it up correctly, because I had assumed both store views would appear even if they were under different websites (attached). OR do I simply use the same website and create two stores and store views? Do I also need to create a separate database for each website/store/store view? I would very much appreciate if someone could help out here. Thank you. In1Gi7t pyfM03y nUQoMz1
Web Design | | moon-boots0 -
Can anyone help me detect some SEO improvements onpage please...
Can anyone help me detect some SEO improvements onpage please... I have shortened the website URl so its not easily found when searched via search engines.. http://goo.gl/GlfMRl Please have a look and give me some tips. Thanks
Web Design | | Nettv0 -
Google HTML, CSS and javascript styleguides ?
Who's following the Google style guides especially in HTML, CSS and javascript? What are the benefits of following the style guides? I am thinking of sending the style guides to our web development team before we launch our new site but I think there might be some conflicts. I'm an SEO and not programmer or web developer and I'm sure there are some "rules" that these web dev guys should follow and break as well. Thanks in advance! 🙂
Web Design | | esiow20130 -
Redirect based on location best practice clarification?
Hi, i have a question that i have seen some other have also had. The question is what is the best practice to serve the location specific page to the user (based on their location)? This post (http://www.seomoz.org/q/redirecting-users-based-on-location) suggests against automatically redirecting the user based on IP address. I guess the primary concern is that Google bot will also be redirected in this case... I see a number of well known sites use automatic redirect based on location. Take Urbanspoon for example (http://www.urbanspoon.com/), they use a 302 redirect to redirect to location specific page. Do they not redirect Google bot? Is there any way to test this? Can creating a rule to exclude crawlers from redirect cause SEO problems? How? Another example that i am somewhat confused as to how it works effectively is groupon.com.au It selects my closest city (i assume using IP), however the URL stays as the root URL. For example, i typed in http://www.groupon.com.au/ and it stays as http://www.groupon.com.au/ with the city chosen as "Melbourne". The canonical url for this page is the root URL (ie http://www.groupon.com.au/). If you then select "change city" and click the same city (ie Melbourne), it redirects to http://www.groupon.com.au/deals/melbourne. Canonical URL of this page is http://www.groupon.com.au/deals/melbourne. How is this not duplicate content? Can you please advise on the best way to redirect (ideally automatically), to provide the best user experience, while still having Google bot able to crawl the site effectively? Thanks
Web Design | | blackrails0 -
Pages vs. Posts for SEO
Hi, I would like your thoughts about pages vs. posts for SEO. I understand the difference in terms of WP structure and have read the SEOmoz blog post about setting up your site for SEO success (http://www.seomoz.org/blog/setup-wordpress-for-seo-success). However, if you're trying to rank for a particular keyword, it seems that either one could work, from an on-page SEO perspective, as far as title tag, URL, meta description, etc. So how do you decide whether to set up a page vs. a post? What are the pros and cons, from an SEO perspective, about using one vs. the other? Thanks in advance! Carolina
Web Design | | csmm0 -
Does changing nameservers and a new site design affect SEO dramatically
We are about to change nameservers and upload a new website design design, completely rebuilt website to that new hosting, will this effect our seo efforts previously and have an effect on our SEO rankings?
Web Design | | CompleteOffice0 -
SEO Considerations for a Platform Change
We are getting ready to move our e-commerce platform from Zencart to Magento as the original Zencart framework is pretty dated. while I'm excited to move to a more modern platform, I'm terrified at the potential SEO risk involved with doing so given that all URLs will likely be different and we're considering updating many product listings. Almost all of the site's traffic is organic, so maintaining rankings is extremely important. I'd love any advice, but especially that related to: Best way to redirect all new URLs sitewide The prudence of heavily editing product listings at the same time of redirecting the URL (i.e. updating product descriptions) Site structure: Should I strive to keep the new site link structure as similar to the old as possible? Resources or guides on transitioning a site from a SEO perspective Other major facets I'm missing I appreciate any help or sights you can offer! Thank you....
Web Design | | AndrewY0