I have an H1 tag displayed on the desktop version which does not fit into the design of the mobile version.
In order to make the H1 fit on mobile, I created a duplicate H1 with the exact same content which is only visible on mobile devices - on desktop viewports the mobile H1 is hidden and of course the desktop H1 is hidden on mobile devices.
To summarize, do search engines still see two H1 tags which I think is not best practices.?
What is the right approach to this problem?
This doesn’t sound like a good idea.
You can use the style panel to lower the font size rather then not displaying it.
Thank you for your quick reply. I expected an answer like this. Unfortunately lowering the font-size isn’t an option in my case.
How come? If both h1s have the same content what are you doing to the second h1 to make it fit?
Well the desktop H1 (tagline) which fits between the logo (positioned left on page) and menu (positioned right on page) in the header does not fit into the mobile header. So I played with the idea to integrate the H1 into the mobile drop down menu. But due to the html structure of the page and type of animation this only works with an H1 duplicate. Hope my explanation makes sense…
I think that if the animation is the key to jamming this whole thing up functionally, then dump the animation in mobile views. People on phones are in a hurry and don’t need all the bells and whistles of the desktop site. We often have to prioritize our most important content into a different order for mobile. Almost always, some content and fluff needs to be sacrificed in order to do that. So that’s my suggestion.