Best way to let Google index page with tabs - SEO

Question

Let' say I have a /pets page with 4 tabs on it:

• All
• Dogs
• Cats
• Owls

The All tab displays all the pets on page load.

Each of the 3 other tabs holds a list of dogs/cats/owls, respectively - loaded with Ajax on click. Every tab also has a "Load more" button to get the next N results.

The page currently indexed by Google is /pets. What I would like, is to keep this overview page with the tabs, but also make sure that the 3 specific-pet pages are getting indexed, too (especially because they have links to detail pages of the pets).

What I thought of:

1. My first thought was to keep the /pets page and simply link the 3 tabs to different URLs: /pets/dogs, /pets/cats and /pets/owls, but it does not seem user friendly to display tabs, which are actually links.
2. Alternatively, I thought to keep the /pets page with the tabs and Ajax, but additionally have dedicated pages (see point 1) for the 3 pet types. Then I would maybe create an extra "About" page with internal links to /pets/dogs, /pets/cats and /pets/owls, so they can be crawled. In this case, however, I'm not sure whether the danger of having duplicated content exists.

I wouldn't like to sacrifice user experience for SEO, which makes arriving at a solution harder.

Which of the 2 options above seems better to you?

Or maybe, if you have experience with such tab-driven pages: What other solution would you suggest?

Answer 1

This is a very common problem faced these days. This can be easily solved as follows:

If you want to have same page /pets but also drive /pets/cats, /pets/dog to index separately, then ideally they should exist separately i.e. if opened by a http client with a separate url they should respond independently.

Also the content populated via ajax or via backend should be same i.e someone opening /pets/dogs through search result or by clicking a tab on /pets (via ajax) should be same to avoid penalty of cloaking from crawler and better indexing.

Its just that, a more user-friendly or a single page application behavior is simulated without losing seo indexing for that content

For that to happen w.r.t. crawler and for you to have only one page managing that do the following:

Backend Changes

1) At the application level, configure your server to direct calls: /pets/, /pets/dogs, /pets/cats. . . on a single function

2) This function will send this required information/data to the same view(of the parsed tab) , and will set that tab active.

Example ,

if /pets/ is received then the backend should send the content of /all to view to make it crawlable and set all tab as active tab

if /pets/dogs is received then the backend should send the content of /all/dogs to view to make it crawlable and set dog tab as active tab

. .

Front End changes

Now if the user selects a tab from front-end, then you should add that in history and also fire necessary analytics pixel to track separate page views(virtual page views)

if(history && history.pushState)
            {
                var pageUrl = $("#page-"+page).attr("href");
                pageUrl = pageUrl.replace("https://","//").replace("http://","//");
                history.pushState(null,null,pageUrl);
            }

And also change the content of the page via ajax and set the tab as the selected tab.

Now even if the user refreshes the page, the state of the page should remain same. This is how this whole concept works.