7

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?

6

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.

  • I get it, thanks. But the thing is, that Google needs to somehow now about those URLs to index them (like /pets/cats that activate the Cats tab). Do you suggest putting the links on the tabs directly and simply linking to the respective page? So tab click = page reload. – lesssugar Jul 22 '16 at 10:33
  • 2
    Yes absolutely , it should be a href but not a window reload...you should stop URL reload and do that via ajax ...also add them to your sitemap + from anywhere within ur site for cross reference And linking. – abhinsit Jul 22 '16 at 10:50
  • I think it's a valuable suggestion. Before I was doing something similar, but based on anchors in the URL. These are of course not indexed, though, so the different-URLs approach sounds better. – lesssugar Jul 22 '16 at 11:29
  • Yes we have implemented the same in one of our projects and its pretty well indexed. – abhinsit Jul 23 '16 at 18:31
  • @lesssugar : if you find this answer working for you, mark this as correct to help the community . thanks..!! – abhinsit Jul 23 '16 at 18:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.