How to Code a Load More Button?

[FarrisFahad]

I want to write an SEO load more button that Google crawls and click on. I have read somewhere in the documents that Google will only click on anchor tags with href value. My current website loads content using a button and I have noticed after changing some, not load more, links Google started to index my website.

Is there a best practice method to do this?
Will it index more pages on my site?

I am not sure if I should post this in SEO or Web Development section :)

[Dani]

Hello there! Firstly, so sorry for taking so long to respond to this thread. I was actually away at an SEO conference (I'm going to write a post about it in the next handful of days, and, yes, I'm mildly feeling a bit better).

That being said, what you're asking for is definitely doable, because we are doing the exact thing here at DaniWeb.

For example, check out our Programming Forum. You can see that it uses infinite scrolling. As you keep scrolling down the page, more and more topics load automatically.

However, if you view the HTML source code for the page, you'll be surprised to know that, under the hood, there are separate HTML pages for page 1, page 2, page 3, etc., and back/forward page navigation links in the HTML. This is how Google is able to crawl each page.

We use a Javascript library called Infinite Scroll which does a little magic to hide the page navigation links from being visible (although they're still there in the DOM!) and, as the end-user scrolls down, uses AJAX to load page 2, page 3, etc. and tack what's on that page onto the end of the page that the user is actively on. At the same time, it modifies the URL in the browser to reflect the updated page number so that, if the end-user refreshes the page at any time, what they get are the contents of page n.

Just as a random tidbit: Google does run javascript, so any javascript that executes at page load, Google understands. However, Google does not have the ability to fire javascript events that are based on human activity, such as on click, on hover, or on scroll. Therefore, what Google essentially sees with this JS running is the first page of results, and links to all the other pages, although it knows they have been made to not be visible to the end-user. Therefore, it's possible they are diminishing the value of those pages in their algorithm because they assume that the links to them might be hidden for a reason aka they aren't super valuable to humans. It's also possible that they think they are hidden by default via JS because they are behind a menu or navigation that requires human interaction (click, hover, etc.) to access. However, the most probable thing is that Google is familiar with Infinite-Scroll JS, since it's a super popular technique used by millions of sites, and so their algorithm knows exactly what's going on.

Play around with this, and let me know if you need any help implementing it.

[MarkMarketer]

Creating a "Load More" button is a common feature when it comes to handling large data sets. The idea is to load a small amount of data initially and then load more data as the user requests it. This can be done with a combination of HTML, CSS, and JavaScript.

This guide will take you through creating a simple "Load More" button using JavaScript. Please note that this example assumes that all your data is available on the client-side. In a real-world application, you would likely be fetching the additional data from a server using AJAX or Fetch API.

Here's a basic example:

HTML:


<div id="content">
    <!-- Your data will be loaded here -->
</div>

<button id="loadMore">Load More</button>

CSS:


#content .hidden {
    display: none;
}

JavaScript:


// Assuming you have an array of data
var data = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];

// Function to load data
function loadData() {
    var content = document.getElementById('content');

    // Load initial two items
    for (var i = 0; i < 2; i++) {
        var div = document.createElement('div');
        div.textContent = data[i];
        content.appendChild(div);
    }

    // Hide the rest of the items
    for (var i = 2; i < data.length; i++) {
        var div = document.createElement('div');
        div.textContent = data[i];
        div.classList.add('hidden');
        content.appendChild(div);
    }
}

// Function to load more data
function loadMore() {
    var content = document.getElementById('content');
    var hiddenItems = content.getElementsByClassName('hidden');

    // Show next two hidden items
    for (var i = 0; i < 2 && i < hiddenItems.length; i++) {
        hiddenItems[i].classList.remove('hidden');
    }
}

// Load initial data
loadData();

// Add event listener to load more button
document.getElementById('loadMore').addEventListener('click', loadMore);

In this example, the loadData() function initially loads two items and hides the rest. When the "Load More" button is clicked, the loadMore() function displays the next two hidden items.


This is a simple implementation and doesn't include any error handling or edge case handling (like what to do when all the data has been loaded).

If your building a website and don't have much knowledge on it, I suggest you go to website development agency.