Tag: displaynone

Can this code using ‘display:none’ hurt my SEO? [duplicate]

I’m trying to solve a problem with a content that I’m putting in a page with an iframe, the problem is: I want the SEO of that iframe but in the principal page, I wrote a collapse with JavaScript but it put the content in with display:none and I know that google has SEO penalties with no content displayed, so, I really don’t know what to do, any solutions?

here the code I’m trying to implement: https://codepen.io/explora-desarrollo/pen/abBoPJy

HTML

<button type="button" class="collapsible">+</button>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CSS 

.collapsible {   background-color: #777;   color: white;   cursor: pointer;   padding: 0px 3px;   width: auto;   border: none;   text-align: left;   outline: none;   font-size: 15px; }  .active, .collapsible:hover {   background-color: #555; }  .content {   padding: 0 18px;   display: none;   overflow: hidden;   background-color: #f1f1f1; }

JAVASCRIPT

var coll = document.getElementsByClassName("collapsible"); var i;  for (i = 0; i < coll.length; i++) {   coll[i].addEventListener("click", function() {     this.classList.toggle("active");     var content = this.nextElementSibling;     if (content.style.display === "block") {       content.style.display = "none";     } else {       content.style.display = "block";     }   }); }

Alternative CSS tags to “display:none;” for SEO [duplicate]

I have always made my pages "by hand". just coding them, a bit of javascript here and there.

And because I like to experiment with designs, i use a lot of popup divs, which means i use "display:none" tags for those divs.

I’ve been told that this could be hurting my searchability. The pages have been online for a long time. does anyone have some advice on this?

Someone has been mentioned that I will have difficulty with SEO and that I need to use a CMS like wordpress.

what do you think my next move should be?

Is there something in my CSS I can change, or do I go the CMS route?

thanks!

Is it a standard that the width or height of a “display:none” element is zero?

The offsetWidth or offsetHeight of a “display:none” element is 0 on Chrome.

What I want to know is this is a standard behavior defined by W3C, or just a dialect of browsers? Or it is a de facto supported by all modern browsers?

I searched out the web and found almost no text addressing my question.