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
-
Using WebP Image Alongside Existing Images
Is it worthwhile to add in WebP images alongside existing images? WebP Images can be three times smaller than PNGs and 25% smaller than JPGs, according to a plugin option I am looking at. The alternative WebP images are provided via CDN. Does anyone have any experience with this, and is it worth doing?
Web Design | | GrouchyKids0 -
Ecommerce Category Pages
First, let's define the terminology for the various types of ecommerce pages. The terminology differs from organization to organization: Product Description Pages (PDPs): These pages have a single product, pricing, an "add to cart" button, reviews, and a product description. Product Listing Pages (PLPs): These are product category/subcategory pages that have product image links and text links to Product Description Pages (PDPs). Category Pages: These pages have subcategory image and text links to subcategory pages. No product images are displayed Hybrid Category Pages: these pages combine sub-Category Images and text at the top of the page and product listings below. Our CMS currently does not allow us to create hybrids. This conversation revolves primarily around mobile. Our ecommerce team is having discussions around the appropriate use of PLPs vs Category pages. After doing a quick audit of the mobile sites of some top ecommerce players, there is definitely a trend to use Category Pages at the top of the category and sub-category hierarchy and use PLPs at the very bottom. The logic from a usability perspective is to allow visitors to navigate a site without ever using the hamburger navigation. ex: Baby (Category Page) => Car Seats (Category Page) => Convertible Car Seats (PLP) The sites I audited all had hamburger menus. A visitor would navigate from a home page image for "Baby," an image on the "Baby" page to "Car Seats", and an image on the "Car Seats" page to the Convertible Car Seats page. At that point, they would be able to shop for "Convertible Car Seats" on a PLP. This appears to be excellent UX and easy to use navigation. Theoretically, good for SEO as well. In short, category and subcategory pages are being used as navigation to allow visitors to easily navigate to the bottom of the hierarchy and shop on the most narrow page in the hierarchy. Much easier to use than a hamburger menu, but it does entail more clicks. The discussion revolves around allowing users to shop for product at a higher level in the taxonomy. For example, what if a visitor wants to shop all Car Seats? In the above taxonomy, we are precluding users from shopping in this manner. There is no "Car Seats" PLP. Our CMS has the ability to create both a Category Page and a PLP for "Car Seats". We could theoretically place an image on the "Car Seats" category page for "View All Car Seats", and allow users to click to a "Car Seats" PLP. None of the major ecommerce players I've audited are adding a PLP option higher up in the hierarchy. That doesn't mean that it's not good UX. Problems: From an SEO perspective, having a Category Page and a PLP for "Car Seats" would cause cannibalization - they would be competing for the same keywords. I am skeptical that canonicals would work. The pages are not near duplicate content. One page has category images, the other has product images. We could place content blocks on the page to make them more similar. We could noindex the PLP, but that's a waste of internal link juice. Need advice: Will canonicals work in this situation? Should we trash this idea entirely? Does adding a PLP add value or confusion? Is noindex a good idea? Is there an option to target keyword variations with the PLP? Is there another solution?
Web Design | | Satans_Apprentice0 -
Fetch as Google not showing Waypoints.js on scroll animation
So I noticed that my main content underneath 4 reasons to choose LED Habitats did not show up in Fetch as Google as well as a few other sections. The site being brand new, so I'm not sure how this will be indexed. What happens is, as the user scrolls the content is brought in using Waypoints and Animate.css which offers an engaging yet simple user experience. I'm just afraid that If the content doesn't show up in "Fetch as Google" in webmaster tools that this content will never be found / indexed by Google. There are thousands of sites that use this library, I'm just curious what I'm doing wrong.. or what I can do. Is there a way for me to keep the simple animations but keep Google Happy at the same time? I took a screen shot of "Fetch as Google" and you can see blatant missing sections which are the sections animated by the waypoints library. Thanks for listening! Robert ZqgLWHi
Web Design | | swarming0 -
Duplicate items across different pages?
On our new website we have a testimonials page which you can cycle through them. We also have the testimonial on the our work / project page. Essentially this is duplicate content from another page, what's the best thing to do here? In the sake of SEO, remove the duplicate content and only have one? Or won't it make much difference?
Web Design | | vortexuk0 -
Funnel tracking with one page check-out?
Hi Guys, I'm creating a new website with a one page checkout that follows the following steps:
Web Design | | Jerune
1. Check availability
2. Select product
2. Select additional product & Add features
3. Provide personal information
4. Order & Pay I'm researching if it is possible to track all these steps (and even steps within the steps) with Google Analytics in order to analyse checkout abandonment. The problem is only that my one-page checkout has only one URL (I want to keep it that way) and therefore can not be differentiated on URL in the Analytics funnel. To continue to the next step also the same button (in a floating cart) in used to advance. The buttons to select/choose something within one step are all different. Do you guys know how I can set this up and how detailed I can make this? For example, is it also possible to test at which field visitors leave when for example filling in their personal information? Would be great if you can help me out!0 -
SEO while designing the website and continuous SEO
What's the difference between SEO while designing/developing a website (ie, setting up a website so it is crawled by search engines) and the SEO that people talk about that needs to be viewed analyzed and changed all the time? I don't have a ton of money to spend on SEO right now but I do want to make sure my website is set up by an SEO expert (if possible) so when I do have money to spend on SEOthe website is set up properly to work with more advanced forms of SEO. I guess I don't understand where you can draw the line (if forced due to money constraints) between SEO in the beginning and continued SEO. What do I need to look for with SEO and the design of my website. How do I get some type of SEO without breaking the bank??
Web Design | | CapitolShine0 -
Website using javascript to serve up content - SEO Friendly?
I'm checking out a dentist website http://www.sagedentalnj.com/ I was referred by a friend so just taking a little peek at it. When you click on the menu items, the url at the top doesn't change. When you view source, the page titles are all the same. when I do site:http://www.sagedentalnj.com/ none of his pages are indexed by google. What can be done with his site so that google sees his pages? Maybe submit sitemap?
Web Design | | Czubmeister0 -
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