5

I have an adaptive website, and in the mobile version, we put the same data as the desktop version, but in special tabs which are accessible via route URL change.

For example, we have the profile page, in desktop, it's only the /profile page. But in the mobile page, there are several tabs. For example: /profile?tab=about, /profile?tab=posts, and more.

The canonical for the mobile page is exactly as same as the currently active tab (ex: /profile?tab=posts) and for the desktop version is /profile

Google use SmartPhone bot to crawl the website, so it gets multiple canonical, and in the website, it handled that without redirecting or anything else, it shows the page. For example when desktop user come to /profile?tab=posts, he or she will see the desktop content of /profile which is for desktop.

Is this a good way to handle mobile and desktop canonical? or for all pages, I need to use only /profile

Improve this question
3
  • 2
    What is the reason that the mobile site has the tabs? Is it because of screen real-estate, or download speed, or something else?
    – Stephen Ostermiller ♦
    Sep 20, 2019 at 14:41
  • @StephenOstermiller It's our design system, and for providing better mobile version and for UX purposes we use tab.
    – Mohammad Kermani
    Sep 21, 2019 at 6:45
  • @StephenOstermiller So how would you handle that? What I'm doing here is wrong?
    – Mohammad Kermani
    Sep 21, 2019 at 6:47

2 Answers 2

Reset to default
1

If the content is the same on desktop and mobile, and the only difference is the way that you display the content to users on mobile devices, then I believe that you're making this more difficult than it needs to be.

If your tabs are constructed with a <ul>, just use media queries to control the breakpoints when your tab styles should get applied. Then you clean up your URLs and you set your canonical normally.

In this case your canonicals are really important because you're using query parameters. There are no redirects either. While Google can read them, query parameters are generally avoided by SEOs so that search engines don't have to try to guess about how to deal with the duplicate content.

Responsive design is what Google recommends, primarily for this reason. Separate URL configurations are difficult to implement and even more of a chore to maintain.

Improve this answer
0

If you have two site variants, for desktop and for mobile devices, you should have any logic to route users to certain site version. Lets assume, it is media query, which decides, which site version is to deliver. That is the method to deliver canonical:

  • if deliver desktop version - include the desktop canonical,
  • if deliver mobile version - include mobile canonical.

Google describes pretty detailedly how to deal with canonicals in this setup: https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls

Improve this answer
4
  • 2
    Where does Google address a setup with a many-to-one URL mapping between mobile and desktop?
    – Stephen Ostermiller ♦
    Sep 20, 2019 at 14:59
  • i would say, it implies using own canonical for each page. I wouldn't call it many-to-one - they are just different. Or have i a logic bug?
    – Evgeniy
    Sep 20, 2019 at 15:02
  • 1
    They say they break a desktop page up into several tabs on mobile and each tab gets its own URL.
    – Stephen Ostermiller ♦
    Sep 20, 2019 at 15:14
  • So i would create canonical according to current url. Something like <link rel="canonical" href=" <?php $url = "//$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]$_SERVER['QUERY_STRING']"; $escaped_url = htmlspecialchars($url, ENT_QUOTES, 'UTF-8'); echo $escaped_url; ?> " />
    – Evgeniy
    Sep 20, 2019 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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