Guesty is moving our Guesty Websites to fully responsive design technology that uses CSS media queries to change the layout, hide content or display different elements based on screen size. This is standard across the web of how content is hidden for smaller or larger screen sizes.
When you hide a widget, section, or any content in the Guesty editor on a specific device, we hide it using CSS Media Queries. What this means is that the HTML (although hidden on the website) still exists within the web page when a viewer looks at the content.
This can sometimes cause a problem where an audit tool that scans the website will identify this hidden content, even though you thought that it was removed from the page.
Responsive Web Design (RWD)
Responsive Web Design (RWD) standards are used to adaptively change the web page based on the size of the device viewing the page. Doing this relies on Media Queries, which detect the size of the screen and then allow you to style the page based on that size. Because media queries rely on styles, it means that if you hide a widget, section, video, etc. on a screen size, it will still be in the HTML of the page, but hidden via styling in the CSS. This is a very common practice on the web.
When a screen is resized, content that was previously hidden might become visible, so that content must exist in the web page already.
SEO and Hidden content
Some people worry that search engines like Google will find hidden content and index it. You should know that this is not the case. Google (and other popular search engines) are able to identify if certain content is hidden and not index it. Google uses a mobile-first index, where they crawl the website using a mobile device. So, you should make sure that the mobile layout has all of the content you expect Google to be able to index and discover.
Some Examples of hidden, yet still, SEO Friendly Content
Having a different H1 widget on each screen size.
While you will only be able to see one H1 widget per screen size, all three will be able to be found in the code. The additional H1 widgets are hidden via media queries and styling so that only one is visible for each screen size. In this example, an audit tool may also report this as duplicate content (search engines will not see this as duplicate content). As long as you can confirm there is only one H1 tag visible on each screen size, there is no issue.
Placing a button on the desktop and tablet screen sizes and an icon instead on the mobile.
Both widgets will be in the code and will be hidden on the respective screen size using media queries and styling.
Hiding a section on all screen sizes because you are not ready for it to be live
The section will still be in the code, but will be hidden via styling on all screen sizes.
Using widgets that display a certain amount of content at a time such as sliders, tabs, and accordion widgets.
These types of widgets all have hidden content, though the content is easily accessible through visual clues (search engines detect there are visual clues).
Why Audit Tools Might See the Content
While search engines algorithms will apply the styling and therefore ignore hidden content, the crawlers (or bots) audit tools use might not be as sophisticated as Google and won’t apply that styling and only look at the raw content of the page. This could cause them to “see” content which is not actually visible on the site.
When Hidden Content is an Issue
If a deceptive tactic is used to hide content, it can be detrimental to SEO. An example of a deceptive tactic is placing repeated keywords on a site for the benefit of ranking and hiding them by setting the font size to 0 or camouflaging the text (making it the same color as the background) to make it not visible to the site visitor. Search engine algorithms are smart enough to recognize this and potentially penalize sites that use it.