Mobile header and Schema Tags

[edwardlewis]

We have recently made a website I work on responsive. This involved taking their original desktop site and then making it work on mobiles/tablets. Due to the nature of their existing header we are serving a different version to mobiles/tablets.

Do the schema tags which are on the desktop header need to be added to the mobile version or are they just needed on the desktop code?

[RobertFisher]

Edward,

When you say you made the site responsive and you serve a different version for mobile and tablets, I have to say I am confused. Are you stating that you made a site responsive, and you are serving a site that is different for mobile/tablet? My first thought is why make the site responsive if you are going to serve a mobile site?

For mobile there is schema that you should use (again, I am assuming you are serving two versions).

Best

[edwardlewis]

Sorry if this wasn't clear.. there is a different version of the header which is pulled in for the mobile version. The structure and contents of the desktop header was too complicated to use on a mobile, the client didn't want to amend the design of the desktop site. Only the header section is different, everything else is the same code.

[RobertFisher]

Given what you have here, the schema should be added to the mobile.

Best

[bridget.randolph]

Hi Edward,

Schema tags are intended to a) indicate with more granularity what a given element is on a page (e.g. 'review', 'recipe', 'video file', etc.), and b) this information can sometimes be used by Google for rich snippets in the SERPs. So whether you need to include these tags in the mobile version of your header will depend on what they are describing. If the code for the header is different for the desktop and mobile versions, but you do have the same element and you do want the schema tags to be there, you'll need to include them; if the element which you're marking up in the desktop header isn't present in the mobile header, don't include them.

There aren't currently (to my knowledge) specific Schema tags which indicate a 'mobile site'. (The ones that Robert mentioned seem to be for marking up a page featuring a mobile app). If you had a separate URL for mobile visitors, such as m.domain.com, you would need a mobile 'rel=canonical' tag to avoid duplicate content but that doesn't sound like it's the case for your site.

It sounds to me like you're using dynamic serving, rather than a pure responsive design. (pure responsive only changes the CSS whereas dynamic serving keeps the same URL but serves up different HTML based on user agent). If this is the case, you'll also want to include a vary HTTP header based on user agent. (the Google guidelines for how to do this are here.) This indicates to Google that you are serving a different HTML based on user agent, and not cloaking.

Hope that helps!