Implementing JavaScript Content Carousels for SEO

Introduction

I previously wrote about how to design and implementation considerations on pop-ups for your web pages. There are some more similar types of widgets or plugins, if you will, whatever you want to call them that I would like to discuss more in detail. I have another article on ranking JavaScript applications on Google that you should look at if you are curious about the complications of JS and SEO. I noticed that my JS SEO article is generating a good amount of interest on the search engine. So I want to talk about other JS plugins and go into a deep-dive about how they work and see if they can be better implemented for SEO. For this article, I would like to write about content carousels and provide you some things to think about when implementing for SEO. Other JS widgets that interest me are infinite scrolling and tabbed content.

What Are Content Carousels?

I call these content carousels but you probably know them better as image carousels. If you use a page builder in WordPress like Elementor, then you probably have heard of the more popular name image carousel. I use the more general term content carousel because you can place any kind of content inside the carousel.

Here is a list of content that you can have inside a carousel:

  • File Downloads
  • Images
  • Text
  • Maps
  • Videos

Since there are so many different things that you can place inside a carousel, I will call it a content carousel. Now I will discuss their popularity.

Why Are Content Carousels Popular?

You have seen these on several websites. They usually show about three to five different pieces of content on a single row. Then you have arrows to move the carousel left or right to see even more content. The arrows act just like pagination where you go to a second and third page of content. One quick tip that I see with some carousels is how they advance one panel at a time. I will talk about carousel panels in the next section.

What Are Carousel Panels?

A carousel panel is a container that contains pieces of content in a row. For example, if your carousel shows three images at a time, then those three images are grouped together in a single panel. When the carousel moves either to the left or right of a page, the entire carousel should move as a panel. This makes it easier for users to see more content faster. In this example, if the first panel contains three images in the carousel, then advancing one page to the right should show the next three. So the first panel has images one, two, three and the next panel has the images four, five, and six. Some websites implement the advancing of the carousel so that it only moves one image at a time instead of the entire panel at once. This is very slow if you are manually advancing the panels.

Let us get a bit more technical here. What are carousels that allow for auto-advancing? Then how many images should we move in this case?

Auto-Advancing Carousel Panels: How Many Images Should I Advance at a Time?

Some carousels automatically advance the carousel based on some time interval. The JS function used to perform an action on a time interval is called setInterval(). This function takes in a parameter that specifies how often the action should take place in milliseconds. So you would pass in a parameter, something like 4000 milliseconds, which converts to 4 seconds.

I would say that when you auto-advance content, you need to do it more gradually because users are not expecting content to just change sporadically. I know that you want to show more content and give some animation to make it look like your web page is moving but you have to be careful here. As I previously mentioned in my article about pop-up implementation. Just showing content to unsuspecting users and not letting them have control over what content they want to see, is in general, part of providing a poor user experience.

In an effort to provide a better user experience that is less jarring and grating to users, you should change the content on the carousel slowly. So in my opinion, the auto advance on a carousel should just change one or two pieces of content at a time instead of whole panels. There is no exact science to this, so there is not right or wrong. What I am doing here is just providing you with some thoughts to consider and what would work best for you. If you auto advance whole panels at a time and your panels hold a lot of content at once, then users might not be able to read all of the current content before it changes to a fresh set of content. Yes, users can click back to review the previous set of content but that requires a user interaction. In general, we try to reduce the amount of user interactions to provide them the information that they are looking for. Food for thought here, take what you will from this.

What is the Issue with Content Carousels for SEO?

So after giving some background and my thoughts on content carousels, I would like to talk about doing SEO for them. Again, because carousels use JS, there are some issues that make it tricky to get this content to rank on Google. So I am first going to talk about the hurdles that we have to jump through to get carousel content on Google and then how we should do it.

The Inherent Issue with JavaScript and SEO

