0

As you know, search engine robots sometimes count invisible elements as SEO spam. I have a website that i want to improve SEO performance. I'm planning to make homapage as like below. Will this be count as spamming by robots as it has overflowing invisible area? Is there a standart for this that telling which ones are count as spam and which ones are not?

The demo page is HERE

HTML

<header>
  <a href="#" class="btn">Editor</a>
  <a href="#" class="btn right">Register</a>
  <a href="#" class="btn right">Login</a>
  <img id="logo" src="http://cr8code.co/images/cr8.png">
</header>
<div id="container">
<img id="logo2" src="http://cr8code.co/images/cr8.png">
<input type="search" id="search">
<a href="#" class="btn">Submit</a>
</div>
<div id="seo">
  More
</div>
<div id="seo-container">
  <div id="seo-less">
    Less
  </div>
  <p>Intro Video, About page, Some Stats etc. This area will be used for SEO improving not spamming.</p>
</div>

CSS

body{
  margin:0;
}
header{
  height:50px;
  background-color:#E4E5E6;
  width:100%;
  position:relative;
}
.btn{
  text-decoration:none;
  color:white;
  font-weight:bold;
  font-family:sans-serif;
  height:30px;
  line-height:30px;
  margin-top:10px;
  background-color:#e60073;
  display:inline-block;
  width:100px;
  text-align:center;
  border-radius:5px;
  margin-left:10px;
}
.right{
  float:right;
  margin-right:10px;
  margin-left:0 !important;
}
#logo{
  height:30px;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}
#container{
  width:400px;
  height:150px;
  top:0;
  bottom:0;
  left:0;
  right:0;
  position:absolute;
  margin:auto;
}
#logo2{
  width:400px;
  display:block;
  margin:auto;
}
#search{
  margin:auto;
  margin-top:20px;
  width:250px;
  height:30px;
  border:1px solid;
  border-radius: 5px;
  box-shadow: 0 4px 1px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
  border: none;
}
#seo{
  width:50px;
  height:30px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background-color:#e60073;
  color:white;
  text-align:center;
  font-family:sans-serif;
  font-weight:bold;
  border-radius:5px 5px 0 0;
  line-height:30px;
  cursor:pointer;
  margin:auto;
  z-index:21;
}
#seo-container{
  height:calc(100vh - 50px);
  width:100%;
  background-color:#620073;
  position:fixed;
  bottom:-100vh;
  z-index:20;
  color:white;
  text-align:center;
}
#seo-container p{
  width:100%;
  height:50px;
  top:0;
  bottom:0;
  margin:auto;
  display:block;
  position:absolute;
}
#seo-less{
  width:50px;
  height:30px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  background-color:#e60073;
  color:white;
  text-align:center;
  font-family:sans-serif;
  font-weight:bold;
  border-radius:0px 0px 5px 5px;
  line-height:30px;
  cursor:pointer;
  margin:auto;
  z-index:21;
  display:none;
}

JS

$(document).ready(function(){
  $('#seo').click(function(){
    $('#seo-container').animate({'bottom':'0'},700);
    $('#seo').fadeOut(500);
    setTimeout(function(){
    $('#seo-less').fadeIn(500);
    },700);
  });
  $('#seo-less').click(function(){
    $('#seo-container').animate({'bottom':'-100vh'},700);
    setTimeout(function(){
    $('#seo').fadeIn(500);
    },700);
    $('#seo-less').fadeOut(500);
  });
});
4
  • Your example is so specific that answers to your question could only apply to your particular situation. Commented Mar 26, 2018 at 19:03
  • @StephenOstermiller Pardon me but divs that are accessable with clicks but not visible at start is a common problem for SEO as there is many people seek for the answer and too mant information pollution on internet about this. Commented Mar 26, 2018 at 19:11
  • You could edit this to make it a minimal example. A demo of the concept should be do-able in about 10 lines of code. Commented Mar 26, 2018 at 19:21
  • Let's think simply, it doesnt really matter how many lines of codes (as most of them are css) and also in this example, making a real like page lets people to understand what we are talking about better. So didn't you understand what am i asking? If you did then you are wrong. Commented Mar 27, 2018 at 5:53

1 Answer 1

3

It's not spam, it's just mean your text is accessible only after someone click, and Googlebot sometime click on those things. Actually that's why people complain often that "they are getting Googlebot request on their submit form" because sometimes Google try to click on those things to know whether next form contain any information on it or not.

So it's not spam, it is more like visibility problem, check John Mueller comment on this.

From our point of view, it’s always a tricky problem when we send a user to a page where we know this content is actually hidden. Because the user will see perhaps the content in the snippet, they’ll click through the page, and say, well, I don’t see where this information is on this page. I feel kind of almost misled to click on this to actually get in there. So that’s…the problem that we’re seeing. …we’ve gone a little bit further now to actively ignore the information that’s not directly visible. So if you want that content really indexed, I’d make sure it’s visible for the users when they go to that page.

But the same is not true for Mobile Index, because many times it's hard to put all the information in one layer, so they did not cut any weight(position) when it comes to mobile ranking.

3
  • Ok thank you very much for your answer. I understand what you are mentioning with John Mueller's quote. Then if I make my link dynamic like; ?more=yes and let the more button be clicked on load this will not be a problem as well. Am I true? Commented Mar 26, 2018 at 19:05
  • You mean making dynamic link only for Googlebot when page is loaded, and for normal user it will be open only if user click on it? If yes then it's not good idea. As John mention, Google favor less on those content which is not simply visible. If you believe people query matched with your content(Inside SEO container) then probably you should display it properly, if it does not bring any traffic, then it's totally fine, it is not spam. But displaying different content to user and Googlebot is consider as cloaking(spam technique).
    – Goyllo
    Commented Mar 26, 2018 at 19:19
  • I meant for users to see the mentioned comtent of snippet to match with actual. Not for decieving bot. Commented Mar 26, 2018 at 20:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.