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.
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
-
What is the best way to handle annual events on a website?
Every year our company has a user conference with between 300 - 400 attendees. I've just begun giving the event more of a presence on our website. I'm wondering, what is the best way to handle highlights from previous years? Would it be to create an archive (e.g. www.companyname.com/eventname/2015) while constantly updating the main landing page to promote the current event? We also use an event website (cvent) to handle our registrations. So once we have an agenda for the current years event I do a temporary redirect from the main landing page to the registration website. I don't really like this practice and I feel like it might be better to keep all of the info on the main domain. Wondering if anybody has any opinions or feedback on that process as well. Just looking for best practices or what others have done and have had success with.
Web Design | | Brando161 -
SEO Consulting for HUGE Website. How Big Is TOO Big Of A Change?
SEO Consulting for a HUGE Website. Their h1 tags have instagram/twitter, h2 have their menu/what's trending and h3 is the article title. Here's what I want to do... MY MAIN QUESTION: This site has tens of thousands of pages, all articles beyond the few dozen category/tag pages they have. If I change the structure to the following, will it be too much of a system shock to Google? Will this actually HURT them? Currently on the site: - h1 tags point to Twitter/Instagram sidebar widgets
Web Design | | BrianGilmore
h2 tags point to the menu/what’s trending section (which is the same on every page)
h3 points to the Title of the Article I want to change it to this: - h1 tags should delineate the article's name. That's all they should really be used for.
h2-4 should be reserved for article subheadings to be used by the editorial staff. EDIT: 30% of their >11 million monthly uniques come from search. I don't want to eff with that, but the way that NONE of their pages have optimized words, they have no sitemap, webmaster tools and are still doing this well makes me think that even putting in minimal changes to tidy things up will help them bring it to 70% organic search.0 -
SEO Value to Improving HTML Code of Website That Validates According to W3C?
Greetings MOZ Community: My real estate website www.nyc-officespace-leader.com, originally designed in Drupal, was relaunched using Wordpress in 2013. The code for all URLs validates. The relaunch was performed by developers in Argentina. As part of an SEO campaign, I very reputable design/coding company in the has provided new wire frames to correct useability issues holding back conversions. In the course of the design adjustments they inspected the code and have told me that it is inefficient, that a number of shortcuts were taken and that the code does not conform to Wordpress best practices. What concerns me most is their claim that the quality of coding makes it more difficult for Google to index the site and this may be detrimental to ranking. Is it possible for the original developers to clean up this code if the deficiencies are pointed out to them? Or once coding shortcuts are taken are they impossible to fix? Would it make sense for me to request that the new design team put together a list of HTML deficiencies and provide to the original developers and ask them to correct? I am spending tens of thousands of dollars on content optimization, content marketing. It would be absurd if these coding issues would ultimately prevent improvement in ranking and traffic. At the same time, I hate to be a cynic but the domestic design/coding firm, while being very professional, does have an incentive in getting me to ditch the original design so I commit to an costly rebranding. If these issues are really minor maybe it is not worth making the effort to clean up the code (assuming that is even possible) and focus the budget on content marketing. Any thoughts?
Web Design | | Kingalan10 -
How we can check whether website design is good for SEO or not?
Is there any tool available to check website design whether it is good for SEO or not?
Web Design | | ross254sidney0 -
Ecommerce Site - SEO
We have a Business Catalyst Site with the Same product Listed in 2 different catalogs. Each product page is the same page with different URLs you can see it here: http://www.yourpharmacy.co.nz/beauty/clarins-skincare/clarins-advanced-extra-firming-eye-contour-cream-20ml http://www.yourpharmacy.co.nz/clarins/clarins-advanced-extra-firming-eye-contour-cream-20ml Any suggestions welcome
Web Design | | OnlineAssetPartners0 -
What seo benefit does setting up a photo gallery where each photo is a separate web page?
what seo benefit does setting up a photo gallery where each photo is a separate web page? My old SEO guy set up my photo gallery like that claiming that because each photo was a separate page, it added a big seo benefit and i never understood what he was talking about. Maybe alt text on the photo with key phrases in it pointing to my other pages to give my site a theme for google? I'm not really sure. He has since moved away and i am considering redoing the photo gallery to multiple images on one page to be more user friendly to my users. This photo gallery is 3 years old and the photos might have some page rank to them helping my site so i don't want to remove this gallery if there really is a benefit to it and it will hurt my site. I once removed four static page rank 3 pages from my site that weren't used for my site anymore and my rankings dropped 5 positions. Thoughts anyone? Thanks! Ron
Web Design | | Ron100 -
Hi Everybody. I have a large site that is made up of the main site then a large support site. The support site has a lot of overlapping content and similar titles. Would it be beneficial to separate the two? Thank you. All answers appreciated.
Hi Everybody. I have a large site that is made up of the main site then a large support site. The support site has a lot of overlapping content and similar titles. Would it be beneficial to separate the two? Thank you. All answers appreciated.
Web Design | | arithon0 -
Best way of conserving link juice from non important pages
If I have a bunch of non important pages on my website which are of little use in the SE's index - IE contact us pages, pages which are near duplicate and conflict with KW's targetting other pages etc, what is the best way of retaining the link juice that would normally be passed to these pages? Most recent discussion I have read has said that with nofollow you effectively just loose link juice, as opposed to conserving it, so that doesn't seem a great option. If I do "noindex" on these pages, would that conserve the link juice in the site, or again would it be just lost? It seems quite a tricky situation as many pages are legitimate for customer usability, but are not worth having in the SE's index and you better off consolidating link juice - so it seems you are getting penilised for making something "for users". Thanks
Web Design | | James770