CODEWITHSUNDEEP
javascriptcssmicrodataschema.orgrich-snippets
pspahn
pspahn

Reputation: 2790

Hiding Google Rich Snippets

As stated by Google regarding hiding rich snippets from the user:

It can be tempting to add all the content relevant for a rich snippet in one place on the page, mark it up, and then hide the entire block of text using CSS or other techniques. Don't do this! Mark up the content where it already exists.

The problem I am looking at, however, is that in some frameworks this is excessively cumbersome as each of the desired rich snippets live in one of dozens of templates. From a developer perspective, this creates fragmented code all over the place which complicates the modular nature of the framework.

The main question is, what would be a good technique to use so that the rich snippets can exist all in one template? I've considered expanding on the concept of an 'SEO Block' which would live at the bottom of the page and provide the desired rich snippets, but this just seems messy and causes duplicate content.

Are there any other possible tricks to use here so that this markup can be hidden from a user? If I place the rich snippet content into a div that uses jQuery slideToggle(), is that still 'hiding' the content as far as Google is concerned?

Upvotes: 2

Views: 2470

Answers (2)

Victor Lava
Victor Lava

Reputation: 121

It is possible to hide your rich snippets with meta keyword. I have accomplished this at my personal website(victorlava.com). Take a look:

<article itemscope="" itemtype="http://data-vocabulary.org/Person">
                <meta itemprop="name" content="Victor Lava">
                <meta itemprop="photo" content="http://www.victorlava.com/external/victor-lava.png">
                <h2>I am a Professional <span itemprop="title">Web Developer</span> who creates web applications</h2>
                <p itemprop="description">I am a professional <b>web developer</b> from <span itemprop="location">Lithuania</span>, who trully enjoys <b itemprop="role">coding</b>. I develop all kind of <b>web</b> things. Web things like: <b>web applications</b>, <b>websites</b> and <b>custom cms</b>.  
                   For my frontend development I like to use: <b>HTML5</b>, <b>CSS3</b> and <b>Javascript</b>. These are the latest web technologies, which must be used in the development process by <b>professional</b> web developer. For my backend development I usually use web technologies like: <b>PHP</b>, <b>MySQL</b>, other <b>APIs</b> and <b>CodeIgniter</b>.
                   I am that kind of <b>web developer</b>, who isn't afraid to experiment. By experimenting I am able to create unique and eye-catching <b>websites</b> for my clients. I am open for new proposals, so feel free to <b><a href="http://victorlava.com/contact.html" title="Hire Web Developer">hire me</a></b>.</p>
            </article>

Use the: <meta itemprop="name" content="Your Content"> The meta property works just fine, you don't need to hide anything with CSS, nor Javascript. In my opinion, the meta property would be the best option to you. Btw, you can read more about rich snippets and how to test them here http://blog.victorlava.com/rich-snippets-testing-tool-webmaster-seo-very-useful/.

Upvotes: 1

Copons
Copons

Reputation: 3

Google penalizes for duplicated content on the same page too.

I assume we're talking about a site showing lots of different kind of stuff (ie. a site selling books, movies, CDs, etc.), where it's just not possible to choose only one entity for every page.

In cases like this hardcoding microdata may be too complicated, especially if you're using a framework (or a CMS) that you don't know how to bend to your needs.

Anyway, you can try to set custom fields (I'm thinking about Wordpress, but this could be extended to virtually anything) to at least identify the page main entity.

From there it should be easier, as more or less every entity has almost the same set of properties which you finally could hardcode.

Upvotes: 0

Related Questions