I have two views one for mobile and the other for desktop using css media queries. My question is around paragraphs in the mobile view, I would like to split one paragraph into two so it displays better on smaller devices. I have it working but want to ask what the best approach is for SEO when using semantic tags, or a better way or recommended way to write my code.
I have used two sections with different IDs to display or hide the desktop text or mobile text depending on the screen resolution . One has two paragraphs and the other just one, but the text is exactly the same.
- Note that I have no heading tag for the desktop view, this is intentional as I display the title just in a different location on the desktop view.
I understand that section semantic tags should contain a heading tag, however mine doesn’t in the desktop view but does in the mobile view. I’ve read that Google indexes mobile first for SEO, so does it matter that the h2 heading tag is not inside of the section tag on the desktop view?
Then finally is there another way to just maybe have one section id rather than two to reduce the code - that adds the extra paragraph in the mobile view?
<section id="cars-mobile"> <h2 class="page-heading">Car Title</h2> <p>This is my first paragraph on mobile</p> <p>This is my second paragraph on mobile</p> </section> <section id="cars-desktop"> <p>This is my first paragraph on mobile. This is my second paragraph on desktop. </p> </section>