The same issues that affect anything on a web page that is implemented with JS is no different for content carousels. The main issue has to do with getting search engines to read the carousel content. Some carousels are implemented so that they only show a few pieces of content on page load. Then as the carousel panels advance, more and more content is loaded after page load via AJAX. Is it a good idea to content after page load with AJAX? I have an article that details my opinion on AJAX and SEO. Basically, the reason why we only load some content on page load is because we do not want to load everything at once. The reason why is because it would take too long to load large carousels with a lot of content on them. Long page time is a hindrance in getting on the search engines. However, content loaded via AJAX does not show in the HTML source so that is another problem. A catch-22 problem if I have ever seen one. That is why we have to compromise on the implementation. Now we need a solution to this and that is what the next section is about.

How Do I Make Content Carousels SEO Friendly?

The goal is as mentioned in the previous section is to compromise to show any content on page load so that there is enough content that shows up in the HTML source for search engines to read without overloading on content so that the page loads too slowly. How much content you should initially load on your page depends on the type of content that you are loading. If you are loading content that tends to be lightweight like just text and highly optimized images with small file sizes, then you should be able to load them without sacrificing page load speed. Remember to lazy load your images with loading=”lazy” so that they only appear when users actually reach those images. Lazy loading images allows you to load a lot of images at once but still keep your pages loading fast.

So you will have to test your pages and see how much content you can load because that content can impact page load speed. So if all of that content is slowing the page down, then you have the option of either sending the user to another page that will show more content. Or, you can load more content via AJAX.

Send Your Users to Another Page With All of the Content

If you have a lot of content to show on your carousel but it is too much to fit in the carousel all at once because all of that weight will increase page load time, consider moving that overflow content to a new page. This is a simpler solution that is actually more beneficial than using AJAX. You could place a “View All” button under your carousel to lead users to a page that will show the rest of the content that could not fit on the carousel. All of this extra content should be loaded onto the page as HTML in the source so search engines can read it.

If you find that your overflow content is way too much to place on just one page, then categorize it and place it on multiple pages. Not only does this make it better for your pages because less content loads faster, but it is also better for your users because they can filter your content down with categories. This means that your users will be able to find your information faster and improve the user experience. Anything that you do should have the content show up in the HTML. This is the goal of SEO and what we are trying to do here.

On the other hand, loading embedded YouTube videos is a bit trickier because videos take time to load and too many videos take longer to load on a page, even if they are just embedded. In this case, take your best videos and place them inside your carousel. The overflow of videos will need their own pages.

What about AJAX though? Should we use AJAX to load content after page load? What would the point be if we can just send users to a page to serve overflow content?

Be Selective On Using AJAX to Load More Carousel Content

AJAX was great when it first came out. It was really popular because people loved the idea of being able to load more content on the page without reloading the page. However, search engines do not like to have to go through the trouble of finding additional content through AJAX. You are making this harder for search engines when you make them go through extra effort just to find all of the content on your page. This is why JS applications like SPAs (Single Page Applications) need a blog or more pages to support the application to get traffic from search engines. AJAX is great but is really a double-edged sword. You can load stuff on-the-fly but it is hard to index on search engines. This is why we have to consider a lot of things during implementation.

Content Carousels for Desktop Versus Mobile

We talked about carousel implementation in terms of SEO. The next section takes about design considerations for desktop versus mobile. Again, creating a good user experience is needed for SEO also so here are some things that you should consider for responsive design.

Desktop Can Fit More Content on the Screen

Carousels are naturally designed for desktop screens compared with mobile just because of the screen orientation. Desktop screens are typically in landscape mode. This is where the width is greater than the height. So the screens on desktops are longer horizontally than vertically. Since carousels are meant to stretch the width of a page, they are better suited for desktop. What this means is that you can load more content per panel on desktop. Let us now compare desktop with mobile.

Mobile Has Less Space and Can Only Fit a Limited Amount Of Content

Unlike desktop, mobile users usually browse websites in portrait mode. This is where the height is greater than the width. Mobile screens are then used more vertically than horizontally. The only practical case that I can see where a user would browse a website in landscape over portrait mode is when watching a video. People rarely view a video in portrait mode and it is mainly because of the standardized 16:9 aspect ratio that videos are recorded and played in. Due to this standard, videos are played in landscape over portrait mode. Although, some videos are still recorded with the phones being held vertically and that is more for small quick short videos. Most videos still adhere to the 16:9 standard.

