Google, Yahoo!, Bing and Yandex have all gotten together to support Schema.org. In doing this they have sent a message to the web community telling us how they want the data on our web pages formatted. I discovered that it is not easy to post citations and references. This is a guide on how to cite sources on your web page.

Common Citation Formats

If you have written a paper in school you probably have needed to cite your sources to make your teacher happy. This would include any of the popular citation formats such as MLA, ASA, APA, CMOS, Bluebook, ACS, ALWD, Vancouver System and Harvard Referencing to name a few. All of these have common elements including:

• Inline Reference – An indicator next to the referenced material that points to the full source in the Bibliography.
• Bibliography / Works Cited – A section where all the info on each reference is located.
• Reference Data – Information on how to find the original reference material.

Though all the different citation formats and style guides rearrange the data in the list above, the data remains the same: There is a publication you’re talking about and this is where to find it.

Inline References

If you have ever looked something up on Wikipedia then you have seen little numbers in the text that look like this:^[1] These are inline references and they point to the actual reference data somewhere toward the bottom of the article. In publications you will other references that look like this: ³ or this: (Davis 2012) or this: (Davis) All of these are different formats for making an inline reference. The best practice for inline references on the web is to turn these into links that take the user to the relevant info in the biliography. HTML5 has changed the way which we might do that. Here is an example of how it should be done:

• Inline Reference: ^{<a href="#7">[7]</a>} or ^{<a href="#7" title="Davis 2012">[7]</a>}
• Bibliography: <li id="7">Reference.</li>

This for an html5 web page that has the bibliography at the bottom of the page. When the user clicks on the inline reference [7] it will take them to the list item in the bibliography with the id="7". You can change how you make your inline references to match other formats, but the link is the same. You can use multiple inline references to refer to the same citation in your bibliography.

Bibliography / Works Cited

Once you have gathered the publications you want to cite you should put them in a list at the bottom of the page. Since references should be relevant for the page people are currently on you should avoid putting all citations for multiple pages on a seperate page. If you look at line two of the example above you will see that I added id="x" to the ordered list items. The ID should be the same as the <a href="#x"> for the inline reference.

Bibliography Sample

1. Example of biliography.
2. Another example.

Reference Data

This is where we hit the real meat of using Schema.org to markup our reference. Normally someone would markup their bibliography like this:

<li id="4">Lastname, Firstname. Title of Book. Place of Publication: Publisher, Year of Publication. Medium of Publication or URL.</li>

This is using the MLA format. If you use a different format the same information is there, but the data is rearranged. Search engines might not be able to figure out what bit of information means what even though it might be absolutely clear to the user. Marking up the information with the correct micro tags and micro formatting (schema) will clearly define the information so search engines can make better use of it. Let’s start with one of my favorite books The Hitchhiker’s Guide to the Galaxy. If I were to cite it using MLA I would get: Adams, Douglas. The Hitchhiker’s Guide to the Galaxy. UK: Pan Books, 1979. Paperback. Now to mark it up.

<li id="1"><div itemscope itemtype="http://schema.org/Book">
<div itemprop="author" itemscope="http://schema.org/Person">
    <span itemprop="familyName">Adams</span>,
    <span itemprop="givenName">Douglas</span>
</div>.
<span itemprop="name">The Hitchhiker’s Guide to the Galaxy</span>.
<div itemprop="publisher" itemscope="http://schema.org/Organization">
    <span itemprop="location">UK</span>:
    <span itemprop="name">Pan Books</span>
</div>,
<time itemprop="datePublished" datetime="1979">1979</time>.
<span itemprop="bookFormat">Paperback</span>.
</div></li>

To start any schema.org microformatting you need to first put the items into a <div> tag and add itemscope and itemtype to it. The item type in this case is a Book. I then put each bir of microdata in a <span> and added itemprop="" to them. I took the item properties from the schema.org entry and put them into the itemprop="" attribute. For dates substitute <time> for <span>, add the datetime="" attribute and enter the date (use ISO 8601 formatting).

I ran into two problems with the Book itemtype. 1. In MLA citations you put the author’s last name first. This is not how most people search for names so I wanted to make it clear how his name should be formatted. 2. The Book itemprops do not include a publisher location. To fix both of these problems I used an Embedded Item. To do this I created a new <div> inside the Book div and added the itemprop="" for the group of microdata and then the itemscope="" with the type for the microdata I wanted to format.

So, for the author’s name I still have itemprop="author" and I’ve added more from the Person. Now I can use the itemprops from Person and made it clear which is the first name (givenName) and which is the last name (familyName). For publisher I added Organization and I can now use location to format the location of the publisher. Let’s try a few more:

Movie Example:

Stranger Than Fiction. Dir. Marc Forster. Columbia Pictures, 2006. DVD.

