Proper CSS for schema rich snippets (microdata)

[jbc]

Perhaps a newbie question but I can’t seem to find solid examples of CSS styles for schema.org microdata. Say I wanted a review, the code might look like this:

CSS Tricks
Reviewed by John C on Sep 25
The one-stop location for everything CSS.
Led by the intrepid Chris Coyier, CSS-Tricks.com is the only place to go if you have questions about CSS or want to expand your knowledge.
Rating: 5.0

So what is the CSS to mark this up? From the Top:

1. Itemscope Itemtype The item type is a “Review” and this element doesn’t display on the site so I assume we don’t bother with CSS for #1.

2. itemprop=”itemreviewed” I want something akin to my H1 or H2 tag but what’s the syntax?

The syntax for #2 would help me throughout all the other items until I get to Rating.

3 Rating. If Google sees Rating: 5.0 it will know to substitute actual stars for my rating. (to be so lucky). But what if I wanted to have Stars using Images AND pass valid microdata to web crawlers?

In Google’s article on this Rich snippets-review ratings there is information on how to use an image but that doesn’t seem to pass the mark-up syntax testing. My goal would be to have my stars on both my website and in organic search results.

Has anyone created a list of itemprop’s and some basic css for the microdata?

john

[jbc]

Well, I’ve made progress for anyone who cares, here is what I’ve been successful using:

[itemprop="itemreviewed"] {
    color: #143196;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 15px;
    margin: 0 0 1.5rem;
    font-size: 20px;
    font-size: 2.0rem;
}

[itemprop="reviewer"] {
    color: #143196;
    font-family: 'Roboto Slab', serif;
    font-weight: 200;
    line-height: 1.2;
    margin: 0 0 15px;
    margin: 0 0 1.5rem;
    font-size: 14px;
    font-size: 1.4rem;
}

I’m sure there must be syntax to consolidate the two and only identify the font size but I don’t know the syntax. Nor do I know what the role of the [ and ] are but I was able to find this working example on the web HTML5 Microdata and CSS

[jbc]

Well, I’m making progress and having a nice conversation with myself. To close some of my questions above, I now know what square brackets are for and I trimmed the css a bit. The stars are still a mystery but here is what I have so far.

[itemprop="itemreviewed"],
[itemprop="reviewer"],
[itemprop="dtreviewed"],
[itemprop="summary"],
[itemprop="description"] {
    color: #143196;
    font-family: 'Roboto Slab', serif;
    line-height: 1.2;
    margin: 0 0 15px;
    margin: 0 0 1.5rem;
}

[itemprop="itemreviewed"] {
    font-weight: 400;
    font-size: 20px;
    font-size: 2.0rem;
}

[itemprop="reviewer"], 
[itemprop="dtreviewed"], 
[itemprop="summary"],
[itemprop="description"] {
    font-weight: 300;
    font-size: 16px;
    font-size: 1.6rem;
}

[Alen]

Something like this:

[itemprop]{
    /* Shared Styles */
    margin: 0 0 15px;
    margin: 0 0 1.5rem;
    font-family: 'Roboto Slab', serif;
    line-height: 1.2;
    color: #143196;
}

[itemprop="itemreviewed"]{
    /* Individual Styles */
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: 400;
}

[itemprop="reviewer"],
[itemprop="dtreviewed"],
[itemprop="summary"],
[itemprop="description"]{
    /* Individual Styles */
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 300;
}

Note, not tested!

[jbc]

Thanks Alen,

Turns out the use of square brackets [ ] won’t work as there are other elements in my site that use Description. I’m going to have to get more specific. This may take some noodling.

John

[jbc]

Because of the brackets I choose to use class selectors so not my CSS looks like this:

.schema_name {
    color: #143196;
    font-weight: 400;
    font-size: 20px;
    font-size: 2.0rem;
}

.schema_name_footer {
    color: #fff;
    font-weight: 400;
    font-size: 20px;
    font-size: 2.0rem;
}

.schema_description_footer {
    color: #fff;
    font-weight: 300;
    font-size: 16px;
    font-size: 1.6rem;
}

.schema_description,
.schema_street,
.schema_city,
.schema_region,
.schema_postalcode,
.schema_telephone {
    font-weight: 300;
    font-size: 16px;
    font-size: 1.6rem;
}

seems to be working

[Author]

Posts