Introduction
Eevee is a theme for Pelican, based on Google’s Material Design specification that I released in June 2016.
Schema.org is a collaborative effort, including private companies like Google and the open source community to promoter adding additional structure to data that indentifies what parts of HTML are being used for, for example it can help a search engine understand what content is more important to index or, it can help a user with a screen reader get to the important content more easily. These structures are more commonly known as microformats or microdata.
Structure is a beautiful thing
HTML — by it’s very design is structured — the difference is that the content defines or modifies that structure.
By using microformat data structures from schema.org you can define what elements are more prominent or important through a large set of additional vocabulary, improving the experience for everyone that uses your website.
<article itemscope itemtype="https://schema.org/BlogPosting">
<meta itemprop="accessibilityControl" content="fullKeyboardControl" />
<meta itemprop="accessibilityControl" content="fullMouseControl" />
<meta itemprop="accessibilityControl" content="bookmarks" />
<meta itemprop="accessibilityAPI" content="ARIA" />
<div itemprop="author" itemscope
itemtype="https://schema.org/Person" role="presentation">
<meta itemprop="name" content="Kura" />
<meta itemprop="name"
content="https://kura.gg/authors/kura/" />
</div>
<meta itemprop="keywords" content="eevee,html,pelican" />
<div class="eevee-article eevee-article-padding">
<div class="eevee-meta mdl-color-text--grey-500">
<time datetime="2016-06-25T21:00:00+01:00"
itemprop="datePublished">
25 Jun 2016
</time>
</div>
<h2 itemprop="name">
<a href="https://kura.gg/eevee" rel="bookmark"
title="Permalink to 'Eevee -- A Material Design theme for Pelican'"
itemprop="url">
Eevee -- A Material Design theme for Pelican
</a>
</h2>
<section itemprop="articleBody">
Some random content here
</section>
</div>
<div class="eevee-comment" id="article-comments">
<section itemscope itemtype='https://schema.org/UserComments'>
<h2>Discuss</h2>
Disqus/Muut stuff here.
</section>
</div>
</article>
Above is an example of a blog post with the additional vocabulary, below I’ll outline each important section and explain what it does.
<article itemscope itemtype="https://schema.org/BlogPosting">
This simply tells the client which schema is being used for the content within it. The client uses that data to determine what elements should be provided based on that schema. Here I’m using the BlogPosting schema.
<meta itemprop="accessibilityControl" content="fullKeyboardControl" />
<meta itemprop="accessibilityControl" content="fullMouseControl" />
<meta itemprop="accessibilityControl" content="bookmarks" />
<meta itemprop="accessibilityAPI" content="ARIA" />
These elements — as you may have guess from their names — are used to improve accessibility. More information on available options is provided on the W3C wiki.
<div itemprop="author" itemscope
itemtype="https://schema.org/Person" role="presentation">
<meta itemprop="name" content="Kura" />
<meta itemprop="name"
content="https://kura.gg/authors/kura/" />
</div>
This set of markup simply defines who the author is and where more of their content is located. Note that it uses a different schema named Person.
Because the div element has no style and consists of only meta data, a role is defined that tells screen readers this data is only for presentation purposes and can be ignored.
<meta itemprop="keywords" content="eevee,html,pelican" />
This a pretty simple element, it is generated from the blog articles category and any tags it may have.
<time datetime="2016-06-25T21:00:00+01:00"
itemprop="datePublished">
25 Jun 2016
</time>
This element is a date provided as a universally understood value and in a more user-friendly format that is displayed to the user.
<h2 itemprop="name">
<a href="https://kura.gg/eevee" rel="bookmark"
title="Permalink to 'Eevee -- A Material Design theme for Pelican'"
itemprop="url">
Eevee -- A Material Design theme for Pelican
</a>
</h2>
Here the name of the article is defined, as is the URL to that article.
<section itemprop="articleBody">
Some random content here
</section>
This section informs the client that this is the main content of the post.
<section itemscope itemtype='https://schema.org/UserComments'>
<h2>Discuss</h2>
Disqus/Muut stuff here.
</section>
Finally we add another schema UserComments that defines user comment content.
