The word ‘Schema’ traces its origins to the Greek word skhēma meaning form or figure. In more technical terms, schema represents the outline or model of an entity, plan or concept. Most commonly coupled with XML, a schema helps lend structure to any type of data. However, with an upsurge in Search Engine Optimisation (SEO) in the recent times, schema finds its utility in Microdata.
Microdata is a type of metadata, which helps web crawlers to locate webpage information. The schema.org dictionary defines tags and attributes which aid in providing information to the search engine about your website’s underlying data, thereby optimising its SEO. By the end of the post, you will gain an understanding on the four main schema.org attributes, using them to customise webpages followed by schema definitions for some conventional webpage components.
How it works
Schema.org provides a set of attributes and elements to capture the microdata in a webpage by embedding them within its HTML markup. The common search engine crawlers (such as Google, Microsoft, Yandex and Yahoo!) utilise the information held within these attributes to optimise a site’s SEO. They are built into the search engines’ keyword directory and are retrieved when users query the websites. Similarly, developers use the attributes for important sections in a webpage such as homepage, company address, company video, products, etc.
The four most important attributes offered by the schema as a part of Microdata are itemscope, itemprop, itemref and itemtype. These are used with regular HTML elements.
- Itemscope – It is used to define the parent of a microdata element and is often used with parent HTML tags such as body, div, etc. It helps the search engine sort a particular item with its related data together (root node, in XML terms). It is mandatorily used with the itemtype attribute. It marks the start of microdata definition. In the example below, itemscope is used to group the properties, such as title, director and other related data, about the movie Avatar.
<div itemscope> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954) </span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div>
- Itemtype – It helps define the type of the itemscope. It specifies the vocabulary of the microdata format i.e. the type of item from the available types in schema.org. For example, the type of item below corresponds to the Movie format as denoted in the itemtype attribute.
<div itemscope itemtype="http://schema.org/Movie"> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div>
Other item types offered by Schema.org are (please find the full list at the Full Hierarchy page):
- Creative works: CreativeWork, Book, Movie, MusicRecording
- Embedded non-text objects: AudioObject, ImageObject, VideoObject
- Place, LocalBusiness, Restaurant
- Itemprop – It specifies the additional properties of an itemscope item. It reveals more specific information about the item such that the search engines can easily find it for example, name, url, image, genre, director, trailer, description, startDate, author, etc.
<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div>
- Itemid – It marks an item with a unique id. A good scenario where itemid can come in handy is in product listings. We can use the ID to access a specific product from a list. For example, if a user searches for a specific book on an eCommerce website, then – a good itemid can be it’s ISBN number – the search engine will retrieve the item by accessing its itemid.
<div itemscope itemtype="http://schema.org/Book" itemid="#record"> <link itemprop="additionalType" href="http://schema.org/Product"/> <h3 itemprop="name">Le concerto</h3> <table summary="Bibliographic Details"> <tr> <th>Main Author: </th> <td itemprop="author">Ferchault, Guy</td> </tr> </table> </div> <table summary="Holdings details from Anytown City Library"> <tr itemscope itemtype="http://schema.org/Offer"> <th>Copy </th> <td>Available <link itemprop="availability" href="http://schema.org/InStock"> <div>Barcode: <span itemprop="serialNumber">CONC91000937</span></div> <div>Call number: <span itemprop="sku">780 R2</span></div> <div>Library: <span itemprop="offeredBy" itemtype="http://schema.org/Library" itemid="http://library.anytown.gov.uk" >Anytown City Library</span></div> <link itemprop="businessFunction" href="http://purl.org/goodrelations/v1#LeaseOut"> <link itemprop="itemOffered" href="#record"> </td> </tr> <table>
Using customised tags on Webpages
Schema tags are customised for webpages depending on what information they carry through to the web crawlers. This customisation is possible using embedded items. These allow for nested properties using multiple itemtype tags within children HTML elements. Hence, the itemtype URL section is one of the most important parts in schema microdata.
For demonstration purposes, I have collated the sections of an About Us page in a company website and decorated the elements with schema.org tags to procure microdata. The distinct sections in the page to look out for are:
- Main Content
Schema ExamplesSome more common examples of sections, which commonly make use of schema tags for microdata are:
- Company Address
The common template used to define microdata for your company address is illustrated below. Use the type PostalAdress with your parent’s itemtype to define the type of item. Use itemprop to define the fields below:
- addressCountry: For specifying the office’s location by country.
- streetAddress: For specifying the office’s street.
- addressLocality: For specifying the off ice’s locality.
- addressRegion: For specifying the office’s region.
- postalCode: For specifying the office’s local post code.
- telephone: For specifying the office’s telephone number.
<address class="addressPop"> <h3>Headquarters</h3> <div class="addBlock" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <strong itemprop="addressCountry">United States</strong> <div class="addInfo"> <span itemprop="streetAddress">203 Crescent St., Suite 105 </span><br /> <span itemprop="addressLocality">Waltham</span>, <span itemprop="addressRegion">MA</span> <span itemprop="postalCode">02453</span><br/> <span itemprop="telephone">+1.781.996.4332</span> </div><!--addInfo--> </div><!--addBlock--> </address><!--addressPop-->
Add the type Organization with the parent to define the microdata for your company logo. It helps the crawler locate the company logo among the major SEO clients such as Google & Yahoo!
<div itemscope itemtype="http://schema.org/Organization"> <a itemprop="url" href="www.company.com"> <img itemprop="logo" src="www.company.com/cloudlock-logo.png" /> </a> </div>
A VideoObject item helps record microdata related to flash videos on your website. Add the following temple to any video object with the corresponding itemprop given in the screenshot below.
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> <h2>Video: <span itemprop="name">Title</span></h2> <meta itemprop="duration" content="T1M33S" /> <meta itemprop="thumbnailUrl" content="thumbnail.jpg" /> <meta itemprop="contentURL" content="http://www.example.com/video123.flv" /> <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" /> <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" /> <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" /> <meta itemprop="height" content="400" /> <meta itemprop="width" content="400" /> <object ...> <param ...> <embed type="application/x-shockwave-flash" ...> </object> <span itemprop="description">Video description</span> </div>