Portfolio MicroData

Look at writing the code necessary for describing portfolio piece using MicroData and Schema.org.

Goal

We’re going to explore how to write MicroData for a CreativeWork on a fake website so we can look at the important concepts and how to implement them.

All these techniques will later be applied to your portfolio website.

Fork & clone

Start the lesson by forking and cloning the portfolio-microdata repository.

Fork & clone the “portfolio-microdata” repo.

The repository will have some starter files to get you on your way.

  1. Fork & clone

    This includes some starter code that you can get by forking and cloning the repository.

1 Set up the project

We’re going to write the HTML necessary for marking up a WebSite portfolio piece using Schema.org.

  1. portfolio-microdata
  2. content.txt For copying-and-pasting
  3. index.html
  1. Make a new index.html file
  2. Populate the index.html with the boilerplate code
  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

  2. Naming conventions

    Don’t forget to follow the naming conventions.

  3. HTML snippets

    Create the boilerplate with html5, viewport

2 Add the basic HTML

Before we start adding the microdata, let’s add the basic HTML markup for a portfolio piece. Copy the text from content.txt to save some time.

For this we’re concentrating on a WebSite—if it was a visual artwork or a photograph there would be other specific properties.

You may also want to check out the generic CreativeWork that can be applied to non-specific portfolio pieces.

⋮
<body>

  <figure>
    <img src="https://placehold.it/1600x900" alt="">
    <figcaption>
      <h2>Dinos ’R’ Us</h2>
      <p>A shop-at-home website dedicated to the many amazing dinosaur products.</p>
      <p>The goal of the project was create a pattern library for a large-scale website and show pattern examples on a few sample pages.</p>
      <p><em>Won the RGD Student Award 2015</em></p>
      <a href="#">View website</a>
      <aside>Web, Responsive, CSS, Mobile, Dinosaurs</aside>
    </figcaption>
  </figure>

</body>
</html>

This is an example of a really basic portfolio piece you might see on your website.

It intentionally doesn’t include case-study related information to simplify the code in this lesson.

3 Add the MicroData

We’re now going to add MicroData to the website to help search engines understand the content and display better results.

We’re specifically going to use the MicroData format but there are other formats like RDFa and JSON-LD. I enjoy JSON-LD but the syntax is very different from what you’re used to. See the JSON-LD tutorial.

On the HTML tags that represent specific information we’re going to add a new property: itemprop="…".

All of the properties we’re adding are documented under the WebSite type on Schema.org.

⋮
<body>

  <figure itemscope itemtype="https://schema.org/WebSite">
    <img itemprop="image" src="https://placehold.it/1600x900" alt="">
    <figcaption>
      <h2 itemprop="name">Dinos ’R’ Us</h2>
      <p itemprop="description">A shop-at-home website dedicated to the many amazing dinosaur products.</p>
      <p>The goal of the project was create a pattern library for a large-scale website and show pattern examples on a few sample pages.</p>
      <p itemprop="award"><em>Won the RGD Student Award 2015</em></p>
      <a itemprop="url" href="#">View website</a>
      <aside itemprop="keywords">Web, Responsive, CSS, Mobile, Dinosaurs</aside>
    </figcaption>
  </figure>

</body>
</html>

In most cases the HTML tag is irrelevant, the name could be an <h1> or <h2> or <strong> or <span> microdata doesn’t necessarily care.

But some tags are important:

  • itemprop="image" should always be on an <img> tag.
  • itemprop="url" should always be on an <a> tag.
  • Any of the time related properties should always be on <time> tags.
  1. Line D

    On the element that surrounds all the content we’re adding two properties:

    • itemscope — defines that this element surrounds all the information
    • itemtype — defines what kind of object this is — in this case a WebSite
  2. Line E

    Define the <img> tag as the image property.

  3. Line G

    Define the <h2> tag as the name of this website.

  4. Line H

    Define the first <p> tag as the description for this website.

  5. Line J

    Define this <p> tag as containing information about what awards this work won.

  6. Line K

    This <a> tag represents the url of where to view this website.

  7. Line L

    Define the <aside> as being keywords related to this website.

4 Denote the author

The major thing missing from the above metadata is the author of this creative work—the person who designed it.

We could definitely include the itemprop="author" above in the code—but you know that I don’t like to repeat code if I don’t have to.

Most likely we’ll have all the necessary author information in the <footer> of the website and we can use link it back up to the portfolio piece.

⋮
<body>

  <figure itemref="data-author" itemscope itemtype="https://schema.org/WebSite">
    <img itemprop="image" src="https://placehold.it/1600x900" alt="">
    <figcaption>
      <h2 itemprop="name">Dinos ’R’ Us</h2>
      <p itemprop="description">A shop-at-home website dedicated to the many amazing dinosaur products.</p>
      <p>The goal of the project was create a pattern library for a large-scale website and show pattern examples on a few sample pages.</p>
      <p itemprop="award"><em>Won the RGD Student Award 2015</em></p>
      <a itemprop="url" href="#">View website</a>
      <aside itemprop="keywords">Web, Responsive, CSS, Mobile, Dinosaurs</aside>
    </figcaption>
  </figure>

  <footer id="data-author" itemprop="author" itemscope itemtype="https://schema.org/Person">
    <p>© <span itemprop="name">Thomas J Bradley</span></p>
    <a itemprop="email" href="mailto:hey@thomasjbradley.ca">hey@thomasjbradley.ca</a>
    <p itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
      <span itemprop="addressLocality">Ottawa</span>,
      <span itemprop="addressRegion">Ontario</span>,
      <span itemprop="addressCountry">Canada</span>
    </p>
  </footer>

</body>
</html>

So we can put the author information somewhere else on the page and link each portfolio piece to the author without having to duplicate the code.

  1. Line D

    Add a new property to the portfolio piece named itemref. In itemref we write the IDs of other elements on the page that add properties to this itemscope

  2. Line P

    Lots of properties on the <footer> tag:

    • id — to associate with the itemref attribute above.
    • itemprop — to define this as being an author for something else on the page.
    • itemscope — group all this information together.
    • itemtype — define this as a Person
  3. Line Q

    Define my name as the name of this person.

  4. Line R

    Define the email address for this person with itemprop="email"

  5. Lines S–V

    Define this <p> tag as being a PostalAddress, with a bunch of sub-properties:

    • addressLocality — the city or village or hamlet, etc.
    • addressRegion — province, territory, state, canton, etc.
    • addressCountry — the country of the address.

5 Validate

Before getting this checked by the teacher it’s a good idea to validate it. Google’s Rich Snippets Testing Tool allows you to paste the metadata enhanced HTML and it will extract the information out of it. If the tool finds any errors they’ll be displayed on the side.

Google Rich Snippets Testing Tool.

Copy and paste your HTML into the “Code Snippet” box and make sure there are no red errors.

It should look like this if everything is okay: