seo Question posted in
Some basic information to get you started with this can be found here.

Eliminate duplicate header tags <h1> on a web page for desktop and mobile – SEO

I have a web page and that page can be viewed both on mobile and desktop. However i have two different css classes like below:

<div class=phone-visible>
<h1> .....</h1>
</div>

and 

<div class=phone-hidden>
<h1> .....</h1>
</div>

so basically when i open the page on mobile see some content/styles which i write specifically for mobile.
But for SEO purpose, when the page loads i dont want to see the duplicate header tags when i open on a specific device, like i dont want to see the mobile tag when i open my page on desktop.( basically in view source i dont want this to be displayed) I tried doing in CSS( referring to solution in other posts) but that didnt resolve my issue as those still show up on source.
Any particular approach?

Tags:

2

Answers


  1. 0

    Use CSS Media queries to control the UI in different Screen size
    below example might help you. 

    @media (min-width:750px) {
    .bigScreen {
        display:block !important;
    }
}

//tabs and bigger screen
@media (max-width: 600px) {
    .smallScreen {
        display:block !important;
    }

    .bigScreen {
        display:none !important;
    }
}
    Login or Signup to reply.
  2. 0

    You only need one instance of the H1 tag. 

    <div class="myclass">
<h1> .....</h1>
</div>

    Then use your responsive CSS to style according to the viewport size. That’s what responsive is all about! All you would need is to edit the smaller view port size.

    So, improving on Yubraj’s answer, leave your largest screen size CSS in the main section of your CSS and then add your mobile css here:

    @media (min-width:750px) {
    .myclass h1 {
        font-size: 18px;
        font-color: #000000;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search