Webpage Schemas

We want to add microdata to our webpages so search engines understand what type of page we have. Schema.org is a community that helps us understand how to optimally structure our webpages. Start by reading: https://schema.org/docs/gs.html

  1. Identify a scope. In the example below, we are creating a webpage for a movie.
<div itemscope itemtype="http://schema.org/Movie">

2. You can add use the “itemprop” tag to add specifics to the movie. Set the value of this attribute to an appropriate property from the schema.org: https://www.schema.org/Thing. Per schema.org, “name,” “director,” “genre,” and “trailer” are keywords that tell Google your webpage is describing a movie. Note, you should find the appropriate type of webpage here: https://www.schema.org/docs/full.html.

<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>

3. Testing: Use the google’s rich snippets testing tool: https://search.google.com/test/rich-results

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store