: Best way to let Google index page with tabs - SEO 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

@Alves908

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.

Vote Up Vote Down