.Dogster and Catster Local now Support hCard Microformat
Microformats are a way of information commonly found in web page, (e.g. contact information, calendar events, reviews, listings, etc.) easily extractable by other web services. The beauty of Microformats is that they use HTML class assignments such that you can simply markup your existing code to indicate which are the significant fields.
We recently rolled out hCard Microformats in all 70,000 pet-related businesses and locales listings in our Dogster and Catster Local areas. Now our listings will be indexed and found in search engines that just index hCard embedded pages. Even better with a click of a link any user can download that locale’s name/address/contact info, right to their desktop address book.
Next we will markup each listing to be hListing compliant and each written review will be hReview compliant. This is not going to change the world or even Dogster. In fact most users won’t even know about these additions in our source code, but it will mean that as search engines are developed to find just this type of structured data, our pages will be easily indexed and found.
[...] Dogster and Catster, the social networking sites for dog and cat owners and lovers have just announced support for hCard for pet related business listings, and promise upcoming hListings and hReviews. [...]
Great choice putting microformats on your website! I did find a few issues I wanted to point out.
1. When you do a Local Search, there is a microformat on that page that doesn’t make sense. It’s vcard with an fn of “Local Search”
2. the hCard for individual business when you click on them from local search does not contain “org” on the fn. This means that they are not actually marked as businesses, so the cards could get parsed incorrectly.
3. the hCard for individual businesses contains some erroneous label content related to the review. I think it’s because the class “label” was used for something unrelated to the hCard, but it is nested in the hCard.
Incidentally, I found all these issues using Operator.
https://addons.mozilla.org/firefox/4106/
Thanks Michael,
That’s the kind of community support I always hoped for! I’ve been using Operator since I saw you speak at SXSW, but not for debugging, so that’s a great tip.
The one issue I have is that ‘label’ is a common class name we use on our site for 3 years now. It would be annoying to change. I’m going to to have to go look for the way to indicate a certain class should NOT be considered part of the hCard.
And then I’ll yank it out from the search results page. (And ad the org class ;)
Why did you guys choose to make the entire page content the vcard instead of just putting the vcard around the relevant data? For
http://www.dogster.com/local/TX/Austin/Pet_Friendly_Restaurants/Whole_foods_market-58043
for instance, the vcard was added to a near toplevel div (pagecontent).
It could have been added as low as listingAddressAndAttributes and still worked, and then the label wouldn’t be nested in the vcard.
By the way everyone, Michael Kaply is the author of the amazing Operator plugin and a true Microformats expert. It’s great to have him here.
For example I just learned that Operator has a debug mode which give amazing visibility into exactly what is being extracted with your microformat and why.
Brizzziliant!
I’m actually wrong. Using Firebug, I see that vcard would need to be on pageColCenterInner because your fn for your vcard is the first h1 (pagetitle)
I think is this an example of a PERFECT candidate for the include pattern (http://microformats.org/wiki/include-pattern)
Here’s how it would work.
Add vcard to listingAddressAndAttributes.
Then add an id to the h1 that contains the name of the business (we’ll use id=bus_title)
Then add this to the vcard:
<a href=”#bus_title” class=”include”></a>
and you have your hcard
Thanks Michael.
I’ve lowered the vcard class assignment into listingAddressAndAttributes and used the include pattern to pull in the org name from the outer div. Works like a charm.
I also added ‘org’ along with the ‘fn’ class assignment.
Finally, your Operator plugin has been invaluable for debugging. It has immediately joined WebDeveloper and Firebug as must-have development Add-Ons.
Anyone reading can download it here: https://addons.mozilla.org/en-US/firefox/addon/4106