What is your opinion in the use of jquery for a continuous scroll type of page layout?
-
So, I'm in 2 minds about this; let me start with a bit of background info.
Context
We have a new client who is in the final days of their new site design and were when they first contacted us. Their design essentially uses 5 pages, each with several pages worth of content on each, separated with the use of jquery. What this means is a user can click a menu item from a drop-down in the nav and be taken directly to that section of content like using internal anchor links as if it were a separate page, or they can click the top-level nav item and scroll through each "sub-page" without having to click other links.Vaguely similar to Google's "How Search Works" page if each sector of that page had it's own URL, only without the heavy design elements and slow load time.
In this process, scrolling down to each new "sub-page" changes the URL in the address bar and is treated as a new page as far as referencing the page, adding page titles, meta descriptions, backlinks etc. From my research this also means search engines don't see the entire page, they see each sub-page as their own separate item like a normal site.
My Reservations I'm worried about this for several reasons, the largest of them being that you're essentially presenting the user with something different to the search engines. The other big one being that I just don't know if search engines really can render this type of formatting correctly or if there's anything I need to look out for here.
Since they're so close to launching their new site, I don't have time to set up a test environment and I'm not going to gamble with a new corporate website but they're also going to be very resistant to the advice of "start the design over, it's too dangerous".
The Positives
For this client in particular, the design actually works very well. Each of these long pages is essentially about a different service they offer and the continuous scrolling through the "sub-pages" acts as almost a workflow through the process, covering each step in order.It also looks fantastic, loads quickly and has a very simple nav so the overall user experience is great. Since the majority of my focus in SEO is on UX, this is my confusion. Part of me thinks that obscuring the other content on these pages and only showing each individual "sub-page" to search engines is an obvious no-no, the other part of me feels that this kind of user experience and the reasonable prevalence of AJAX/Paralax etc means search engines should be more capable of understanding what's going on here.
Can anyone possibly shed some light on this with either some further reading or first-hand experience?
-
Hi Michael, thanks for the input.
I completely agree with you about content length but perhaps I'm a little confused here.
If search engines aren't going to see content hidden by jquery, would that not mean the only content I'm seen to have is what's immediately visible on page load?
-
Google is NOT going to see the content that's rendered by scrolling. In general, more is better in terms of content on a single page (provided it's not crap of course). See this article from Search Engine Land.
For those same reasons, having it on separate pages isn't as good an idea. If you think about how RankBrain is supposed to work, Google is going to be looking for terms on the page that commonly co-occur with the page's primary target search term on other pages on the web about that topic. So, by farming subsections of content out to other pages, you're shooting yourself in the foot, as Google is only going to give you brownie points for covering the subtopics in the very first page.
A better way to do this:
- put all the content on one page
- in the onload() or the Jquery document ready function, hide all but the first page's worth of content
- now, you can react to a scroll by calling Jscript functions to hide the currently shown content and show the next page's worth...all on the same URL
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
-
JSON-LD product page markup for multiple currencies?
I haven't found a working example of a single product page with one "Offer" in multiple "priceCurrency" and "price" We have product pages with a single product URL which will offer different prices in different currencies based on the user's IP. Some of the language of the page will be translated based on the IP (this will have href lang tag) but the URL will not change. (We're aware TLD is considered best practice, however, this is not an option at this time.) Is the best option to update the markup based on what the corresponding "country"? I'm uncertain how this may be handled by crawlers. Eg, For the product page https://www.example.com/product1 displaying USD "offers": {
Web Design | | sb1030
"@type": "Offer",
"url": "https://www.example.com/product1",
"itemCondition": "https://schema.org/NewCondition",
"availability": "InStock",
"priceCurrency": "USD",
"price": "7.99"} For the product pagehttps://www.example.com/product1 displaying EUR "offers": {
"@type": "Offer",
"url": "https://www.example.com/product1",
"itemCondition": "https://schema.org/NewCondition",
"availability": "InStock",
"priceCurrency": "EUR",
"price": "7.50"} Thanks for any input.0 -
I am Using <noscript>in All Webpage and google not Crawl my site automatically any solution</noscript>
| |
Web Design | | ahtisham2018
| | <noscript></span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><meta http-equiv="refresh" content="0;url=errorPages/content-blocked.jsp?reason=js"></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"></noscript> | and Please tell me effect on seo or not1 -
Referring subdirectory pages from 3rd hierarchy level pages. Will this hurts?
Hi all, We have product feature pages at 3rd tier like website.com/product/features. We have the help guides for each of these features on a different subdirectory like website.com/help/guides. We are linking these help guides from every page of features. So, will it hurts us anywhere just because we are encouraging 4th tier pages in website, moreover they are from different sub-directory. Thanks
Web Design | | vtmoz0 -
Need An Honest Opinion Of My Design
Just looking to get an honest opinion on my website design for my scuba diving client. Trying to decrease bounce rate and have seen some results from tweaking design. Honest opinions appreciated. Recommendations appreciated even more 😉
Web Design | | InfinityTechnologySolutions0 -
Spaces at beginning of title tag - negatively affect the optimization of the page?
For some reason, our title tags have a long space after the beginning title tag and before the text appears. The beginning title tag is on one line, then a break, a tab and then the content of the title tag. I'm pretty sure this is not good and is affecting optimization of the page. Am I correct or is this not an issue and does not need to be fixed? Example: | <title></span></p> <p> </p> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> First keyword</td> </tr> </tbody> </table></title> |
Web Design | | CFSSEO0 -
Page missing meta description some times a good thing?
Just courious to why http://moz.com/learn/seo does not appear to have the meta tag: name="description" content=""> Is this purposely done this way for some reason? Or has it become less important? Just curious.
Web Design | | DanielMulderNL0 -
Site as one page - SEO implications
We may be inheriting a site and will be asked to do SEO for it. We will have control over the development of the site, so this structure is what it is. My question is - how significant of an impact do you think this is going to have and can you think of any workarounds that may help? Basically, the user experience of the site will feel similar to multiple pages. However, this site will, in essence be one page and pull various content through javascript from different locations. I have not seen the site yet (and believe it is still in development), but this is how it has been explained to me. Any thoughts? My first thought was to add a blog to add page depth to the site and expand the content. Any other thoughts are welcome and appreciated. Thanks. (I know this is limited information, I'm sorry. It's just about all I have to work with right now, and I was a little concerned and was hoping for a second opinion)
Web Design | | AdamWormann0 -
Effects of HTML layout on Arabic websites and SEO
Hi all, I was hoping someone may be able to help. We are putting together an Arabic website and due to reading right to left as opposed to left to right, the site HTML layout is mirrored compared to normal with everything flipped over. What we are wondering is, will this effect SEO and what are the SEO implications of this? Do the search engine bots automaticlaly know to read the content etc differently and understand that everything is purposely mirrored / the HTML is in a different location compared to a site in the UK / US etc? Any help on this would be most appreciated. Cheers!
Web Design | | marcelo-2753980