hCard WordPress Widget

Home / hCard WordPress Widget
IMAGE: Local SEO plugin for WordPress

UPDATED TO 1.5.3

UPDATE INCLUDES:

 

New Features:

  • Twitter, Facebook and LinkedIn profile links (rel=”me”)
  • Google+ profile link (rel=”author” for individuals and rel=”publisher” for organizations)
  • Options page

The hCard Widget for WordPress outputs your contact information in accordance with the hCard Microformat standard.  This provides structured semantic metadata about the contact information displayed on your site, and is especially important for local SEO.

What It Does

the hCard Widget plugin gives you a new widget where you can enter all kinds of contact information for an individual or an organization.  That information is then displayed on your site, wrapped in the appropriate schema.org and microformat code so that Google and the other search engines can better understand what that information means, and even extract it so it appears as a rich snippet in search engine results.

Huh?

Normally, your the code for your contact information might look something like this:


<div>
<h2>Jane Doe</h2>
123 Sesame Street
Someplace, QC
A1B 2C3
Canada
Tel:123-456-789
Email:<a href="mailto:jane@janes-site.com">jane@janes-site.com</a>
URL:<a href="http://janes-site.com">http://janes-site.com</a>
</div>

Now,  that’s ok, but if you use the hCard Widget to display the same information, it looks the same to visitors, but is coded like this:


<div class="vcard hc-individual" id="ind-hcard" itemscope="" itemtype="http://schema.org/Person"><span class="fn n hc-individual-name" itemprop="name">
</span>
<!--?php if($&;job_title !='') { ?--><!--?php }?-->
<!--?php if($&;org != '') { ?-->
<div class="org hc-individual-org" itemscope="" itemtype="http://schema.org/Organization"></div>
<!--?php } ?-->
<!--?php if($&;street_address !== '') { ?-->
<div class="adr hc-individual-postalAddress" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<div class="street-address hc-individual-street" itemprop="streetAddress"></div>
,
</div>
&nbsp;
<div class="tel hc-individual-phone" itemprop="telephone">T:</div>
&nbsp;
<div class="tel hc-individual-phone-2" itemprop="telephone">T:<a href="&quot;tel:+1&lt;?php">&#8220;<!--?php echo $&;tel;?--></a></div>
<!--?php }?-->
<!--?php if($&;fax !== '') { ?-->
<div class="tel hc-individual-fax" itemprop="faxNumber">F:<!--?php echo $&;fax;?--></div>
&nbsp;
<div class="hc-individual-social" itemscope="" itemtype="http://schema.org/Person"><!--?php if($&;googleplus !== '') { ?--><a class="hc-individual-gplus" itemprop="url" title="Google Plus" href="&lt;?php echo $&;googleplus;?&gt;" rel="author">Find me on Google Plus+</a>
<!--?php } ?-->
<!--?php if ($&;twitter !== '') { ?--><a class="hc-individual-twitter" itemprop="url" title="Twitter" href="http://twitter.com/&lt;?php echo $&;twitter;?&gt;" rel="me">@<!--?php echo $&;twitter;?--></a>
<!--?php } ?-->
<!--?php if($&;linkedin !== '') { ?--><a class="hc-individual-linkedin" itemprop="url" title="LinkedIn" href="&lt;?php echo $&;linkedin;?&gt;" rel="me">Connect on LinkedIn</a>
<!--?php } ?-->
<!--?php if($&;facebook !== '') { ?--><a class="hc-individual-fb" itemprop="url" title="Facebook" href="&lt;?php echo $&;facebook;?&gt;" rel="me">Follow Me on Facebook</a>
<!--?php }?--></div>
</div>

Pretty neat, and what’s even neater, is that Google can then look at that code and interpret that information.  You can see what Google can understand from that code by running it through the Rich Snippet Testing Tool.

Installing the Plugin

METHOD 1: USING THE WORDPRESS INSTALLER

1. Download hCard Widget for WordPress plugin (hCard_Widget.zip)

2. Login to WordPress and go to Plugins-> Add New -> Upload

3. Click the “Choose File” button and select ‘hCard_Widget.zip” from your hard drive.

4. Click “Install Now”

5. Once the plugin has been installed, click “Activate”.

METHOD 2: FTP

1.  Download hCard Widget for WordPress plugin (hCard_Widget.zip)

2. Extract the contents of the file.

3. Using your favourite FTP client, upload the folder to /wp-content/plugins/ on your server.

4. Login to your WordPress account and go to the Plugins page.

5. Activate the plugin.

Using the hCard Widget

  1. Inside WordPress, navigate to Appearance -> Widgets.
  2. You will see a new widget in the “Available Widgets” box.
  3. Drag it to the sidebar your want your contact information to appear in.  A good place to use this is in a widgetized footer area, since you really want to have your contact information on show up on every page.
  4. Fill out the fields that you need.  In addition to the contact information, each section and field can be assigned a unique CSS class  so that you can customize the appearance of the widget as a whole, as well as each item.
  5. Click save.
  6. You’re done.
Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.