Display:None in Modal and @media affects SEO

Question

I’m trying to apply responsiveness on a site, but some menus of categories I transfer into a modal of the bootstrap that uses the display:None, in addition to causing some desktop elements to be hidden so that other elements appear in mobile, also using display:None inside @media (ex: @media(max-width: 767px)).

I would like to know the impact of this issue on the site’s SEO, if it is preferable that instead of the display:None I put position:Bsolute; left: -10000px ! Mportant; opacity: 0;

Thank you for your attention and I apologize if I was unclear!

Answer 1

Arenas, according to google itself. Link here

Hidden text and links Hiding text or links in your content to manipulate Google search rankings can be seen as misleading and is a violation of the Google Webmasters Guidelines. The text (such as excessive keywords) can be hidden in several ways, including:

Using white text on a white background Locating text behind an image Using CSS to position text off the screen Setting the font size to 0 Hide a link just by linking a small character - for example, a hyphen in the middle of a paragraph When reviewing your site to see if it includes hidden text or links, look for something that isn’t easily viewable by visitors to your site. Is there any text or links only to search engines instead of visitors?

However, not every hidden text is considered misleading. For example, if your site includes technologies that search engines have difficulty accessing, such as Javascript, images, or Flash files, the use of descriptive text for these items may improve the accessibility of your site. Remember that many human visitors who use screen readers, mobile browsers, browsers without plug-ins and slow connections will not be able to view this content and will also benefit from descriptive text. You can test the accessibility of your site by disabling Javascript, Flash, and images in your browser, or by using a text-only browser such as Lynx. Some tips to make your site accessible include:

Images: use the alt attribute to provide descriptive text. In addition, we recommend using readable captions and descriptive text around the image. See this article for more advice on how to publish images. Javascript: Place the same Javascript content in a tag. If you use this method, make sure that the content is exactly the same as that contained in Javascript and that this content is displayed to visitors who do not have Javascript enabled in their browser. Videos: Include descriptive text about the video in HTML. You may also consider providing transcriptions. See this article for more advice on video publishing.

How much your doubt is correct yes use display:None when @media screen and (), including, when using the property position:absolute; left: -10000px !important; opacity: 0; is considered blackhat as above text:

Using CSS to position text off the screen

I hope I’ve helped.