Search code examples
csshtmlseorich-snippets

Legitimately hide/prevent Rich Snippet html from rendering on screen - is this OK to do?


I am using rich snippets on my site, I have all of the code for them in the footer so that they are centrally located and easy to access. I do not want the text around these snippets rendered on the page because that info is elsewhere on the site. Is it ok to hide this text by using style="display:none" or will Google ignore the rich snippet entirely because the fields are hidden?

<!-- start rich snippet code -->
<div itemscope itemtype="http://schema.org/LocalBusiness">
    <span itemprop="name" style="display:none">My Business Name</span>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress" style="display:none">123 Example Street, Suite 456</span>
        <span itemprop="addressLocality" style="display:none">Major City</span>
        <span itemprop="addressRegion" style="display:none">NY</span>
        <span itemprop="postalCode" style="display:none">12345</span>
        <span itemprop="addressCountry" style="display:none">US</span>
    </div>
    <span itemprop="telephone" style="display:none">(123) 456-7890</span>
    <a itemprop="URL" style="display:none">http://www.mycompanysite.com/</a>
</div>
<!-- end rich snippet code -->

Any info would be much appreciated! Thanks in advance!


Solution

  • As @Diodeus said, ideally you'd have these rich snippets on the actual info that is shown to the user elsewhere on the site. Duplicating it is usually unnecessary.

    Yes, Google may well ignore this content based on the display:nones. Can I ask why you're setting it on each element rather than just once on the highest level div?

    A way around the display:none potential SEO issue would be to hide it in a different way. For example give the parent div a class of .visuallyhidden and add this to your stylesheet:

    .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }