How to hide repeated content from search engines with CSS?


Tags: html,css,seo

Problem :

I have a page structure for a website using fixed headers/footers around the main content. To keep things simpler for responsive design, I'm not using margins around the main content, I'm actually repeating the header/footer in the document - one in the fixed position, and once in the dynamic one. This means I don't need to worry about different heights on different devices.

However, I don't want the repeated content showing in search-engine results, so how can I hide it?



Solution :

CSS doesn't hide anything from search engines.

For good practice, you should consider getting back to only one header/footer.

How about duplicating the header and footer with Javascript? You could use the jQuery .clone() method for this purpose.

Most search engine don't execute Javascript for their crawling.


    CSS Howto..

    How to center a text nav bar with CSS

    How this blur works

    How do I change the z-index of a div when the user mouses over it?

    How to style a custom TreeCell with CSS in ScalaFX?

    How to show image based on sort type in GridView

    How to prevent fixed positioned element overlapping others elements in css?

    Off-canvas navigation: How to make a second-level menu slide in on top of first-level menu without covering body text?

    Coding the slideshow

    IcoMoon App icon fonts are shown as 

    How to target CSS module classes after they are hashed?

    How to convert complex xpath to css

    How do I translate an image based on its height?

    How could I have an iframe that shows the target page and all it's elements at 50% scale?

    How to make a div take the remaining height without knowing the height?

    How to vertically center divs?

    make the div (in css) to grow bottom-up? how?

    Unsure how to use border-bottom in CSS

    making div inside div and put it right-bottom corner how?

    How to select the last element within an element regardless of type in CSS?

    How set css style to GWT TextBox text?

    How to use padding and lengthen bootstrap search bar?

    How to add code into a page with a lot of conflicting CSS, without using Scoped CSS?

    How to dynamically apply nested base languages in textarea?

    How to use css style in php

    How to make child element do not fill his parent when hover is performed in CSS?

    How to target items

    How to have different transition durations for css and angular transition on same element?

    Added ellipsis for long text but it showing below the text

    Have element show when .onclick and when the element has focus from tab

    How to align the menu to center after certain width media query fires for RWD