First post here! I have a WordPress site with a few pages that have identical content. I did this because I wanted to style the content different ways for different devices and Visual Composer is kind of limiting in it’s responsive abilities. For example, I have 6 pictures each with a description inside on main element container that is only viewable on desktop. Another element with the same pictures and descriptions that is viewable only on mobile. I use “display:none” to hide the entire element containers.
From an SEO perspective, is my site penalized for this?
From a programming perspective, are these hidden elements still loading and therefore increasing the size of the pages?
[quote=“kevmon, post:1, topic:223025”]
I have a WordPress site with a few pages that have identical content. I did this because I wanted to style the content different ways for different devices and Visual Composer is kind of limiting in it’s responsive abilities.
[/quote]That seems like a really bad approach, but I don’t use Visual Composer (or WordPress), so I don’t know the limitations you’re facing.
That I can’t answer, because I’m not really sure how the set-up you’re describing would work. If you have a single page with various elements marked display:none for different screen sizes, then I believe most (all?) browsers download everything, whether it will be displayed or not. (But I could be wrong.) However, you seem to be talking about having different pages for the different content - or have I misunderstood you there?
We have a CMS & WordPress section on the forums. If you wanted to find a better way to structure your site, I’m sure one of the WP experts could help.
Obviously the html is always downloaded whether hidden or not and in general most resources in the hidden section will be downloaded although this does vary by browser.
Usually images are downloaded even when hidden but some browsers may opt to not download them until they are visible. You can check here whether your browser does download them or not and you can see that Chrome does download them.
Whether or not browsers should download hidden images is another matter because of course in the case of rollovers you would end up with a delay on rollover where an image is only made visible on hover so there are downsides both ways.
Duplicate content is always bad and possibly especially bad when hidden with display:none as that is like a red flag to search engines.
In these days of responsive design there are always better choices but of course could be awkward if you are hampered by CMS or have html restrictions. In most cases you need to get your hands dirty with the source html.
Usually well structured html can be made responsive quite well as long as you plan properly from the start.
[quote=“PaulOB, post:4, topic:223025”]
You can check here whether your browser does download them or not and you can see that Chrome does download them.
[/quote]Interesting link.
Presumably the display:none are in various media queries to target various devices.
It would of course be best to have the html elements just once and place the varying styling you have in those queries instead.
Thanks everyone, that helps a lot. I should edit the original post’s first sentence. I meant to say that a have a few pages that do the same thing: They have duplicate content on the same page. Anyway, I’m realizing talking with you all that even though my CMS is limiting, I can still plan the layout better. And even though at first it seems like Visual Composer is limiiting, there are still ways to inject custom CSS to take more control than I thought I could have.
Regarding the SEO question, TechnoBear that was really helpful, but you’re right, it doesn’t exactly apply to my situation. No matter how hard I look, I can’t find an answer about duplicate content on the same page. But I understand now and agree that’s it’s bad coding practice and I should avoid it in the future.
