Structure rich content with microformats

By Dane Troup
User Interface Designer, former Fynyddian

The Internet is more than just standalone pages. There is a constant ebb and flow of data being shared and indexed through search engines and social media. Strategic formatting of content allows for a rich representaion of your content in search results and posts on social media including Facebook, Google+ and Twitter.

Microformats

Microformats is an independant standard that has been adhered to by all major search engines and social media companies to create a semantic web that has relavent meaning to site visitors.

Twitter Cards

With Twitter Cards, you can attach a rich media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML markup to your web page, and users who Tweet links to your content will have a "Card" added to the Tweet that’s visible to all of their followers.

Below is an example of a Vine in a Tweet, embedded in this post. Pretty powerful stuff!

Google Structured Data

Google Structured Data understands the content on your pages, they can create rich snippets—detailed information intended to help users with specific queries. For example, the snippet for a restaurant might show the average review and price range; the snippet for a recipe page might show the total preparation time, a photo, and the recipe’s review or rating; and the snippet for a music album could list songs along with a link to play each song. These rich snippets help users recognize when your site is relevant to their search, and may result in more clicks to your pages.

Open Graph

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Learn more about microformats

While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol, which has informed many of the technical design decisions.

Article last updated on 4/21/2018

Where to next?