Scattered Thoughts » microformats

Hide your Email Address Using Microformats

Kunaal Ramchandani — Thu, 25 Oct 2007 15:25:38 +0000

Heres a little tip to hide your email address on your site, so that it is only visible to people with microformat readers.

Suppose I wanted to advertise an email ‘kunaal@somedomain.com’, normally you would not put that on your website for fear of getting your email inbox choked with spam. Here is another little trick to hide your email address from everyone without a microformat reader.

Normally, you would write your email address using microformats as so – Kunaal Ramchandani can be contacted on kunaal@somedomain.com, which in the code would appear as

Kunaal Ramchandani can be contacted on kunaal@somedomain.com

Now an ordinary scraper can easily pick up the email address mentioned in there, so to get around that we introduce random characters in between the email address, but put them outside the tags. What I mean is that I separate each character of the email address in a tag, and I write random letters in between each pair, i.e for ‘kunaal’ I would convert it to

k
u
n
a
a
a
l

and then introduce random characters like #,$,! random letters etc in between, making the final code look like

k##u!!n@@a$$a%%l^^@**s((o))m!!e@@d##o$$m%%a^^i**n((. ))c!!o@@m##

On screen this would appear as k##u!!n@@a$$a%%l^^@**s((o))m!!e@@d##o$$m%%a^^i**n((. ))c!!o@@m##.

This would make it unreadable to your average person and your normal everyday address parser, and only visible to a microformat parser!

SEO and Microformats

Kunaal Ramchandani — Wed, 24 Oct 2007 21:49:23 +0000

I came across this article on Search Engine Land titled “The hCard Microformat & Local Search Optimization” a few days ago. In it the author talks about using the hCard microformat for local SEO (something I had mentioned in passing in my earlier post as well). For those wanting a refresher course, they can read through my earlier post on the hCard microformat and how to implement it, or just check out the Microformats site.

While the major search engines do not read (and they haven’t made any announcements to the contrary) the hCard microformat yet, there does seem to be a trend towards using it and other microformats on an increasing number of large websites, Twitter, Yahoo! Local & Maps, Yahoo! Tech, Google Maps to name a few. As a result, I believe that it is only a matter of time before the search engines start reading it, instead of just supporting them in their results. In the mean time however, they are already useful for people who have microformat browsers or microformat plugins. Firefox even announced that they would be supporting microformats natively in Firefox 3!

I have been trying to adopt a few different Microformats in this blog for a little while now, hCard, hAtom, xFolk , and there will be more to come as I continue to learn more about them and how to use them. If you are interested in adding microformats to your WordPress blog, you should have a read at this article on Lorelle on WordPress titled Microformats and WordPress Themes. I’ll also try writing about some more Microformats in the coming few days.

Microformats – xfn

Kunaal Ramchandani — Thu, 06 Sep 2007 14:30:20 +0000

XFN short for XHTML Friends Network was the first microformat and it remains perhaps the easiest of all microformats to implement. It is basically used by webmasters to indicate real world relationships with the people they mention in their blogroll/links.

Now if I were to link to a friend I would enter it into my blogroll as so

Some Body

In order to make this a XFN microformat, I would simplay add the “rel” attribute to the link, with a description of our relationship

Some Body

You can also add more information in the “rel” attribute, if for example you have met the person:

Some Body

Seems pretty simple right?
Here are all the values I know of that you can add in the “rel” attribute

me : If you are linking to another website of yours
```
Some Body
```
Friendship Type – This can be ” or any one of the following
- contact
- acquaintance
- friend
Physical Type – This can be ” or any one of the following
- met :If you have met this person or not
Professional Type – This can be ”, any one of the following, or all
- co-worker
- colleague
Geographical Type – This can be ” or any one of the following
- co-resident
- neighbour
Family Type – This can be ” or any one of the following
- child
- parent
- sibling
- spouse
- kin
Romantic Type – This can be ”, any one of the following, or all
- muse
- crush
- date
- sweetheart

You can also style each of the above classes differently to make a link appear different for a family member or a work colleague.
You can read more about XFN at these sites:
GMPG.org
XFN on wiki

