{"id":4776,"date":"2016-07-25T03:01:32","date_gmt":"2016-07-25T03:01:32","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=4776"},"modified":"2016-07-25T03:01:32","modified_gmt":"2016-07-25T03:01:32","slug":"use-microformats-html-wordpress","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/use-microformats-html-wordpress\/","title":{"rendered":"How to use Microformats in HTML or WordPress"},"content":{"rendered":"<p>You may have noticed specialized renderings of specific data in Google search results, like so:<br \/>\n<img alt='' class='alignnone size-full wp-image-4783' src='http:\/\/172.104.26.128\/wp-content\/uploads\/2016\/07\/img_57957dfc76d75.png' \/><br \/>\n<img alt='' class='alignnone size-full wp-image-4784' src='http:\/\/172.104.26.128\/wp-content\/uploads\/2016\/07\/img_57957e29d26fb.png' \/><br \/>\n<img alt='' class='alignnone size-full wp-image-4785' src='http:\/\/172.104.26.128\/wp-content\/uploads\/2016\/07\/img_57957e6720aef.png' \/><\/p>\n<p>You might think these are proprietary arrangements between Google and other sites &#8211; I imagine many may be, but the technology that powers them is easily available, called &#8220;microformats&#8221;. Microformats are essentially a loose schema describing a type of data in your site. There are a few hundred different data types &#8211; common ones being events, reviews, download links, and metadata about different types of businesses.<\/p>\n<p>These are beneficial if you want someone to make use of whatever you&#8217;re providing (making easier for them to find downloads for your software, for instance). There seems to be a schema that provides a data table from your site, and they do seem to put links to the source material with the summary table in the search results, so this may be a valid form of SEO tinkering as well.<\/p>\n<p>Regardless, it&#8217;s a neat feature, and pretty easy to use. If you just want yellow stars to show up in search results, there is a nice WordPress plugin<sup><a href=\"#footnote_0_4776\" id=\"identifier_0_4776\" class=\"footnote-link footnote-identifier-link\" title=\"https:\/\/wordpress.org\/plugins\/all-in-one-schemaorg-rich-snippets\/\">1<\/a><\/sup> that supports some of the most common types (I have no affiliation with the author).<\/p>\n<p>If you want to do something fancier, the best option is to go to schema.org, and look at the examples.<\/p>\n<p>For instance, you want to link an MP3, they give you an example like so:<\/p>\n<pre lang=\"xml\">\n<div itemscope itemtype=\"http:\/\/schema.org\/AudioObject\">\n  <span itemprop=\"name\"><b>12oclock_girona.mp3<\/b><\/span>\n  <meta itemprop=\"encodingFormat\" content=\"mp3\" \/>\n  <meta itemprop=\"contentUrl\" content=\"http:\/\/media.freesound.org\/data\/0\/previews\/719__elmomo__12oclock_girona_preview.mp3\" \/>\n  <span class=\"description\">\n    <meta itemprop=\"duration\" content=\"T0M15S\" \/>\n    <span itemprop=\"description\">Recorded on a terrace of Girona a sunday morning<\/span>\n  <\/span>\n<\/div>\n<\/pre>\n<p>To find this, go to http:\/\/schema.org\/AudioObject:<br \/>\n<img alt='' class='alignnone size-full wp-image-4786' src='http:\/\/172.104.26.128\/wp-content\/uploads\/2016\/07\/img_579580889649b.png' \/><\/p>\n<p>The schema objects have a ton of attributes, which is pretty overwhelming. If you scroll to the bottom, you can get an HTML example like the above, for whatever type you like:<br \/>\n<img alt='' class='alignnone size-full wp-image-4787' src='http:\/\/172.104.26.128\/wp-content\/uploads\/2016\/07\/img_579580d34673f.png' \/><br \/>\nOnce you have this, it&#8217;s pretty easy to drop into React or whatever you&#8217;re using, and customize it to have the right data.<\/p>\n<ol class=\"footnotes\"><li id=\"footnote_0_4776\" class=\"footnote\">https:\/\/wordpress.org\/plugins\/all-in-one-schemaorg-rich-snippets\/<span class=\"footnote-back-link-wrapper\"> [<a href=\"#identifier_0_4776\" class=\"footnote-link footnote-back-link\">&#8617;<\/a>]<\/span><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>Using &#8220;microformats&#8221; to get custom integrations with search engines<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12],"tags":[498,503],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/4776"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=4776"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/4776\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=4776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=4776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=4776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}