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
-
AMP vs Responsive Design? Mobile SEO
Hello !! We are developing a new website with responsive design. As is recommended, the idea would be to have a unique site for mobile and desktop, with same content and same url for both devices, using responsive design to adapt the layout depending on the device. My doubt in here is about the AMP pages? If my website has responsive design, perfectly optimized for mobile do I need somehow AMP pages? As far as I understand, these amp pages would be useful if I had different pages for mobile, but this is not the case. Am I correct or am I missing something? Thanks for your help :
Web Design | | AutoEurope1 -
How does lazy load effect SEO?
One of my clients implemented lazy load on part of the navigation and I am wondering what the effects will be. Specifically, the drop-down navigation does not load until you hover over it. That means when you look at the page source that drop down navigation is no longer there. I am wondering if that means the google bot no longer sees the links in the navigation drop down. I am looking into this because the dev department of this company is going to do what it wants to and they need proof that its a bad move. I already suspect that it is. Too early to tell what the effects will be and not sure if there is a built-in delay in the algorithm as to when it will impact rankings. Ultimately, I am wondering if my belief that if you can't see it in the page source then as far as that particular page goes it is not seen. That would be an important thing to verify as being true.
Web Design | | KentH0 -
Client Portal and SEO Considerations?
Hi Moz and Moz fans, We are looking to add a client portal to the website. Basically, I haven't found too much on this with regard to SEO. The idea would be that certain parts of the website would be hidden under a pay wall and for subscribers, they would be able to see all content. I am wondering if anyone has any experience with that and what SEO considerations to take into account. One thing we are particularly concerned about is how Google will index the portions of the website behind the pay wall, if at all. Obviously, we would rather that they don't index it, so that people can't find a way to get to the info without paying. I would imagine it would have to do with the type of coding, however, I am not a coding guru, so I am not 100% on that. Anyway, anyone that has any experience in this kind of thing and can comment on this at all, any comment is welcome. Also, any documentation that could be helpful would be welcome too. Thanks
Web Design | | Brian_Dowd0 -
Do pull quotes affect SEO positively or negatively?
I like the design element of a pull quote to ad interest and highlight an important point. If I use an exact quote from the page in a pull quote on that page, does that negatively affect SEO as duplicate content? Are there formatting or tagging methods that could help pull quotes to boost SEO? For clarity, by "pull quote" I mean a stylized bit of text that floats on a page in such a way that the body text wraps around it. It is actual text (not text embedded in a graphic) but it behaves like an image with text wrapping around it. Here's an example (in red on the right side): http://www.21ct.com/resources/news-room/21ct-announces-its-latest-us-patent-for-advancing-big-data-security/
Web Design | | kyle21ct0 -
Wordpress Frameworks for SEO - Genesis - Does it Get Any Better?
I'm sure there's a ton of people in this community running Wordpress, any Genesis developers/users out there? For anybody who doesn't know, Genesis is a parent framework for building wordpress child themes. It saves a ton of time for people that aren't too handy w/ php (like me). I'm working on a few sites locally with it right now, and it's really impressive. I'm seriously never planning on using another WP framework. It also integrates perfectly with Yoast SEO, which is something not all frameworks do. So I thought I'd try to get some input from the community here, anybody have another framework they like? Or have an opinion on the SEO benefit of genesis? Would love to hear...
Web Design | | SVmedia0 -
Switching from HTML Static to WordPress Platform - SEO
Hi All, Hope everyone is doing well. I am currentyl in the process of having a re-design to myu HTML Static Site, I am switching to WordPress. My site is still running now until the new one is prepared. My question is: I do rank pretty well for some of our strong local keywords, we also have a FEW links pointing to inner pages with an extension of .HTML, should I set the the WordPress URL's to reflect .HTML or will the Search Enginesfigure out that http://www.domain/innerpage.html is the same as http://www.domain/innerpage/ or is it NOT the same. Should I switch or not? Thanks for your input Jimmy
Web Design | | jimmy02250 -
What do web designers consider to be SEO
I'm putting together an article about Web Designers and SEO. The basic crux is that most designers will at most (if you are lucky) add in title tags, maybe pretty URL's and HTML links and call it SEO friendly. (lot's who don't probably but also lot's who are even worse) Of course I want it to be a bit controversial so please feel free to let rip. My argument is clients who have previously had site's that have had "SEO on them", know think that all SEO is a waste of time as their previous experience didn't produce the traffic and sales they were expecting. I don't know many designers who independently consider a site marketing strategy and how a site is going to generate links in the long term. I'm sure most of us have read this post on SEO responsiblities but becasue the first port of call for most business owners are the web designers, our offering is undermined by their misunderstandings and in some cases mis-sellings. So under the working title, "Why Web Designers Are Bad For SEO", any care to share some imput.
Web Design | | FDC1 -
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