hCard WordPress Widget

[vc_row][vc_column][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″]IMAGE: Local SEO plugin for WordPress



  • Compatibility with 4.1.1
  • Rebuilt with the amazing Piklist rapid development framework.
  • Link to support forum from plugin options page.
  • Streamlined use of CSS classes for styling.


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.


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

<h2>Jane Doe</h2>
123 Sesame Street
Someplace, QC
A1B 2C3
Email:<a href="mailto:[email protected]">[email protected]</a>
URL:<a href="http://janes-site.com">http://janes-site.com</a>

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 id="ind-hcard" class="vcard hc-individual">
<!--?php if($&;job_title !='') { ?--><!--?php }?-->
<!--?php if($&;org != '') { ?-->
<div class="org hc-individual-org"></div>
<!--?php } ?-->
<!--?php if($&;street_address !== '') { ?-->
<div class="adr hc-individual-postalAddress">
<div class="street-address hc-individual-street"></div>
<div class="tel hc-individual-phone">T:</div>
<div class="tel hc-individual-phone-2">T:<a href="&quot;tel:+1&lt;?php">&#8220;<!--?php echo $&;tel;?--></a></div>
<!--?php }?-->
<!--?php if($&;fax !== '') { ?-->
<div class="tel hc-individual-fax">F:<!--?php echo $&;fax;?--></div>
<div class="hc-individual-social"><!--?php if($&;googleplus !== '') { ?--><a class="hc-individual-gplus" 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" 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" title="LinkedIn" href="&lt;?php echo $&;linkedin;?&gt;" rel="me">Connect on LinkedIn</a>
<!--?php } ?-->
<!--?php if($&;facebook !== '') { ?--><a class="hc-individual-fb" title="Facebook" href="&lt;?php echo $&;facebook;?&gt;" rel="me">Follow Me on Facebook</a>
<!--?php }?--></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


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”.


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.

[/vc_column_text][mk_button dimension=”three” size=”medium” outline_skin=”dark” bg_color=”#a02440″ text_color=”light” icon=”moon-file-download-2″ url=”http://wordpress.org/extend/plugins/hcard-widget” target=”_blank” align=”left” margin_top=”0″ margin_bottom=”15″]Download the Plugin[/mk_button][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][/vc_column][/vc_row]

One thought on “hCard WordPress Widget

Leave a Reply

Your email address will not be published. Required fields are marked *