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
-
Best Practices-Optimize Theme Before Coding or After Coding?
We purchased a Wordpress Real estate theme called wpcasa. My developer started coding it. We hired a new SEO. The SEO looked at a simple page (About Us) and saw about 70 Java scripts and 11 templates and was very dissatisfied with the coding and heavy source code contained in the theme. My SEO claims the optimizing this theme (removing the unnecessary Java Scripts and combining the templates is way too much work and that it would be better to start from scratch and purchase a theme like https://my.studiopress.com/themes/agentpress/ with more compact, efficient and streamlined code. Problem is we need to throw out 2 months and thousands of dollars worth of code. My SEO says that in the day of Google's "mobile first" streamlined code is particularly important. My developer has taken the position that the code can be cleaned up after the design. Where it seems my SEO wants clean code to stat with. I don't know who to is right. Any ideas? Am I better of starting from scratch with a new more efficient theme, or cleaning up the code on the wpcasa theme? The code for the test page is below. Thanks! | |
Web Design | | Kingalan1
| | lang="en-US" prefix="og: http://ogp.me/ns#"> |
| | |
| | charset="UTF-8"> |
| | http-equiv="X-UA-Compatible" content="IE=edge"> |
| | name="viewport" content="width=device-width, initial-scale=1"> |
| | rel="profile" href="http://gmpg.org/xfn/11"> |
| | rel="pingback" href="http://dev.metro-manhattan.com/xmlrpc.php"> |
| | |
| | <title></span>About Metro Manhattan - Metro Manhattan Office Space<span class="html-tag"></title> |
| | |
| | |
| | |
| | name="description" content="New York City real estate brokerage service helps business tenants acquire office, commercial loft, retail or showroom space anywhere in Manhattan."/> |
| | name="robots" content="noindex,follow"/> |
| | property="og:locale" content="en_US" /> |
| | property="og:type" content="article" /> |
| | property="og:title" content="About Metro Manhattan - Metro Manhattan Office Space" /> |
| | property="og:description" content="New York City real estate brokerage service helps business tenants acquire office, commercial loft, retail or showroom space anywhere in Manhattan." /> |
| | property="og:url" content="http://dev.metro-manhattan.com/about-us/" /> |
| | property="og:site_name" content="Metro Manhattan Office Space" /> |
| | name="twitter:card" content="summary_large_image" /> |
| | name="twitter:description" content="New York City real estate brokerage service helps business tenants acquire office, commercial loft, retail or showroom space anywhere in Manhattan." /> |
| | name="twitter:title" content="About Metro Manhattan - Metro Manhattan Office Space" /> |
| | name="twitter:image" content="http://dev.metro-manhattan.com/wp-content/uploads/2018/07/process-01.png" /> |
| | |
| | |
| | rel='dns-prefetch' href='//maps.googleapis.com' /> |
| | rel='dns-prefetch' href='//maxcdn.bootstrapcdn.com' /> |
| | rel='dns-prefetch' href='//fonts.googleapis.com' /> |
| | rel='dns-prefetch' href='//s.w.org' /> |
| | rel="alternate" type="application/rss+xml" title="Metro Manhattan Office Space » Feed" href="http://dev.metro-manhattan.com/feed/" /> |
| | rel="alternate" type="application/rss+xml" title="Metro Manhattan Office Space » Comments Feed" href="http://dev.metro-manhattan.com/comments/feed/" /> |
| | rel="alternate" type="application/rss+xml" title="Metro Manhattan Office Space » About Metro Manhattan Comments Feed" href="http://dev.metro-manhattan.com/about-us/feed/" /> |
| | |
| | |
| | rel='stylesheet' id='font-awesome-css' href='http://dev.metro-manhattan.com/wp-content/plugins/menu-icons/vendor/kucrut/icon-picker/css/types/font-awesome.min.css?ver=4.7.0' type='text/css' media='all' /> |
| | rel='stylesheet' id='menu-icons-extra-css' href='http://dev.metro-manhattan.com/wp-content/plugins/menu-icons/css/extra.min.css?ver=0.11.2' type='text/css' media='all' /> |
| | rel='stylesheet' id='contact-form-7-bootstrap-style-css' href='http://dev.metro-manhattan.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/dist/css/style.min.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='wpsight-favorites-css' href='http://dev.metro-manhattan.com/wp-content/plugins/wpcasa-favorites/assets/css/wpsight-favorites.min.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='wpsight-listing-labels-css' href='http://dev.metro-manhattan.com/wp-content/plugins/wpcasa-listing-labels/assets/css/wpsight-listing-labels.min.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='wpsight-listings-map-css' href='http://dev.metro-manhattan.com/wp-content/plugins/wpcasa-listings-map/assets/css/wpsight-listings-map.min.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='wpfront-notification-bar-css' href='http://dev.metro-manhattan.com/wp-content/plugins/wpfront-notification-bar/css/wpfront-notification-bar.css?ver=1.7' type='text/css' media='all' /> |
| | rel='stylesheet' id='wpfront-scroll-top-css' href='http://dev.metro-manhattan.com/wp-content/plugins/wpfront-scroll-top/css/wpfront-scroll-top.min.css?ver=2.0.1' type='text/css' media='all' /> |
| | rel='stylesheet' id='chld_thm_cfg_parent-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london/style.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='fontawesome.min.css-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london-child/assets/css/fontawesome.min.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='load-fa-css' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='wpcasa-london-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london-child/style.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='bootstrap-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london/vendor/twbs/bootstrap/css/bootstrap.css?ver=3.3.6' type='text/css' media='all' /> |
| | rel='stylesheet' id='bootstrap-dropdownhover-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london/vendor/kybarg/bootstrap-dropdown-hover/css/bootstrap-dropdownhover.min.css?ver=1.0.0' type='text/css' media='all' /> |
| | rel='stylesheet' id='bootstrap-select-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london/vendor/silviomoreto/bootstrap-select/css/bootstrap-select.min.css?ver=1.10.0' type='text/css' media='all' /> |
| | rel='stylesheet' id='awesome-bootstrap-checkbox-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london/vendor/flatlogic/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.min.css?ver=0.3.7' type='text/css' media='all' /> |
| | rel='stylesheet' id='pushy-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london/assets/css/pushy.css?ver=1.2.1' type='text/css' media='all' /> |
| | rel='stylesheet' id='lightslider-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london/vendor/sachinchoolur/lightslider/css/lightslider.min.css?ver=1.1.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='lightgallery-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london/vendor/sachinchoolur/lightgallery/css/lightgallery.min.css?ver=1.2.15' type='text/css' media='all' /> |
| | rel='stylesheet' id='animate-css' href='http://dev.metro-manhattan.com/wp-content/themes/wpcasa-london/assets/css/animate.min.css?ver=1.2.1' type='text/css' media='all' /> |
| | rel='stylesheet' id='dashicons-css' href='http://dev.metro-manhattan.com/wp-includes/css/dashicons.min.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='google-fonts-css' href='//fonts.googleapis.com/css?family=Lato:700,400|Raleway:400,300&subset=latin' type='text/css' media='all' /> |
| | rel='stylesheet' id='wpmtst-custom-style-css' href='http://dev.metro-manhattan.com/wp-content/plugins/strong-testimonials/public/css/custom.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='zcffront-jquery-ui-css' href='http://dev.metro-manhattan.com/wp-content/plugins/zoho-crm-forms/assets/css/jquery-ui.css?ver=4.9.5' type='text/css' media='all' /> |
| | rel='stylesheet' id='zcffront-end-styles-css' href='http://dev.metro-manhattan.com/wp-content/plugins/zoho-crm-forms/assets/css/frontendstyles.css?ver=4.9.5' type='text/css' media='all' /> |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | rel='https://api.w.org/' href='http://dev.metro-manhattan.com/wp-json/' /> |
| | rel="EditURI" type="application/rsd+xml" title="RSD" href="http://dev.metro-manhattan.com/xmlrpc.php?rsd" /> |
| | rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://dev.metro-manhattan.com/wp-includes/wlwmanifest.xml" /> |
| | name="generator" content="WordPress 4.9.5" /> |
| | rel='shortlink' href='http://dev.metro-manhattan.com/?p=3800' /> |
| | rel="alternate" type="application/json+oembed" href="http://dev.metro-manhattan.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fdev.metro-manhattan.com%2Fabout-us%2F" /> |
| | rel="alternate" type="text/xml+oembed" href="http://dev.metro-manhattan.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fdev.metro-manhattan.com%2Fabout-us%2F&format=xml" /> |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | rel="icon" href="http://dev.metro-manhattan.com/wp-content/uploads/2018/06/metromanhattan_icon-75x75.png" sizes="32x32" /> |
| | rel="icon" href="http://dev.metro-manhattan.com/wp-content/uploads/2018/06/metromanhattan_icon.png" sizes="192x192" /> |
| | rel="apple-touch-icon-precomposed" href="http://dev.metro-manhattan.com/wp-content/uploads/2018/06/metromanhattan_icon.png" /> |
| | name="msapplication-TileImage" content="http://dev.metro-manhattan.com/wp-content/uploads/2018/06/metromanhattan_icon.png" /> |
| | |
| | |
| | |
| | |
| | |
| | class="page-template page-template-page-tpl-about page-template-page-tpl-about-php page page-id-3800 page-parent custom-background wpsight-london" itemscope itemtype="http://schema.org/WebPage"> |
| | |
| | |
| | id="top" class="site-wrapper"> |
| | |
| | |
| | class="header-widgets"> |
| | |
| | class="header-full-width"> |
| | id="section-wpsight_london_listings_search-2" class="widget-section section-widget_listings_search">id="wpsight_london_listings_search-2" class="widget widget_listings_search"> <form <span="" class="html-attribute-name">method="get" action="http://dev.metro-manhattan.com/search/" class="wpsight-listings-search horizontal"></form> |
| | |
| | class="listings-search-default"> |
| | class="row gutter-30"> |
| | class="listings-search-field listings-search-field-text listings-search-field-keyword col-xs-12 col-sm-9"> |
| | class="listing-search-keyword text form-control" title="Keyword or Listing ID…" name=" |0 -
Will having two wordpress themes installed hurt seo?
We currently have 3 sites built on WordPress that have little to no blogging capabilities. Currently, all published posts show up on a /category page which does not resemble the traditional blog format and is not aesthetically pleasing. We would like to have a more traditional blog and are considering installing a second wordpress theme on the site which will strictly be used for /blog and all the posts. My question is will having the second WordPress installation on the sites hurt us in any way on the SEO front and if we go this way should we place the install in a subfolder or on a subdomain? Is there anything else we need to worry about with making this transition? Thank you in advance for the advice! Patrick
Web Design | | PlanetDISH0 -
Is there a best practice for using a general iso code for the EAME region and APAC region or should you break it out by country?
I am creating a strategy for multiple regions and the US comes to market different than EAME (Europe, Africa, Middle East) and China. We were planning on using language and iso codes in subfolder's but the corporation only wants their content to be in German, English, and Queens English. Our current decision is to use /en-US/, /en/, /de/, /en-CN/, /zh-CN/. /en/ and /de/ will be what we use for EAME. This doesn't seem like the best idea as I think /en/ will get indexed as the US version and not the EAME version. Any suggestion or if clarification is needed is greatly appreciated.
Web Design | | GodfreyB2B0 -
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 -
Best Way To Have HD Videos On Site That Will Work On Mobile Devices
Hi, I hope someone can help me with this. I am working on a site for a client who works at a video production company. They want to have a fair few HD videos on there site but also for the site and videos to be viewable on mobile devices. I have got a responsive wordpress theme and the site is beginning to take shape. I am wondering however how I can best get the videos to display on mobile devices while maintaining a good load speed. Until now I have been using amazon S3 which stores and feeds the videos and I use Easyvideoplayer to embed the videos. The problem is they do not appear to show up from mobile devices when using wordpress. can anyone suggest the best way for me to still feed the videos from S3 but get them to display on mobile devices. oh, they are private videos so they cannot be placed on youtube.
Web Design | | jensonseo0 -
Given the lastest Google update, should I rewrite my Flash site or try to present an alternative HTML/CSS site?
I have a site that was created using Flash. The reasoning behind this was, at the time, that I didn't care if the site ranked or not (portfolio site). Now I would like to drive traffic to the site from SE's. Given the Penguin update, should I rewrite my Flash site in HTML/CSS or present an alternative site for bots and browsers that don't support Flash? My concern is that by presenting an alternative site to bots and non Flash supporting browsers that the SE's will see potentially see this as cloaking. Thoughts and advice would be much appreciated.
Web Design | | mj7750 -
Wordpress SEO Change of Structure
Hi, I have a Wordpress SEO Question. I ran the SEOMOZ checker on my website and it discovered roughly 70 of my 250 blogs had a URL length problem. I have removed the year and month from the WP structure as I read elsewhere that it is not important. The blogs displayed as follows: domain.com/blog/2011/02/contents-of-the-blog and the new structure is: domain.com/blog/contents-of-the-blog I have resubmitted the new structure to Google Webmaster Tools XML and updating the on-page sitemap on my main site. My blog was cached on 25<sup>th</sup> October and seems to be caching every 7 days, my website cached on the 24th and I wonder if I should do any follow up work to ensure the content gets crawled properly. a) Individually 301 redirect the old URLs to the new. b) Individual Canonical links for each. c) Adding the old pages to the robots file and disallowing. Any advice would be greatly appreciated.
Web Design | | tdsnet0 -
Any discussions on the actual web page design and how it might affect SEO?
Are there any links to previous discussions or tips, techniques for how creative design has any impact on seo??
Web Design | | theideapeople1