Can I use multiple times tag one for desktop another for mobile?

问题

I am using bootstrap-3 ,html-5. My question is, can I use <h1> tag multiple times in the same page? I am using one <h1> for desktop and another <h1> for mobile. I am bit confused after searching the question. Can any one correctly suggest me the right way?

My codes are below. Are the codes SEO friendly?

<div class="row">
  <div class="col-sm-12 hidden-xs">
      <h1>Header in Desktop</h1>
  </div>
  <div class="col-xs-12 hidden-lg hidden-md hidden-sm">
      <h1>Header in Mobile</h1>
  </div>
</div>

回答1:

Yes ofcourse, You can use multiple h1 tags in a single page and for SEO, google has also confirmed the use of multiple h1 tags are fine. It is valid as long as each h1 tag is inside a element of html5 (except for the first h1 on the page which does not need a specific wrapper).

Currently, Google is giving two different ranks, one rank for desktop and one rank for mobile. So having two h1 tags are fine (one for desktop, one for mobile).

You can use your code like this.

<div class="row">
  <div class="col-sm-12 hidden-xs">
      <h1>Header in Desktop</h1>
  </div>
  <div class="col-xs-12 visible-xs-*">
      <h1>Header in Mobile</h1>
  </div>
</div>

hidden-xs means it will be visible on desktop, tablets and hidden on mobile.

visible-xs-* means it will be visible on mobile and hidden on all other devices like tablets, desktops.

来源：https://stackoverflow.com/questions/45918393/can-i-use-multiple-times-h1-tag-one-for-desktop-another-for-mobile

标签

html5