Microformats – hCalendar

Kunaal Ramchandani — Tue, 04 Sep 2007 14:57:31 +0000

The next most popular microformat is the hCalendar (HTML iCalendar). This is used to create events/ entries in calendars based on the iCalendar standard.
Now an upcoming event for me could be mentioned as follows

Citizenship Ceremony – 6th September

To convert this to an hCalendar microformat we have to remember that the dtstart and summary fields are required fields.

The dtstart to mention the start date and the summary to write what the event is about, the rest are all optional.
The dtstart field must follow the following standard (YYYYMMDDTHHMMSS+ZZ:ZZ). Here is what the event would look like after we added in the two required fields:


  September 6th 6:45pm,
  Citizenship Ceremony— at

We can then go and add the following classes as well

dtend : the date the event is meant to end


  September 6th 6:45pm,
   8pm 2007 —
  Citizenship Ceremony

description: describes what the event is about


  September 6th 6:45pm,
   8pm 2007 —
  Citizenship Ceremony—
  My citizenship ceremony

location: where the event is to be held


  September 6th 6:45pm,
   8pm 2007 —
  Citizenship Ceremony— at
  Australia
  My citizenship ceremony

url: webpage relates to the event


  September 6th 6:45pm,
   8pm 2007 —
  Citizenship Ceremony— at
  Australia
  My citizenship ceremony

This is what we finally have and what the event will look like when entered into a page (minus the url addition)

September 6th 6:45pm,
8pm 2007 —
Citizenship Ceremony— at
Australia

My citizenship ceremony

Read more about the hcalendar microformat here:

microformats hCalendar wiki
hCalendar Cheatsheet

Microformats – hCard

Kunaal Ramchandani — Sun, 02 Sep 2007 14:34:54 +0000

Even though I have been working in the IT industry (study and work) for about 6 years now, the learning never seems to stop. The other day while surfing the net, I came across Microformats, a brilliant idea I am surprised I am coming across only now.

Microformats are small additions one makes to the HTML code of their pages (mainly class, rel and rev attributes) to make their data more readable by machines without affecting the layout for users. Microformats allow / will allow a number of different applications to extract information like event info, contact info etc into organiser software. At the moment, microformats are supported by the likes of Yahoo and Google. There is also talk that microformats will help you /your site rank better in search engines, which should get most webmasters and SEO companies pretty excited. I am still in the beginner stages of knowing everything about microformats, so I apologise for any mistakes.

The most well known microformats are

hCard – Used to give vCard style info.
hCalendar – Event info.
XFN – (XHTML Friend Network): Specify relationship info in hyperlinks

I am going to try tackling each of these three microformats one at a time, starting with the hCard.

1. hCard

I could put my contact information on a page like so:

Kunaal Ramchandani

Developer

My Organisation

My Street

My City,
My State,
1111
My Country

My Phone

To convert it to a hCard, note that the name is the only required field in the hCard.
It is generally marked up with the class name “fn”. Always the first name first and then the family name

Kunaal Ramchandani

In case of a middle name, you add the “n” class name to “fn” and split the name up like so:


 Kunaal
 Anmol
 Ramchandani

In my case I also wanted to link my site to my name which is why I added the “url” class name to “fn”

Kunaal Ramchandani

I then edit my contact info adding the following classes to complete the hCard transformation:

title : Job title, multiple job titles can be mentioned comma separated
```
 Kunaal Ramchandani
 Developer
```

org : Organisation you work for


 Kunaal Ramchandani
 Developer
 My Organisation

email : Email address


 Kunaal Ramchandani
 Developer
 My Organisation
 email@mydomain.com

tel : Telephone Number


 Kunaal Ramchandani
 Developer
 My Organisation
 email@mydomain.com
 My Phone

adr : Address, which requireds the following subclasses(which are pretty self explanitory)

post-office-box
street-address
extended-address
region
locality
postal-code
country-name


 Kunaal Ramchandani
 Developer
 My Organisation
 email@mydomain.com
 
  My Street
  My City,
  My State,
  1111
  My Country
 
 My Phone

This is what my hCard finally looks like