How Does Desktop and Mobile Versions of Content Carousel Affect SEO?

How the different versions affect SEO is that for desktop, because you are in landscape mode, you can fit more content on a carousel before sending users to an overflow page. This has already been discussed earlier in general. This specifically applies to desktop because mobile versions are trickier to implement.

For mobile, you need to really think about using carousels on them. Mobile screens are in portrait mode when viewing websites. Due to this smaller width of mobile screens compared to desktop, mobile screens can only fit a single piece of content at a time. Placing content side-by-side is better done on a desktop because of the longer screen width. You might need to consider not using content carousels on mobile because no one feels like clicking on buttons to show content one by one. People want to see lots of content at once. Remember, you do not have much time to show people what they are looking for on your website. You might have mere seconds depending on the user’s patience.

You are probably better off just showing your content on a stack where each piece of content is placed directly on top of each other. This way, you can show more content without the hassle of squeezing a hard-to-use carousel where you can only show one piece of content at a time.

Implementing Different Desktop and Mobile Carousel Versions Via CSS Media Queries

I will just discuss this to give you some things to consider because there are many ways to go about this. Since carousels are better for desktop than mobile, you might need to set up your web page so that it only uses a carousel for desktop and not mobile. Depending on what kind of carousel you are using, your carousel might come with a feature to specify what width breakpoints you want to use to only implement a carousel on desktops. If your carousel does not support this feature, then you might need to use CSS. What you would have to do is create two classes, “desktop” and “mobile”. Then in your CSS, you use CSS media queries to establish breakpoint widths for desktop and mobile. I used 768px for phones specifically, 768px to 1024px for tablets, and over 1024px for desktop. Then I just set the CSS classes “desktop” and “mobile” to “display:none” to not show the desktop version on mobile and to not show the mobile version on desktop.

The Effect of Display None in CSS for SEO

This is another sticky question like JS and SEO. You need to use display none to prevent the wrong content from showing on desktop and mobile. Otherwise, you will show both desktop and mobile content on both types of devices. Many say to avoid doing this because it only confuses the search engines because you are hiding content on the page that shows up on the HTML source. Others say that the search engines can tell that you are hiding content because you have two different versions of the same content for desktop and mobile. My take on this is that depending if your carousel content defines your page and is the most important content, then hiding it with display none might be an issue. However, if your carousel content is not as important, then you might be fine with using display none. This all just really depends on how the rest of the content on the page and if Google does discard your hidden content, if you are find with that.

Summary

Implementing content carousels for SEO can be tricky and require a lot of different things to consider. Just some of the considerations to think about are the kinds of content that will be placed inside the carousel, how many pieces of content to place inside a panel and the difference between manually versus automatically advancing the carousel to view more of its content.

With regards to SEO, JS always has inherent issues with getting search engines to read JS-based content. You will need to balance showing enough carousel content on page load so that it shows up in the HTML source. Do not overload carousels with content because it will cause the page to load slowly.

AJAX throws a monkey wrench into the mix because it allows you to load additional carousel content after the page has loaded. Since this usually requires someone to click on a button to load more content, search engines find this a hassle of performing the click themselves. You have to lay out as much of your content on page load for search engines to read without making them go out of their way for you.

Carousels work great on desktop because their screen width is greater than their height. So carousels are naturally made for desktops. Mobile screens however, view websites mostly in portrait mode where the height is greater than the width. So in this case, because carousels favor longer width screens, carousels might be harder to implement on mobile. So you might want to consider forgoing the carousel altogether on mobile and just show the content on a single-column stack.

You can CSS classes and media queries to create a desktop and mobile version of your carousel. There are some complications here because it requires using “display: none” to hide content in one version so that it does not show up in the other. You just need to look at the overall content of your page and see if you still have enough unique content that if Google disregards your carousel content that you can live with that.

2 thoughts on “Implementing JavaScript Content Carousels for SEO”

Leave a Comment