<li id="2"><div itemscope itemtype="http://schema.org/Movie">
<span itemprop="name">Stranger Than Fiction</span>.
Dir. <span itemprop="director">Marc Forster</span>.
<span itemprop="provider">Columbia Pictures</span>,
<time itemprop="datePublished" datetime="1979">1979</time>.
<div itemprop="associatedMedia" itemscope="http://schema.org/MediaObject">
    <span itemprop=""encodingFormat">DVD</span>
</div>.
</div></li>

Music Example:

Too Much Joy. "Starry Eyes" Mutiny. Giant Records, 1992. CD.

<li id="3"><div itemscope itemtype="http://schema.org/MusicRecording">
<span itemprop="byArtist">Too Much Joy</span>.
&quot;<span itemprop="name">Starry Eyes</span>&quot;
<span itemprop="inAlbum">Mutiny</span>.
<span itemprop="publisher">Giant Records</span>,
<time itemprop="datePublished" datetime="1992">1992</time>.
<div itemprop="associatedMedia" itemscope="http://schema.org/MediaObject">
    <span itemprop=""encodingFormat">CD</span>
</div>.
</div></li>

Blog Article Example:

Goel, Khavi and Pavir Gupta. "Introducing schema.org: Search engines come together for a richer web." Google Webmaster Blog. Google/Blogger, 06/02/2011. Web. 12/14/2011.

<li id="4"><div itemscope itemtype="http://schema.org/Article">
<div itemprop="author" itemscope="http://schema.org/Person">
    <span itemprop="familyName">Goel</span>,
    <span itemprop="givenName">Khavi</span>
</div> and
<div itemprop="author" itemscope="http://schema.org/Person">
    <span itemprop="givenName">Pavir</span>,
    <span itemprop="familyName">Gupta</span>
</div>.
&quot;<span itemprop="name">Introducing schema.org: Search engines come together for a richer web.</span>&quot;
<meta itemprop="headline" content="Introducing schema.org: Search engines come together for a richer web." />
<span itemprop="publisher">Google Webmaster Blog</span>.
<span itemprop="sourceOrganization">Google</span>/<span itemprop="provider">Blogger</span>
<time itemprop="datePublished" datetime="2011-06-02">06/02/2011</time>.
<span itemprop="bookFormat">Web</span>.
<time itemprop="dateModified/accessed" datetime="2011-12-14">12/14/2011</time>.
</div></li>

Accessed Date is required by MLS, but there is no accessed itemprop on any of the related schema. I added "/accessed" to "dateModified" using the Extension Mechanism. I also included the actual url for the image in a metatag because the MLA format did not require it, but I wanted it there anyway (in case I forgot). This way the link does not show, but it is included as part of the meta data for the Schema object.

Wikipedia Example:

"Neenach Volcano." Wikipedia, The Free Encyclopedia, Wikimedia Foundation, Inc.. 08/24/2011. Web. 03/16/2012 <http://en.wikipedia.org/wiki/Neenach_Volcano>

<li id="5"><div itemscope itemtype="http://schema.org/Article">
&quot;<span itemprop="name">Neenach Volcano.</span>.&quot;
<span itemprop="publisher">Wikipedia, The Free Encyclopedia</span>.
<span itemprop="sourceOrganization">Wikimedia Foundation, Inc.</span>
<time itemprop="dateModifiec" datetime="2012-03-19">03/19/2011</time>.
<span itemprop="bookFormat">Web</span>.
<time itemprop="dateModified/accessed" datetime="2012-03-22">03/22/2011</time>.
</div></li>

Photograph Example:

Santana, Claudio. A cloud of ash billowing from Puyehue vo. 2011. AFP/Getty Images, Seattle. gettyimages.com. JPG. 01/26/2012.

<li id="6"><div itemscope itemtype="http://schema.org/Photograph">
<div itemprop="author" itemscope="http://schema.org/Person">
    <span itemprop="familyName">Santana</span>,
    <span itemprop="givenName">Claudio</span>
</div>.
<span itemprop="name">A cloud of ash billowing from Puyehue vo</span>.
<div itemprop="publisher" itemscope="http://schema.org/Organization">
    <span itemprop="name">AFP/Getty Images</span>:
    <span itemprop="location">Seattle</span>
</div>.
<time itemprop="datePublished" datetime="2011">2011</time>.
<span itemprop="url">gettyimages.com</span>
<meta itemprop="url" content="http://www.gettyimages.com/detail/news-photo/cloud-of-ash-billowing-from-puyehue-volcano-near-osorno-in-news-photo/115788663" />
<div itemprop="associatedMedia" itemscope="http://schema.org/MediaObject">
    <span itemprop=""encodingFormat">JPG</span>
</div>.
<time itemprop="dateModified/accessed" datetime="2012-01-26">01/26/2012</time>.
</div></li>

Micro Data

There are a lot of ways to format data. This page deals with citations only. I intend to create more articles on this subject so come back soon. For now, if you have any questions feel free to comment on my Google+ posts.