Should I use button, div or anchor for loading more content?

[FarrisFahad]

Hi, I am using JS in my website to load more content. I have buttons or input type button as my load more content.
I am worried that Google won't index the content behind the load more button because it's a button and not an anchor tag.

Here is what I am currently using ...

<div class="MORE">
  <button onclick="loadMore(this, '.Memes', 'ex/more.memes.php');">Load More Content</button>
</div>

I believe there is a better way to do it. Can you help?

Also here is my JS ...

function loadMore(elm, content, ajax){

    let id = document.getElementById('id').innerText;
    let section = document.getElementById('section').innerText;
    let subsection = document.getElementById('subsection').innerText;
    let time = document.getElementById('time').innerText;
    let offset = document.querySelectorAll(content).length;

    elm.innerText = "Loading ...";

    let formData = new FormData();
    let xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){

        if(this.readyState == 4 && this.status == 200){

            if(this.responseText){

                document.getElementById('append-a').innerHTML += this.responseText;

                impression();

                elm.innerText = "Load More";

            }else{

                elm.innerText = "No More";

            }

        }

    };

    formData.append("id", id);
    formData.append("section", section);
    formData.append("subsection", subsection);
    formData.append("time", time);
    formData.append("offset", offset);

    xhr.open('POST', ajax, true);
    xhr.send(formData);

}

[Biiim]

You can use an anchor tag still just use href="javascript:" so it doesn't do anything on click.

<a href="javascript:" onclick="loadMore(this, '.Memes', 'ex/more.memes.php');">Load More Content</a>

It will get some default styles added to it, so you might want to add style="text-decoration:none;" and overwrite the other defaults for an anchor tag.

I think your worry is a bit more in the hands of Google and how they properly read what the content of your page is.

You could put a cannonical tag in the meta of your page and give all distinct variations of it for Google to index it well and not duplicate pages

And you could also supply a sitemap file to google of all your images so they don't miss any, it's a good way to SEO those aspects.

[jkon]

This is a rather controversial topic mainly because Google is changing its view in that over the last years. Luckily enough the strategy that we have used 13 or 14 years now in Java and in PHP still works great. 1. I you are going to load new content through AJAX / WS or some other mechanism change the URL as such that if you visit that page the first time you will see the same results. That means anything from head meta tags till anything. Anything must be the same in the resulting HTML code if you load it through direct visit or though AJAX / WS or anything... there are many free History js libraries out there that will help you with that or you can write your own (we just modified one). Of course that line of thinking is concluded in "is the view generated in client from data from server or directly from server" ... I know the pros and cons of this two approaches but I am sticking with the view is generated server side .

[Dani]

If you’re concerned, it should be simple to convert your existing code to use a link instead of a button and still have it look the same.

Personally, my convention is it should be a link if you’re navigating to a new page or fetching content. It should be a button if you’re making a POST request, or submitting data, such as a search query, a login, or even a one-click vote button that isn’t necessarily a part of a form. Googlebot should have no reason (nor ability) to populate forms, press buttons, or send data back to your servers.