This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
In this codelab, you will learn about the schema.org
CreativeWork class and its properties by enhancing a
catalogue page that describes a schema.org Book (a specialization
of CreativeWork). You will use the schema.org vocabulary and express it via
RDFa attributes.
Audience: Intermediate
Prerequisites: To complete this codelab, you should already be familiar with HTML, RDFa, and schema.org. The previous exercise offers a practical introduction to those concepts.
In this exercise, you will perform the steps required to add simple RDFa structured data to an existing library catalogue page for a book.
Open book_step0.html
in an HTML-friendly text editor such as vim, emacs, nano, Sublime, Atom... anything but Notepad! You should see something like the following
HTML source for the web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<title>Deep work : rules for focused success in a distracted world
: Newport, Cal, author.
: Book, Regular Print Book
: Toronto Public Library</title>
<meta name="description" content=""One of the most valuable skills in our
economy is becoming increasingly rare. If you master this skill, you'll ...">
<meta property="og:title" content="Deep work : rules for focused success in a distracted world">
<meta property="og:type" content="book">
<meta property="og:image" content="http://syndetics.com/index.aspx?isbn=9781455586691/MC.gif">
...
<meta property="og:url" content="http://tpl.ca/detail.jsp?Entt=RDM3339716&R=3339716">
<meta property="og:site_name" content="Toronto Public Library">
</head>
<body>
...
<div>
<img alt="" src="http://syndetics.com/index.aspx?isbn=9781455586691/MC.gif">
</div>
<h1>
<span>
Deep work : rules for focused success in a distracted world
</span>
</h1>
<em>
<span>
<span>First Edition.</span>
</span>
</em>
<div>
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719">Newport, Cal, author.</a>
</div>
</div>
...
</body>
</html>
Note: In a pinch, you can use the browser development tools to
view and edit the source of the web page (CTRL-Shift-i in
Chrome or Firefox, in the Elements or Inspector tab
respectively).
There are a number of structured data parsers, both online and locally installable, that can help you check the results of your work. Copy and paste the HTML source into each of the following online structured data extraction tools:
Notice that the results vary between the parsers. Some of them reveal that there is, indeed, some markup already embedded in the page--but that markup is sparse:
@prefix og: <http://ogp.me/ns#> .
<http://rdfa.info/play/>
og:title "Deep work : rules for focused success in a distracted world"@en;
og:type "book"@en;
og:image "http://syndetics.com/index.aspx?isbn=9781455586691/MC.gif"@en;
og:description """One of the most valuable skills in our
economy is becoming increasingly rare. If you master this skill, you'll
..."""@en;
og:url "http://tpl.ca/detail.jsp?Entt=RDM3339716&R=3339716"@en;
og:site_name "Toronto Public Library"@en .
This is another example of Open Graph Protocol
markup, a vocabulary and syntax based on RDFa 1.0 developed by
Facebook and promoted as a means of embedding simple machine-readable
markup in the head section of web pages. While this is a good
start—enough to identify the title of the page and an image that can be
used in short snippets—you can surface much richer data by using RDFa 1.1
and marking up the body of the web page with the schema.org vocabulary.
The schema.org types are arranged in a top-down hierarchy. Starting at
the top level of the type
hierarchy, browse through the CreativeWork type hierarchy to find
the type that is most applicable for this page--in this case, Book. Notice again
how each type inherits the properties from its parent (beginning with
Thing), offers its own more specific definition for its
raison d'etre, and may add its own properties to enable you to
describe it more completely.
Communities can propose extensions to schema.org, and these show up at the bottom of the type hierarchy as other potential types that you could use--for example, Atlas, ComicStory, or Thesis from the W3C Schema Bibliographic Extension community.
Galleries and museums might find types such as Movie, Painting, Photograph, Sculpture, or VisualArtwork more relevant to their interests.
There is a working group for Archives that have proposed an extension for Archives, but the group needs evidence of more participation and expertise before the proposal will be accepted by the schema.org steering committee.
To declare an RDFa type for an HTML document, add the
@typeof attribute to the <body> element
and set the value of the attribute to Book. Remember that
when you add a @typeof attribute, add a
@resource attribute at the same time to avoid creating a
blank node.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<title>Deep work : rules for focused success in a distracted world
: Newport, Cal, author.
: Book, Regular Print Book
: Toronto Public Library</title>
...
</head>
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
</body>
</html>
Every schema.org type has a name property available to it, because the
property is declared on the Thing type from which every other type
inherits. In the case of a Book, the title of the book
is mapped to its name. Go ahead and add a @property="name"
attribute to the <h1> element to assert that
the content of that element is the name of the technical book.
Warning: A common mistake is to use the headline
property (from the CreativeWork type) for title rather than
name. Just use name, as it is common to all
things in the schema.org vocabulary and clearly identifies the name of
the work!
<!DOCTYPE html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
...
</body>
</html>
This book has an author, and if you check the documentation for Book you will find that
there is indeed an author property. Notice that the expected
type of the author property is either a Person
or Organization type. Identify the author using the
@property="author" attribute.
Note: You might be tempted to add the attribute to the
existing <a> element of the HTML document, but
the scope of the <a> element includes more than
just the name of the author, so you would be asserting (falsely!) that
the author was "Newport, Cal, author.". So you will have to add another
<span> element to wrap just the "Newport, Cal"
part of the string.
<!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719"><span
property="author">Newport, Cal</span>,
author.</a>
</div>
...
</body>
</html>
Double-check the results of your work in the structured data parsers.
Is the author property associated with the correct
subject (URL)? Remember that an <a> element
sets a new subject matching the value of its
@href attribute.
If you were caught, and the author property is associated
with the subject http://tpl.ca/search.jsp?N=4294509719
rather than the #book URL, let's fix that by using the
@about attribute to explicitly refer to your chosen
subject (URL).
<!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719"><span
property="author" about="#book">Newport, Cal</span>,
author.</a>
</div>
...
</body>
</html>
Right now a date of publication is visible on the page, but as the
data just lives inside an undifferentiated string of text, it would
difficult for a machine to know what the data means. To remove
this uncertainty, add the @property="datePublished"
attribute.
<!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719"><span
property="author" about="#book">Newport, Cal</span>,
author.</a>
</div>
<span>Year/Format: </span>
<span property="datePublished">2016, </span>
...
</body>
</html>
The value of the datePublished property from your previous
example shows up as "2016, ", which isn't as precise a date
as you might like.
If you check the datePublished
documentation, you will find that the expected value of the property is
Date, which in turn is defined as a
date value in ISO 8601
format. For a date, then, the expectation is a value formatted like
YYYY or YYYY-MM-DD.
One approach to specifying a date value that satisfies the formatting
requirements would be to add yet another <span>
element around just the date. However, while that would work for this
specific case, if you had a date presented for human consumption like
"May 15, 2016" that approach would not work unless you
changed the human-visible content to the machine-readable
"2016-05-15", in which case some humans might be unhappy.
Instead, you can make both the machines and the humans happy by supplying
an inline, properly formatted value using the @content
attribute. Go ahead and add
@content="2016" to the <span> element.
<!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719"><span
property="author" about="#book">Newport, Cal</span>,
author.</a>
</div>
<span>Year/Format: </span>
<span property="datePublished" content="2016">2016, </span>
...
</body>
</html>
As the datePublished property you have established is just a
year, you can use the same @property attribute to also specify
the copyrightYear
property. RDFa allows you to specify a list of properties or types that apply
to a given value by separating each entry with a space.
Add copyrightYear to the @property="datePublished"
attribute.
<!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719"><span
property="author" about="#book">Newport, Cal</span>,
author.</a>
</div>
<span>Year/Format: </span>
<span property="datePublished copyrightYear" content="2016">2016, </span>
...
</body>
</html>
Even though the description of a given resource is on a web page written in
one language (often designated by the @lang attribute on the
<html> element), the work itself may be written in a
different language. The inLanguage property enables you
to specify the language of the work, using the language codes from the IETF BCP 47 standard: for
example, "en", "en-CA", "fr-CA", or
"oj".
Apply the inLanguage property to the page, using the
@content attribute to specify a valid language code.
<!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719"><span
property="author" about="#book">Newport, Cal</span>,
author.</a>
</div>
<span>Year/Format: </span>
<span property="datePublished copyrightYear" content="2016">2016, </span>
...
<tr>
<th scope="row">Language:</th>
<td property="inLanguage" content="en">English</td>
</tr>
...
</body>
</html>
Every type in schema.org can have an image property. One
potential use case for search engines is to use the image
property to guide the search engine to choose the appropriate image
from a page that might contain multiple images to provide a more
visually attractive search result. Your catalogue page contains an image.
Add the @property="image" attribute to the
<img> element.
<!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
<div>
<img alt="" property="image"
src="http://syndetics.com/index.aspx?isbn=9781455586691/MC.gif">
</div>
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719"><span
property="author" about="#book">Newport, Cal</span>,
author.</a>
</div>
<span>Year/Format: </span>
<span property="datePublished copyrightYear" content="2016">2016, </span>
...
<tr>
<th scope="row">Language:</th>
<td property="inLanguage" content="en">English</td>
</tr>
...
</body>
</html>
When you look at the documentation for the schema.org Book type, one of the properties that is
specific to the Book type is the bookEdition
property--and your sample book says that it is a first edition, which just might
be of interest to researchers. Add the @property="bookEdition"
attribute to the corresponding span element.
Repeat for the isbn and numberOfPages properties.
Note:
schema.org processors in particular understand that this level of granularity
is not always possible in practice, and will do the best they can with the data
they receive. So if the best you can do is mark the value of an ISBN in your
web page as 9781455586691 (hardback) instead of just the
actual ISBN itself, processors may still be able to work out the actual value.
<!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
<div>
<img alt="" property="image"
src="http://syndetics.com/index.aspx?isbn=9781455586691/MC.gif">
</div>
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
<em>
<span>
<span property="bookEdition">First Edition.</span>
</span>
</em>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719"><span
property="author" about="#book">Newport, Cal</span>,
author.</a>
</div>
<span>Year/Format: </span>
<span property="datePublished copyrightYear" content="2016">2016, </span>
<span>Book</span>
<span property="numberOfPages" content="304">, 304 pages</span>
...
<tr>
<th scope="row">ISBN:</th>
<td property="isbn" content="9781455586691">9781455586691 (hardback)</td>
</tr>
...
<tr>
<th scope="row">Language:</th>
<td property="inLanguage" content="en">English</td>
</tr>
...
</body>
</html>
You might have noticed that some of the RDFa parsers generate a rich
snippet that shows you what your page might look
like as a search result. You may also have noticed that the rich snippet
did not contain much content of your page other than its title. To help
search engines generate a better rich snippet, you should include a
@property="description" attribute in your web page.
This record has a great description, so add the
@property="description" attribute accordingly.
<!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
...
<div>
<img alt="" property="image"
src="http://syndetics.com/index.aspx?isbn=9781455586691/MC.gif">
</div>
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
<em>
<span>
<span property="bookEdition">First Edition.</span>
</span>
</em>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719"><span
property="author" about="#book">Newport, Cal</span>,
author.</a>
</div>
<span>Year/Format: </span>
<span property="datePublished copyrightYear" content="2016">2016, </span>
<span>Book</span>
<span property="numberOfPages" content="304">, 304 pages</span>
...
<div>
<div property="description"><span>Summary/Review:</span> "One of the
most valuable skills in our economy is becoming increasingly rare. If you
master this skill, you'll achieve extraordinary results. Deep work is the
ability to focus without distraction on a cognitively demanding task. It's
...
</div>
</div>
...
<tr>
<th scope="row">ISBN:</th>
<td property="isbn" content="9781455586691">9781455586691 (hardback)</td>
</tr>
...
<tr>
<th scope="row">Language:</th>
<td property="inLanguage" content="en">English</td>
</tr>
...
</body>
</html>No book, painting, author, or creator exists in a vacuum, yet the web sites we publish often create an impression that our organization is the only one providing information about it—and the information we provide is often minimal. You can expand on that by linking to other URLs that provide more linked data about your subjects.
For example, the information about the author of the book you are
describing is currently limited to his name. The link you provide
just leads to a search for more works by the same author. But there are
web sites and linked data resources that provide much more information
about him. In this step, assume that your system can include a list of
additional links for authors and the works that are being described,
but that you are also working with a strict designer who forbids you
from altering the look or content of the page. In this situation, a
good option is to use a <link> element to define the
property value for the machines while not adding any futher human-visible
content to the page.
To link to three external URLs that identify this book, and which can
offer more linked data directly about the book as well as serve as
global identifiers for the subject for which other sites can make their
own assertions, add the following block of code anywhere within the
scope of the Book. The solutions add the element directly
under the <body> element.
<link property="sameAs" href="http://calnewport.com/books/deep-work/">
<link property="sameAs" href="http://www.hachettebookgroup.com/titles/cal-newport/deep-work/9781455586691/">
<link property="sameAs" href="http://worldcat.org/entity/work/id/2987976912"><!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
<link property="sameAs" href="http://calnewport.com/books/deep-work/">
<link property="sameAs" href="http://www.hachettebookgroup.com/titles/cal-newport/deep-work/9781455586691/">
<link property="sameAs" href="http://worldcat.org/entity/work/data/2987976912">
...
<div>
<img alt="" property="image"
src="http://syndetics.com/index.aspx?isbn=9781455586691/MC.gif">
</div>
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
<em>
<span>
<span property="bookEdition">First Edition.</span>
</span>
</em>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719"><span
property="author" resource="#author">Newport, Cal</span>,
author.</a>
</div>
<span>Year/Format: </span>
<span property="datePublished copyrightYear" content="2016">2016, </span>
<span>Book</span>
<span property="numberOfPages" content="304">, 304 pages</span>
...
<div>
<div property="description"><span>Summary/Review:</span> "One of the
most valuable skills in our economy is becoming increasingly rare. If you
master this skill, you'll achieve extraordinary results. Deep work is the
ability to focus without distraction on a cognitively demanding task. It's
...
</div>
</div>
...
<tr>
<th scope="row">ISBN:</th>
<td property="isbn" content="9781455586691">9781455586691 (hardback)</td>
</tr>
...
<tr>
<th scope="row">Language:</th>
<td property="inLanguage" content="en">English</td>
</tr>
...
</body>
</html>You can identify the author more precisely using the same approach.
@property="author" assertion from a
plain text value to a Person type by adding a
@typeof="Person" attribute.
@typeof attribute, you should also add a
@resource attribute to identify the subject. In this case,
add @resource="#author".
@property="name" of the author.
name is
associated with the subject of the book, rather than the author. That
is because of the @about attribute that you previously
added. Move all of the attributes
(@property="author", @typeof="Person",
@about="#book", and @resource="#author" from
the <span> to the <a> element,
and add an @about="#author" attribute to the
<span> element.
<link> elements that assert that this
subject is the same as those identified with other URLs. Add the
following block of code anywhere within the scope of the author block:
<link property="sameAs" href="http://calnewport.com/">
<link property="sameAs" href="http://id.loc.gov/authorities/names/n2004101272">
<link property="sameAs" href="https://www.wikidata.org/entity/Q16733303" about="#author">
<link property="sameAs" href="http://viaf.org/viaf/257395906"><!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
<link property="sameAs" href="http://calnewport.com/books/deep-work/">
<link property="sameAs" href="http://www.hachettebookgroup.com/titles/cal-newport/deep-work/9781455586691/">
<link property="sameAs" href="http://worldcat.org/entity/work/data/2987976912">
<link property="sameAs" href="http://calnewport.com/" about="#author">
<link property="sameAs" href="http://id.loc.gov/authorities/names/n2004101272" about="#author">
<link property="sameAs" href="https://www.wikidata.org/entity/Q16733303" about="#author">
<link property="sameAs" href="http://viaf.org/viaf/257395906" about="#author">
...
<div>
<img alt="" property="image"
src="http://syndetics.com/index.aspx?isbn=9781455586691/MC.gif">
</div>
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
<em>
<span>
<span property="bookEdition">First Edition.</span>
</span>
</em>
...
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719" property="author"
typeof="Person" about="#book" resource="#author"><span
property="name" about="#author">Newport, Cal</span>,
author.</a>
</div>
<span>Year/Format: </span>
<span property="datePublished copyrightYear" content="2016">2016, </span>
<span>Book</span>
<span property="numberOfPages" content="304">, 304 pages</span>
...
<div>
<div property="description"><span>Summary/Review:</span> "One of the
most valuable skills in our economy is becoming increasingly rare. If you
master this skill, you'll achieve extraordinary results. Deep work is the
ability to focus without distraction on a cognitively demanding task. It's
...
</div>
</div>
...
<tr>
<th scope="row">ISBN:</th>
<td property="isbn" content="9781455586691">9781455586691 (hardback)</td>
</tr>
...
<tr>
<th scope="row">Language:</th>
<td property="inLanguage" content="en">English</td>
</tr>
...
</body>
</html>Many controlled vocabularies provide linked data representations that are perfect for incorporating into your own description, both in your source as well as in the data you publish. The schema.org about property is commonly used to surface subject descriptors which can be linked to deep, rich vocabulary sources.
Libraries using the MARC21 standard can include a link to
a specific subject term in subfield
$0 of a subject field, using the Standard
Identifier source code prefix of (uri) to indicate that
it is a link. The Library of Congress makes their subject headings
available as linked data through the LC Linked
Data Service; for example, the entry Cognition includes
broader and narrower terms, usage notes, and provenance metadata.
The Getty Vocabularies provide linked data URIs as part of the Art & Architecture Thesaurus Online. For example, the entry cognition offers a rich set of linked data, including labels in other languages, provenance, licensing terms, and broader terms.
For each of the subjects on this page, find the URI for a matching
controlled vocabulary term and use that as an identifier for the
@property="about" attribute. For example, using the Library of
Congress subject heading for Cognition
could look like:
<li property="about" resource="http://id.loc.gov/authorities/subjects/sh85027742">
<a href="http://tpl.ca/search.jsp?Ntt=Cognition.&Ntk=Subject_Search_Interface">Cognition.</a>
</li>
<!DOCTYPE html>
<html>
...
<body vocab="http://schema.org/" typeof="Book" resource="#book">
<link property="sameAs" href="http://calnewport.com/books/deep-work/">
<link property="sameAs" href="http://www.hachettebookgroup.com/titles/cal-newport/deep-work/9781455586691/">
<link property="sameAs" href="http://worldcat.org/entity/work/data/2987976912">
<link property="sameAs" href="http://calnewport.com/" about="#author">
<link property="sameAs" href="http://id.loc.gov/authorities/names/n2004101272" about="#author">
<link property="sameAs" href="https://www.wikidata.org/entity/Q16733303" about="#author">
<link property="sameAs" href="http://viaf.org/viaf/257395906" about="#author">
...
<div>
<img alt="" property="image"
src="http://syndetics.com/index.aspx?isbn=9781455586691/MC.gif">
</div>
<h1 property="name">Deep work : rules for focused success in a distracted world</h1>
<em>
<span>
<span property="bookEdition">First Edition.</span>
</span>
</em>
...
<div>
<div>
<span>by</span>
<a href="http://tpl.ca/search.jsp?N=4294509719" property="author"
typeof="Person" about="#book" resource="#author"><span
property="name" about="#author">Newport, Cal</span>,
author.</a>
</div>
<span>Year/Format: </span>
<span property="datePublished copyrightYear" content="2016">2016, </span>
<span>Book</span>
<span property="numberOfPages" content="304">, 304 pages</span>
</div>
<div>
<span>Subjects:</span>
<ul>
<li property="about" resource="http://id.loc.gov/authorities/subjects/sh85027742">
<a href="http://tpl.ca/search.jsp?Ntt=Cognition.&Ntk=Subject_Search_Interface">Cognition.</a>
</li>
<li property="about" resource="http://id.loc.gov/authorities/subjects/sh2005003468">
<a href="http://tpl.ca/search.jsp?Ntt=Distraction+(Psychology)&Ntk=Subject_Search_Interface">Distraction (Psychology)</a>
</li>
<li property="about" resource="http://id.loc.gov/authorities/subjects/sh85083666">
<a href="http://tpl.ca/search.jsp?Ntt=Mental+work.&Ntk=Subject_Search_Interface">Mental work.</a>
</li>
<li property="about" resource="http://id.loc.gov/authorities/subjects/sh85129587">
<a href="http://tpl.ca/search.jsp?Ntt=Success.&Ntk=Subject_Search_Interface">Success.</a>
</li>
</ul>
</div>
...
<div>
<div property="description"><span>Summary/Review:</span> "One of the
most valuable skills in our economy is becoming increasingly rare. If you
master this skill, you'll achieve extraordinary results. Deep work is the
ability to focus without distraction on a cognitively demanding task. It's
...
</div>
</div>
...
<tr>
<th scope="row">ISBN:</th>
<td property="isbn" content="9781455586691">9781455586691 (hardback)</td>
</tr>
...
<tr>
<th scope="row">Language:</th>
<td property="inLanguage" content="en">English</td>
</tr>
...
</body>
</html>Checkpoint: Your HTML page should now look like step2/check_c.html
For properties that take a plain text value instead of a URL, you can
use <meta property="propertyName"
value="value"> to provide that implicit information.
Note: Do not use this approach as a license to stuff your
web page full of lascivious keywords that have no connection to your
content in the hopes of drawing a larger audience to your site. The
search engines learned about this "spiderfood" tactic back in the 90's
and will punish your site mercilessly with low relevancy ranking if you
are determined to have been trying to game their systems. The generally
accepted best practice is to try to only add machine-readable markup to
the same content that humans can see. Reserve <meta>
elements only for the most important purposes.
In this exercise, you learned:
@content attribute to supply
machine-readable versions of human-oriented data<meta> element to supply properties
that would not otherwise be part of the contentNext codelab: Holdings
Dan Scott is a systems librarian at Laurentian University.
This work
is licensed under a Creative
Commons Attribution-ShareAlike 4.0 International License.