Earlier, I explained how to GeoTag your site to reach local clients and customers.  Another way to reach your local market is through the hCard Microformat.

At its simplest, the hCard is a 1:1 XHTML representation of the vCard, which has long been the standard in electronic business cards.  The hCard takes electronic business card contact information and formats it for any HTML, Atom, RSS, or XML file.  Your hCard can be formatted so that it is invisible to your site's visitors, but the contact information is collected by search engine spiders.

A simple hCard format, providing just your name and URL, would look something like this:

[ code ]

<div class="vcard">
   <a class="url fn" href="http://www.travislangley.com/">
      Travis Langley
   </a>
</div>

Of course, by adding classes, you can add detail to your contact information, as in the following example:

[ code ]

<div class="vcard">
   <span class="n">
      <span class="given-name">Travis</span>
      <span class="family-name">Langley</span>
   </span>
   <div class="org">Travis Langley & Associates</div>
   <a href="mailto:travis@travislangley.com">
      travis@travislangley.com
   </a>
   <div class="adr">
      <span class="locality">Edmond</span>
      <abbr class="region" title="Oklahoma">OK</abbr>
      <span class="country-name">United States</span>
   </div>
   <div>+1.405.923.5810</div>
</div>

For help creating an hCard for your site, you can use the hCard generator from Microformats.org.  You can learn how to hide your hCard in your website in the article "Everything About the hCard Microformat" at Qreative Zone.

The hCard is only one of the many microformats that add information to your site and make that data available for searching.  Microformats can also help you perform tasks quickly and easily:

• Use XFN to link to friends and contacts.
• hCalendar allows you to add events to your site.
• With hReview, you can review books, movies, and products.

Microformats.org has tools and creators for all of the above microformats to help you with coding microformats for your site

It's been awhile since my last post, and that means business has been good.  I have a series of great new client projects to work, and that has kept me pretty busy.  However, I needed a break from the layout and coding, so I thought I would add a new entry to the blog - actually, this is a recycled post from my old site..  This one deals with the use, or lack of use, of www on your sites URL, how it can affect your search engine rankings, and what you can do to correct the issue.

First, what really is the issue with using www or not you might ask.  For one, it's an issue of what is the best URL to serve for a given web page, otherwise referred to as canonicalization.  Most of us would consider the following to be the same thing:

grademyshades.com
www.grademyshades.com
www.grademyshades.com/index.htm

Actually, the  list could be a lot longer, and in this case these all point to the same page... but they don't have to.  Each of these URLs could actually represent a different page, and that's how the search engines see it, as different pages.  Just check out the following image for reference:



Notice above how Google has listed both grademyshades.com and www.grademyshades.com as two separate listings.  So what's the big deal?  The deal is two-fold.  First, search engines don't like duplicate content and will very often hand out penalties because of it.  This is exactly how the search engines see this - as duplicate content - two different pages with identical information and this is something you should definitely avoid. Second, search engines place a lot of weight on links from other sites to your pages.  Let's say that some of those links include the www in the url, and some do not.  You are essentially splitting those links up between what the search engine sees as two different pages, and neither version of your page will rank as well as if all those links were pointed to the same page.

Good news, there is a simple fix that essentially makes the non-www version non existent.  Just add the following bit of code to your .htaccess file (place in the root directory of your website - and replace domain.com with your domain) :

RewriteCond %{HTTP_HOST} !^www\.domain\.com [NC]

RewriteRule ^(.*)$ http://www.domain.com/$1 [L,R=301]

What this does is redirect any requests for the non-www version of you site to use the www version.  It also issues a 301 permanent redirect code, so that the search engines will know to only index the www version.  And there you have it - 2 simple lines of code to prevent or help correct what could be a big problem for your search engine optimization efforts.

Want more information on the subject?  Here's a good link from an industry insider on the subject of canonical urls (primarily from a google point of view) that should help answer more questions.

Over the next few weeks, I'm going to be moving over some of the posts from the blog on my old site.  This is the first of those.  Anyway, here is something I had to work through recently and didn't want to have to hunt down again in the future. I also felt it might be useful to other folks as well - surely I'm not the only one that has tried to do this. After spending too much time trying to find a good way to position a footer centered at the bottom of a browser window, I finally decided I would have to develop my own solution. What I wanted was something that would essentially dock itself to the bottom of the browser but not cover any of the content on the rest of the page. If the page had a lot of content, this wasn't a hard thing to do. But if the page was short, I didn't want the footer to appear just below the bottom of the content, leaving a gap between the bottom of the footer and the bottom of the browser window. The solutions I was finding either left the gap, or some would cause the footer to cover any content that required the page to scroll (it fixed the footer to the bottom of the browser and not to the bottom of the content). I came up with this fairly simple solution that appears to work in IE, Firefox and Chrome.

In the CSS above, the font and color definitions are optional (just to make things clear in the demo below), but almost everything else is required to make this work. Here are some explanations:

• The footer_container is placed below the wrapper and the top margin is set to minus the height of the footer
• The pad div is required to prevent the footer from covering content in the wrapper. This should be an empty div
• The height of the footer, the height of the pad, and the negative margin of the footer_container must all be the same value.
• Don't forget to include the conditional style in the wrapper div - IE doesn't recognize min-height and height must be explicity set.

Check out the Bottom Centered Div Demo to see this in action.