CSS vs Javascript vs JQuery drop down navigation
-
For a user / seo perspective, what is the best way to code a drop down menu nav bar? Is it best to use css, javascript or a scripting library like jquery?
I am thinking about overall best practice that will not have a negative impact on serps.
I am also thinking about what will work best on all types of devices i.e. desk tops, lap tops, smart phones and tablets.
What are the Pro's & Cons of Using CSS for Drop Down Menus.
What are the Pro's & cons of using Javascript for drop down menus.
And the same question for jquery.
Thank you all in advance for your ideas.
-
You can't go wrong with CSS. Endless styling possibilities. Also, I'd stay away from javascript because it's executed in order on the page. Meaning, if the JS doesn't load properly in the menu, the remaining JS below it wont load either.
-
Thumbs up to you too Joel and good luck with your project.
-
Seems like the seo jury has spoken and CSS it is. Thank you all for your help on this matter. Thumbs up to you all.
-
Hands down that CSS is the preferred way make dropdown menus. Google and on a lesser note, other search engines, have improved drastically with their ability to parse JavaScript / jQuery, and you may be able to get away with it, but it really should be avoided if possible. With the "new" CSS3 styles, you get almost any style you'd like with that.
-
Hi Joel,
I echo Marek's comments. However, I'm a great fan of making 100% sure that the bots can access everything that I want them to so if I'm ever in doubt I go with css and html combination as much as possible. We use Ajax and jQuery totally etc only on pages which we believe are 100% to be used primarily for user experience and engagement. E.g. When they're doing searches for specific things and the page needs to be ultra fast and efficient. However, we also try to ensure that we have crawlable pages which output the full content of a search wherever possible so that we can get the SEO benefit too. It also helps for when people have javascript disabled (not many granted).
I've seen so many ecommerce sites with great content but it's often got some kind of blockage that means a button has to be pressed or a form submitted to see it and if I'm not mistaken bots can't access this easily.
Hope this helps.
-
Hi Joel,
In my opinion CSS is "The Best". Simple, easy usage, easy changes, very good speed of page load ... etc...
As I red on many forums on the internet JQuery and JS are are available for robots, so there are no contraindications to employ them.
But
CSS - better code/text ratio (no long scripts in page code)
CSS - simple usage and changes (CSS3, HTML5)
CSS - faster loading (only simple text and html)
In my opinion, now when we have HTML5 and CSS3 there is no better way - it's innovative and simple solution,
Marek
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
-
Drop in rankings after AMP implementation because of lack of facebook comments
Hi, we are amplifying our site, but one of the things we can´t include on our AMP version is the Facebook comment box. Some of our articles have hundreds of comments on them and we noticed that Google was crawling those comments and using them as a ranking signal (the more comments the better we discovered). Now we are wondering if these articles would drop if we launch the AMP version without the comment box. As this would reduce the written content on those pages a lot. Anybody tested this before or has an idea on that would work out? Thanks for your help!
Web Design | | guidetoiceland1 -
Organization name as text vs. as a picture with alt text + Schema.org markup
I'm looking for some feedback to implement best practice for the markup of our header/navigation at the top of our site. Our organization name and a tag line is at the top of every page on the left, then our logo, then our navigation to items like "Topics" "FAQs" "About us" etc is to the right along the top. Our organization name includes the most frequently searched keyword for what we want to rank on, and our organization name is our domain name. A couple other background items: we're a non-profit startup and no code is public yet -- hence, I'll be explaining what we're going for. We're coding in straight html/css, not using Wordpress or anything like that. When we originally DIY coded our draft homepage and a few landing pages, we put the organization name and tag line into the markup as text, to look like this: Organization name | Pretty | Navigation items over here
Web Design | | scienceisrad
Explanatory fun tag line | Cool |
--------------------------------------- | Logo | --------------------------------------------------------- Then we outsourced the markup of two more landing pages to a company that does on-demand orders for responsive markup, based on png's we sent of the designs. The company's code renders a fabulous looking version of our design, and important for usability, it is responsive. The company also did something else I'm not so sure of. They made one big image out of our organization name, tag line and logo ... because? The indenting and different font sizes of the Organization name and tag line was too hard to code in? Or is it just best practice for html standards, SEO, etc. to make it one big logo?? Now, as part of an overall effort I'm working on to reconcile our different code ... I'm mulling right now specifically on reconciling the different approaches we each took and incorporating new best practices for the header ... based on what I'm reading online about headers, including debates about whether to use h1 for your company name, whether using an image for the name is fine, advice about including Schema.org markup for logos, etc. Given all this, which of these two options look better to you? Do they seem equally good to you? What would you change about the one that looks better to you? What do I have wrong in them? Or would you code this entirely differently to hit all best practices? What do you think about using h1 for organization name vs. is there a better tag to use for the organization name to code it in as text? (Note: we have other h1's on our pages for the actual article/content titles of each page, which maybe we should, maybe we shouldn't be having those as h1's?) Option 1 -- using text for our name and tag line: <header id="top" class="brandfont brandcolor">
[# Organization name Explanatory fun tag line](/) Organization name logo {navigation code here}
</header> Option 2 -- name, tag line and logo all as one big png image: <header id="header" class="container"> Organization name tag line {navigation code here}
</header>1 -
Help, site traffic has dropped significantly since we changed from http to https
Heya, so I am just in charge of the content on the site, and the SEO content, not the actual back-end stuff. A little under 2 weeks ago we switched to https, and our site traffic has been down a lot ever since. When I SERP check our keywords, they don't seem to have dropped in rankings pages. Here is what I got when I asked our dev guy if 301 redirects were put in: I did not add any redirects so all of the content is accessible on both unless individual links get hardcoded one way or the other. The only thing in place is a Cloudflare plugin which rewrites links in cached pages to match the way its accessed, so if for example you access a page over https you don’t get the version cached with a bunch of http links since that will throw up mixed content warnings in the browser. Other than that WP mostly generates all its links to match whatever protocol you are accessing the current page with. We can make specific pages redirect one way or the other in the future if we want to though... As a startup, site traffic is a metric we track to gouge progress, and so I really need to get to the bottom of if it was the change from http to https that has causes the drop, and if so, what can we do about it? Also, in case it is relevant: the bounce rate is now sky high (ave. 15% to 64% this last week!) Any help is very welcome! Site: https://mobileday.com Thank you!
Web Design | | MobileDay1 -
Is this CSS solution to faceted navigation a problem for SEO?
Hi guys. Take a look at the navigation on this page from our DEV site: http://wwwdev.ccisolutions.com/StoreFront/category/handheld-microphones While the CSS "trick" implemented by our IT Director does allow a visitor to sort products based on more than one criteria, my gut instinct says this is very bad for SEO. Here are the immediate issues I see: The URL doesn't change as the filter criteria changes. At the very least this is a lost opportunity for ranking on longer tail terms. I also think it could make us vulnerable to a Panda penalty because many of the combinations produce zero results, so returning a page without content, under the original URL. This could not only create hundreds of pages with no content, there would be duplicates of those zero content pages as well. Usability - The "Sort by" option in the drop down (upper right of the page) doesn't work in conjunction with the left Nav filters. In other words if you filter down to 5 items and then try to arrange them by price high to low, the "Sort" will take precedence, remove the filter and serve up a result that is all products in that category sorted high to low (and the filter options completely disapper), AND the URL changes to this: http://wwwdev.ccisolutions.com/StoreFront/category/IAFDispatcher regardless of what sort was chosen...(this is a whole separate problem, I realize and not specifically what I'm trying to address here). Aside from these two big problems, are there any other issues you see that arise out of trying to use CSS to create product filters in this way? I am trying to build a case for why I believe it should not be implemented this way. Conversely, if you see this as a possible implementation that could work if tweaked a bit, and advice you are willing to share would be greatly appreciated. Thanks! Thank you to Travis for pointing out the the link wasn't accessible. For anyone willing to take a closer look we can unblock the URL based on your IP address. If you'd be kind enough to send me your IP via private message I can have my IT director unblock it so you can view the page. Thanks!
Web Design | | danatanseo0 -
404's and a drop in Rank - Site maps? Data Highlighter?
I managed an old (2006 design) ticket site that was hosted and run by the same company that handled our point of sale. (Think, really crappy, customer had to click through three pages to get to the tickets, etc.) In Mid February, we migrated that old site to a new, more powerful site, built by a company that handles sites exclusively for ticket brokers. (My site: TheTicketKing. - dot - com) Before migration, I set up 301's for all the pages that we had currently ranked for, and had inbound links pointing to, etc. The CMS allowed me to set every one of those landing pages up with fresh content, so I created unique content for all of them, ran them through the Moz grader before launch, etc. We launched the site in Mid February, and it seemed like Google responded well. All the pages that we had 301's set up for stayed up fairly well in rank, and some even reached higher positions, while some took a few weeks to get back up to where they were before. Google was also giving us an average of 8-10K impressions per day, compared to 3000 per day with the old site. I started to notice a slow drop in impressions in mid April (after two months of love from Google,) and we lost rank on all our non branded pages around 4/23. Our branded terms are still fine, we didn't get a message from Google, and I reached out to the company that manages our site, asking if they had any issues with their other clients. They suggested that I resubmit our sitemaps. I did, and saw everything bump back up (impressions and rank) for just one week. Now we're back in the basement with all the non branded terms once again. I realize that Google could have penalized us without giving us a message, but what got me somewhat optimistic was the fact that resubmitting our sitemaps did bring us back up for around a week. One other thing that I was working on with the site just before the drop was Google's data highlighter. I submitted a set of pages that now come back with errors, after Google seemed to be fine with the data set before I submitted it. So now I'm looking at over 300 data highlighter errors when I'm in WMT. I deleted that set, but I still get the error listings in WMT, as if Google is still trying to understand those pages. Would that have an effect on our rank? Finally I do see that our 404's have risen steadily since the migration, to over 1000 now, and the people who manage the CMS tell me that it would have no effect on rank overall. And we're going to continue to get 404's as the nature of a ticket site would dictate? (Not sure on that, but that's what I was told.) Would anyone care to chime in on these thoughts, or any other clues as to my drop?
Web Design | | Ticket_King0 -
Side Nav. Vs. Top Nav
I have a client that currently has a side navigation and wants to know how changing to a top nav will affect her SEO. We always recommend top nav for user experience but I am not sure if there is a direct effect on SEO. Would the change affect it? Thoughts?
Web Design | | hwade0 -
Considering site navigation options
I am working on a site redesign and re evaluating concepts I haven't thought about for a few years. I generally see site navigation that is either "top-down" or "left bar". Top down navigation normally uses the left nav. for search refinements. The benefit of top nav. is that it clears up the center of the page for non navigation content. The drawback is that you can't fit as many categories in a top nav. Left side nav. can hold a long list of categories, but subcategories are often in the center of the page. In the past, I have preferred to use left nav. with a multi level scroll over search refinement. I believe this allowed users to get to their destination page with fewer clicks. (I have always believed that every required additional click causes lost customers). I also believe that this has caused me to get more juice flowing to deeper pages on sites and better long-tail conversion. This means I have had pages with a LOT of links. With this method, I have tightly controlled my categories. What on other sites are often dynamic search refinements, are on my sites additional categories. I am considering making a site with a top down navigation system. I like the additional screen space in the center I get to work with. Is my assumption about pages created by search refinement wrong? Is it ok for SEO to have a left nav that has a bunch of search refinements that are dynamically created?
Web Design | | EugeneF0 -
Drop Down Menus & SEO?
Do these typically have a negative impact on SEO? I know this is kind of a vague question, does it make it harder to spider? Are there SEO friendly ways of coding these? There are so many sites out there that have these, so I've got to assume it's different on a case by case basis.
Web Design | | MichaelWeisbaum0