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
-
Mega Menus and SEO
Hi Everyone, I know this has been brought up before, but wanted your opinion for 2020. I have a new client that is hesitant to do a mega menu for their huge site due to the amount of links and "dilution". I have quite a few clients with mega menus with no problems at all from an SEO standpoint. But I can understand his perspective. I am suggesting that we have the main links (looking at GA) as the the navigation, then clicking them takes you to subcategory page listing all the subcats within. Problem is that the developer/designer has made this mega menu already and it is pretty slick. Now they already are killing it search-wise on Google, but don't have a mega menu or a secondary category page. Just a a category with too many products, so we are trying to go one way or the other. Any opinions on which route to best take from a user and SEO perspective?
Web Design | | vetofunk0 -
Making html table as 'seofriendly' as possible
Hi, On my website I have a table with a list of products, on every row I have a different product and a different property on each column. The table is made with css so the html code is clean. The problem is (I guess) that google doesn't 'understand' what its inside on the table. So if I do a google search that page appears on the page 87, there is any way to improve my SEO without changing the table? Or to improve my SEO I must change the format of my content? In resume, I want to improve the SEO page of a page that contains information organized inside a table. I don't know if there is a specific answer to this question. Any help is welcome. Regards
Web Design | | jcobo0 -
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 -
Best way to indicate multiple Lang/Locales for a site in the sitemap
So here is a question that may be obvious but wondering if there is some nuance here that I may be missing. Question: Consider an ecommerce site that has multiple sites around the world but are all variations of the same thing just in different languages. Now lets say some of these exist on just a normal .com page while others exist on different ccTLD's. When you build out the XML Sitemap for these sites, especially the ones on the other ccTLD's, we want to ensure that using <loc>http://www.example.co.uk/en_GB/"</loc> <xhtml:link<br>rel="alternate"
Web Design | | DRSearchEngOpt
hreflang="en-AU"
href="http://www.example.com.AU/en_AU/"
/>
<xhtml:link<br>rel="alternate"
hreflang="en-NZ"
href="http://www.example.co.NZ/en_NZ/"
/> Would be the correct way of doing this. I know I have to change this for each different ccTLD but it just looks weird when you start putting about 10-15 different language locale variations as alternate links. I guess I am just looking for a bit of re-affirmation I am doing this right.</xhtml:link<br></xhtml:link<br> Thanks!0 -
Parallax, SEO, and Duplicate Content
We are working on a project that uses parallax to provide a great experience to the end user, and we are also trying to create a best case scenario for SEO. We have multiple keywords we are trying to optimize. We have multiple pages with the parallax function built into it. Basically each member of the primary navigation is it's own page, with all subpages built below it using the parallax function. Our navigation currently uses the hashbang method to provide custom URL's for each subpage. And the user is appropriately directed to the right section based on that hashbang. www.example.com/About < This is its own page www.example.com/about/#/history < This is a subpage that you scroll to on the About page We are trying to decide what the best method will be for trying to optimize each subpage, but my current concern is that because each subpage is really a part of the primary page, will all those URL's be seen as duplicate content? Currently the site can also serve each subpage as it's own page as well, so without the parallax function. Should I include those as part of the sitemap. There's no way to navigate to them unless I include them in the sitemap, but I don't want Google to think I'm disingenuous in providing them links that don't exist, solely for the purpose of SEO, but truthfully all of the content exists and is available to the user. I know that a lot of people are asking these questions, and there really are no right answers yet, but I'm curious about everyone else's experience so far.
Web Design | | PaulRonin2 -
Is there any negative SEO effect when using Wordpress for your Blog?
I have a site entirely done in html, no CMS used. The blog page however, is wordpress. Wondering if this will effect us negatively in terms of SEO, having the blog that is linked to our site, a wordpress site. My gut is absolutely not, but the questions was asked....what do you think?
Web Design | | cschwartzel0 -
Old school HTML and rankings
How does really old school HTML (with inline CSS and a boat load of markup errors) affect modern SEO? I'm talking purely rankings, not conversions or bounce rate etc.
Web Design | | DavidWilsonSEO0 -
SEO to Drive Leads
Dear friends, I have clients asking for SEO to drive leads. I have no experience on it, how could I do that? Is there any web layout I can suggest to my client? Another question is how do I implemented the layout on the web structure? I usually structuring my website based on keywords. For example: Homepage niche: plumbing Category: london plumbing, plumbing service, etc Content: Finding London plumbing service in your area, what kind of plumbing service you should pay attention? So, based on these layout, my SEO efforts goes to the content, instead of the homepage. Now, the question is how do I increase conversion with these strategy? Is placing a form above the fold would be wise, then place the content below it. Please advice 🙂 Thanks for your kind support, Albertus
Web Design | | toeplly0