Structured Data
The Web Theme uses RDFa Lite attributes to create structured data for use with search engines and web services. Google provides a structured data testing tool to explore how the markup of a given page will be parsed.
Vocab
The <body> tag uses the vocab attribute to indicate how we’re structuring our data.
<body vocab="https://schema.org/">
To exclude nested content from being parsed, the vocab attribute can be set to "". For instance, the social media nav in the footer uses vocab="" to prevent its nested urls from being incorrectly associated.
<nav class="social" vocab="">...</nav>
Then, on individual items on the page, the typeof attribute can be used to specify the type (or set of properties) used for that item.
<!-- Site Organization/Unit -->
<div class="footer-org" typeof="Organization" resource="#siteorg">
<!-- Individual Event -->
<article class="..." typeof="Event">
<!-- Individual News Item -->
<article class="..." typeof="NewsArticle">
Property Values
Structured data is defined using the property and content attributes.
<!-- To specify a value for a given property, the `content` attribute may be used --->
<span class="footer-phone" property="telephone" content="+1 574-555-1234">Phone 574-555-1234</span>
<!-- If cases where the text content of the tag is identical to the value of the `property`, using the `property` attribute by itself is sufficient. -->
<span property="addressLocality">Notre Dame</span>,
<span property="addressRegion">IN</span>
<span property="postalCode">46556</span>
Footer
The key resources marked up using microdata are the .footer-org and .footer-parent elements. These are on every page and can be referenced by elements on the page as necessary. By referencing these resources, other items on the page can include relevant organizational information without duplicating the content in the markup.
Site Information
Site-specific information in the footer uses the Organization type. Here are examples of related properties used.
<!-- Define site org. The `#siteorg` resource is referenced by other items throughout the site.-->
<div class="footer-org" typeof="Organization" resource="#siteorg">
<!-- Define relationship with parent org -->
<meta property="parentOrganization" resource="#parentorg" content="University of Notre Dame">
<!-- Site name and url -->
<p><a href="/" class="site-link" property="url"><span property="name">Site Name</span></a></p>
<!-- Address (uses PostalAddress type)-->
<span class="address" property="address" typeof="PostalAddress">
<span property="streetAddress">1234 Grace Hall</span><br>
<span property="addressLocality">Notre Dame</span>,
<span property="addressRegion">IN</span>
<span property="postalCode">46556</span>
<span property="addressCountry">USA</span>
</span>
<!-- Contact information -->
<span class="footer-phone" property="telephone" content="+1 574-555-1234">Phone 574-555-1234</span>
<span class="footer-fax" property="faxNumber" content="+1 574-555-1235">Fax 574-555-1235</span>
<span class="footer-email" property="email"><a rel="noopener" href="mailto:webhelp@nd.edu">webhelp@nd.edu</a></span>
<!-- Social media uses `vocab=""` to prevent nested urls from being incorrectly associated with other meta data. Since both site specific and ND social lists may be present, prepend the site name where applicable. -->
<nav class="social" aria-label="Site Name social media navigation" vocab="">
<!-- Site webclip -->
<div property="logo" typeof="ImageObject"><meta property="url" content="https://static.nd.edu/images/webclips/default/webclip-60.png"></div>
University Information
University-specific information in the footer uses the CollegeOrUniversity type. Here are examples of related properties used.
<!-- Define parent org -->
<div class="footer-parent" property="parentOrganization" typeof="CollegeOrUniversity" resource="#parentorg">
<!-- Name -->
<meta property="name" content="University of Notre Dame">
<!-- University mark and url -->
<a href="https://www.nd.edu/" class="mark-footer" property="url logo" typeof="ImageObject" aria-label="University of Notre Dame"><img src="https://static.nd.edu/images/marks/gray/ndmark600.png" width="300" height="70" alt="University of Notre Dame" property="url"></a>
News & Events
All news and events items have associated microdata. They are also structured to reference the resources in the footer. Refer to the starter kits or example pages to see how these properties are integrated with the rest of markup on the page.
Events
Individual events use the Event type. Here are examples of related properties used in each one.
<!-- Event... -->
<article class="..." typeof="Event">
<!-- Event name... -->
<h2 class="..." property="name"><a href="#">Event Name</a></h2>
<!-- Start/end times -->
<time property="startDate" datetime="2019-11-02T19:30-05:00">...</time>
<time property="endDate" datetime="2019-11-02T23:30-05:00">...</time>
<!-- Location -->
<p class="..." property="location" typeof="Place"><span property="name address">Location Name</span></p>
<!-- Associated image -->
<link property="image" href="image.png">
<!-- Organizer (references site information) -->
<link property="organizer" resource="#siteorg">
<!-- Description -->
<meta property="description" content="Description of event">
News
News items use the NewsArticle type. Here are examples of related properties used in each one.
<!-- News Article -->
<article class="..." typeof="NewsArticle">
<!-- Image -->
<img property="image" src="image.png" alt="">
<!-- Headline -->
<h2 class="..." property="headline"><a href="#">Headline</a></h2>
<!-- Publisher (references site information) -->
<link property="publisher" resource="#siteorg">
<!-- Description-->
<link property="description" content="Description of item" href="#">
<!-- Author Information-->
<div property="author" typeof="Person"><meta property="name" content="Author Name"></div>
<!-- Publish Date-->
<time property="datePublished" datetime="2019-11-02T19:30-05:00">November 02, 2019</time>