White hat SEO:

Structured Web Data

OLA SuperConference 2015

Dan Scott / +Dan Scott
Systems Librarian, Laurentian University

Search engines vs. libraries

Goal: Connect users with your resources using their search tool.
- People are working on this problem!
- Ask me about Evergreen, Koha, or VuFind!
- Also Libhub via BIBFRAME
But first: Connect users with your library using their search tool.

It is still a matter of debate in some circles (AUTOCAT) as to whether trying to reach users through general search engines like Google, Bing, and Yahoo! is even a worthwhile goal. Information literacy classes, the splendors of advanced search interfaces, etc.

A recurring topic in the library world is how we might get the contents of our catalogues to show up in search engines so that regular users could be pointed directly at our resources in the course of their general searches. (images of twitter threads, mailing list threads, etc)

However, at a very basic level, if someone searches for "library" on their phone or laptop, you want your library to show up if they happen to be in the general vicinity.

When you search for "library"...

Getting your library into search

Populate social media profiles with branch addresses, hours, contact info, pictures...
- Google: create Google+ pages
- Bing: populate Foursquare
- Yahoo!: maybe take out a Yellow Pages ad?
But that adds more places to maintain copies of data

OCLC to the rescue?

The WorldCat Registry claims
- to be the Authoritative single source for institutional metadata
- that Built-in Web services distribute Registry data across the Web, enhancing Web discovery of your content and services
Alas, the claims differ wildly from reality.

WorldCat Registry showing almost no data for Greater Sudbury Public Library

WorldCat Registry showing some data for J.N. Desmarais Library

WorldCat Registry showing almost no data for Toronto Public Library

Are you convinced we have a visibility challenge?

SEO is not a dirty word

[SEO] is a valid practice which seeks to improve technical and content aspects of a website, making the content easier to find, relevant, and more accessible to the search engine crawlers.

Search engine optimization (SEO) has acquired a dirty name, by association with spammers who want to sell you snake oil that will help your web site rise in the ranks of relevancy. Web rings, spammy comments on blogs, and all kinds of base tricks have slandered the perfectly valid pursuit of trying to make the fantastic content and services you have to offer discoverable to the people who might benefit from it.

Just like the term hackers was once a noble term associated with those who were interested in how technology works and how to make it work better, then spoiled by association with script kiddies and trolls who just wanted to make lives miserable, we started to reclaim the term by differentiating "white hat" hackers vs. "black hat" hackers. So, too, are we reclaiming the term SEO by differentiating "white hat" SEO vs. "black hat" SEO.

In this session, I'm going to walk through some of the basics that you need to look at from a white hat SEO perspective. If you have internet connectivity, I invite you to take a look at your own site as I work through some of the examples I've already prepared; if not, I'll do my best to make the examples come alive on the screen. If at any time you have a question, please fire away.

Web site prayer

Grant me the serenity to accept the things I cannot change,

Courage to change the things I can,

And wisdom to know the difference.

Reinhold Niebuhr via Sinead O'Connor

Not just structured data

Take care of the basics first!

Cool, persistent URLs
Accessible HTML
robots.txt
Sitemaps

Cool, persistent URLs

Cool URIs don't change
Links to your web content increases its ranking
Hide the publishing mechanisms and focus on the content!
- Bad: http://example.ca/CMS-product/index.php?JSESSIONID=abc123;page=hours
- Good: http://example.ca/hours

Accessible HTML

Cynthia Ng talks about accessibility as Universal Design
- Use meaningful HTML elements, @class attributes, and CSS.
- Don't use an image where text would do.
- ALT text, captions, and transcriptions help machines as well as humans.
But you're all AODA-compliant, right?
Check in wave.webaim.org - Web Accessibility Evaluation Tool

This is where we talk a bit about the difference between information that humans can see and interpret, versus what machines can see and interpret. At a very basic level, there is a lot of overlap here with principles of information design and designing for accessibility: for example:

Use meaningful HTML elements, such as headings, rather than forcing everything into tables or this decade's equivalent: div/span soup. And use those headings hierarchically; the H1 should be the title of the page, then H2 should be used to break out separate sections of the page into major topics; then H3 should subdivide the content of those major topics. If you find yourself using a lot of strong/bold tags or CSS styles, maybe you just need to carve up your content a little bit more.

Don't use an image where text would do. For example, don't create a PNG or JPEG to use as a button that says "Enter the contest" as an image; even if you add alt="Enter the contest", that's less approachable than simply using "Enter the contest" as the actual text of the button.

Again, accessible information design has been the subject of many other talks. Given that we're in Ontario and AODA legislation is in effect, you're all at least compliant with WCAG 2.0 level A, right? Good!

Blocking the robots: robots.txt

Standard format for telling robots what not to crawl.
Always found at root of website (http://example.ca/robots.txt).
Specifies web site directories to block; default is to allow everything.
Obeyed by well-behaved robots (includes major search engines).

Search results, facets, filters, etc


http://catalogue.example.com/search?term=fish 
http://catalogue.example.com/search?term=fishes
http://catalogue.example.com/search?term=fishing

Search engines will repeatedly crawl variants of these.

Block them!


User-agent: *
Disallow: /search/

Robots are pretty dumb and easily confused. For example, they'll find a search results page on your catalogue that lists thousands of results for the term "fish" and dutifully crawl through all of the links that they find; then if they find a search results page for the term "fishing" that (due to stemming) returns exactly the same results, they'll dutifully crawl through all of the links they find again.

                            http://catalogue.example.com/results?term=fish 
                            http://catalogue.example.com/results?term=fishing

often lead to results like:

                            http://catalogue.example.com/record/1?term=fish 
                            http://catalogue.example.com/record/1?term=fishing

Even though you and I have no problem guessing that the page will display the same record, and that (if anything) the list of related search results might change on that page without affecting the substantive content on the page, a search engine has no way of being able to telling what it will find on the other end of these links without human intervention.

Don't block everything!


User-agent: *
Disallow: /

This is not a good thing to see on your site.

You're telling search engines you don't want to be found.

That effectively tells every robot to just go away. If you don't want your content to show up in search engines, that's the right thing to do--but most of us are here because we wantsearch engines to expose users to the library resources that we have. Note that search engines have become much smarter over the past 20 years, and will dynamically adapt their crawl rate to avoid bringing down your web resources… because, after all, they want to connect users to the best resources on the web, and a web site that isn't running isn't very much use to them.

One other note: robots.txt only affects well-behaved robots. Again, search engines like Google, Bing, and Yandex are interested in playing by the rules, so if you find that your site is constantly being brought down by too much traffic, it's unlikely that it's the well-behaved search engines causing the problem. Setting a highly restrictive robots.txt file is more likely to just block the good robots while doing nothing to prevent the bad robots from continuing to pound your site.

Guiding the machines: sitemaps

XML format that lists every URL of interest for robots



   
      http://example.com/about
      2015-01-29
   
   
      http://example.com/hours
      2015-01-25

If you're thinking "Wait, my catalogue has over a million items in it; and my web site has new pages added to it every couple of days; that sounds like a lot of work!", you're right--it's a lot of work for humans. But it's something that a machine can easily generate on a nightly basis. And many of the content management systems that websites run on either have the ability built-in, or have plugins available, that will take care of generating sitemaps for you. Similarly, library systems like Evergreen and VuFind offer the ability to generate sitemaps for you; you just need to set it up once and forget about it.

Advertise your sitemap

Just add a Sitemap: line to your robots.txt file:


Sitemap: https://example.ca/sitemapindex.xml

Most search engines will find and use that the next time they refresh their knowledge of your robots.txt file.

However, you can also submit the location of your sitemap directly to Google, Bing, and Yandex; each offers a "Webmaster tools" site that you can use to track the status of the indexing of your sites, some insight into the usage of your site and potential errors found at your site, and potentially influence how the search engine interprets your content. Diving into those tools could be the subject of a whole different talk, though!

Structured data: why?

Even clean HTML is still just a bag of words (and media) to machines.

Social media sharing text instead of article text

Article with title 'Change text size for the story'

Enter schema.org

In July 2011, schema.org was announced by the major search engines; goals were:
- Offer a simple vocabulary for the most common entities on the web (events, products, people)
- Enable normal webmasters to add schema.org markup without needing Semantic Web expertise
- Help search engines aggregate data and apply finer-grained disambiguation and relevance strategies

Recognizing that the world would benefit from a metadata vocabulary that we could embed inside of web pages to provide more meaning to the machines that digest those web pages, some of the major search engines (Google, Yahoo, Bing, and Yandex) collaborated in 2011 to bring forward such a vocabulary, called "schema.org".

Using this vocabulary, you can unambiguously identify sections of your library home page that describe your library's name, address, phone number, email address, opening hours, upcoming events, etc. Then search engines or other automated crawlers could, when they come across this kind of markup, have much more authoritative data on which to build their services.

Library data of interest

My local library branch page contains:

Library name
Address
Home page
Phone number
Fax number
Hours of operation
Description of available services
Picture
Related branches

What's in schema.org for libraries?

Search schema.org for "Library"
Boom: http://schema.org/Library
Conventions:
- Types start with a capital letter
- Properties start with a lowercase letter

First, we can use the handy "Search" box at http://schema.org/ to find out that there is, indeed, an http://schema.org/Library type. Quick rule of thumb in schema.org: types (that is, classes of objects that have properties to describe them) start with a capital letter, while properties (that is, attributes of objects) start with a lowercase letter.

The documentation for types in schema.org list the most specific properties for a given type at the top, and then as you move down you get more generic properties. In the case of Library, it inherits properties from LocalBusiness, which inherits more general properties from Organization, which inherits the most general properties from the top-level Thing.

On scope in HTML documents

Scope refers to the contents of a given HTML element, including all of its child elements.


<body>

      
      
</body>

RDFa vs. microdata vs. JSON-LD

RDFa and microdata are attributes that you add to your existing HTML
JSON-LD is a more recent, complex option
schema.org includes examples for all three types of markup
We're going to be using RDFa (a W3C standard) for our examples

The first thing we need to do is to tell the machines that we're going to describe a Library on this HTML page. To do so, we can use microdata, RDFa, or JSON-LD. Microdata and RDFa are competing but reasonably equivalent standards for adding simple properties to HTML to identify markup in context, while JSON-LD is JavaScript markup that appears in its own script tag. For now, we'll use RDFa, as it is a W3C standard and, along with microdata, is still most broadly recognized by search engines.

Say you're using schema.org

The @vocab attribute specifies the default vocabulary
Default applies to the entire scope
So specify it on the <body> element


<body vocab="http://schema.org/">
...
</body>

One convention is to use the <body> element to identify the main thing that we're marking up on an HTML page. With RDFa, you can identify the default vocabulary in the external scope using the @vocab attribute; and then after that, all types and properties are automatically appended to the vocabulary URL. You use the @typeof attribute to declare what type you are marking up. So our body tag should now look like:

Say you're describing a Library

The @typeof element identifies the type you're describing
In general, properties in scope will be applied to that type
Let's specify the type on the <body> element, too


<body vocab="http://schema.org/" typeof="Library">
...
</body>

Identify your library's name

http://schema.org/name is as part of Thing
name is used for everything: people, organizations, book and movie titles...
To declare a property of a type in RDFa, use the @property attribute:


<body vocab="http://schema.org/" typeof="Library">
...
  South End Library  
...
</body>

As you start looking at your HTML to add structured markup to it, you will often find weird little problems that you otherwise wouldn't see in your browser (like the <em> </em> nonsense appended to the end of the library name). It's a great opportunity to clean up your HTML in general.

Picture this

image identifies relevant images for the given entity
Guides apps in choosing an image for social media posts, search results, etc
In this case, the South End Library sign seems like the best choice:


<body vocab="http://schema.org/" typeof="Library">
...
  South End Library
  
...
</body>

Testing your work

Check your work after each change, using one or more tools:
- RDFa Playground - great for visualizing RDFa markup
- Structured Data Linter - Handles RDFa, microdata, microformats, and JSON-LD
- Google Structured Data Testing Tool - Google's latest testing tool, launched January 2015

Standards vs. expectations

schema.org does not require logo and url properties on Library, but Google expects them

Declare the logo

There is a logo at the top of the page
Order of properties does not matter to schema.org, so let's declare it:


<body vocab="http://schema.org/" typeof="Library">
...
  
  ...
  South End Library
  
...
</body>

Declare the url

But the page lives at a URL! you might be thinking
There can be more than one entity described on a single page, so url helps uniquely identify them.
The navigation links to this page, so we can reuse it:


<body vocab="http://schema.org/" typeof="Library">
...
  
  ...
  South End Library
  ...
  South End Library
  
...
</body>

Wait; @property gets values how?

Usually @property takes the value of the child text nodes:
- ```
OneTwo
```
  keywords gets "OneTwo"
But if an @href or @src is on the same element, the property gets that value instead:
- ```
Library name
```
  url gets "/example" and image gets "/example.png"

Locating the library

We want to help search engines know where our libraries are located
An address is on the HTML page
http://schema.org/address is available to Library through Organization and Place; so let's mark it up:


<body vocab="http://schema.org/" typeof="Library">
    1991 Regent Street 

    Sudbury, ON P3E 5V3

    Phone: (705) 688-3950

    Fax: (705) 522-7788 
</body>

A more precise address

Right now the value of our address includes the phone and fax numbers
Create a more contained scope with a new span tag:


<body vocab="http://schema.org/" typeof="Library">
    1991 Regent Street 

    Sudbury, ON P3E 5V3

    Phone: (705) 688-3950

    Fax: (705) 522-7788 
</body>

Phone and fax numbers

Now that the phone and fax numbers are separate, we can identify those
New span tags required again:


<body vocab="http://schema.org/" typeof="Library">
    1991 Regent Street 

    Sudbury, ON P3E 5V3

    Phone: (705) 688-3950

    Fax: (705) 522-7788
</body>

address revisited

address expects a specific type as a value: PostalAddress
Machines expect humans to get things wrong or be lazy
Will do their best with plain Text values where structured types are expected
But we're better than that! Add a @typeof=PostalAddress declaration:


<body vocab="http://schema.org/" typeof="Library">
    
    1991 Regent Street 

    Sudbury, ON P3E 5V3

    Phone: (705) 688-3950

    Fax: (705) 522-7788
</body>

PostalAddress

Now add the constituent parts of PostalAddress:


<body vocab="http://schema.org/" typeof="Library">
    
      1991 Regent Street

      Sudbury, 
      ON
      P3E 5V3
    

    Phone: (705) 688-3950

    Fax: (705) 522-7788
</body>

We're starting to get into some serious markup here! As you add more properties to your HTML, you might start realizing that instead of hard-coding <br /> tags to add line breaks, you might want to consider using CSS to control the display. Just a thought that might be more flexible for mobile web browsers, etc.

Hours of operation

Users need to know when you're open
schema.org offers two different types of opening hours markup: openingHours and openingHoursSpecification
We'll use openingHoursSpecification with the corresponding type OpeningHoursSpecification
Slightly more complex, but at the same time easier to mark up

OpeningHoursSpecification

Each instance takes dayOfWeek, opens, and closes properties
dayOfWeek expects an enumerated value supplied by @href
opens and closes expect hh:mm:ss formatted times supplied by @datetime


<body vocab="http://schema.org/" typeof="Library">
<tr property="openingHoursSpecification" typeof="OpeningHoursSpecification">
  <td property="dayOfWeek" href="http://purl.org/goodrelations/v1#Sunday">
    Sunday**</td>
  <td>12 PM
    - 4 PM</td>
</tr>
</body>

Related branches

Library offers a branchOf property (via LocalOrganization)
By linking to our parent branch, robots can reason that other Libraries that link to the same parent are related branches
Simplest approach is to link to the overall home page for the organization:


<body vocab="http://schema.org/" typeof="Library">
...
  
    
  
...
</body>

Events

We all want more uptake of the events we offer
The Event type enables us to advertise these in a machine-readable way
Aggregators can list events at a given date / time across organizations and help get the word out

Sample event


Family - Story Time @ South End Library
Description: Develop your child's appreciation of language, rhythm and imagination through storytelling, puppetry, songs, finger plays and rhymes.
Date: Thursday - January 15 2015
Time: 10:30 AM - 11:30 AM
Location: South Branch
Program Type: Family
Series: Thursdays, 09-18-2014 to 12-11-2014, 10:30AM - 11:30AM
Public Note: Free! Children under 12 must be accompanied by a parent or guardian at all times while in the library.
 30 Seats Remaining

Name and description

Event offers a more specific type, ChildrensEvent - perfect!
Declare the @typeof ChildrensEvent, then add the basic name and description properties:



  Family - Story Time @ South End Library
  Description: Develop your child's appreciation of language, rhythm and imagination through storytelling, puppetry, songs, finger plays and rhymes.
  Date: Thursday - January 15 2015
  Time: 10:30 AM - 11:30 AM
  Location: South Branch
  Program Type: Family
  Public Note: Free! Children under 12 must be accompanied by a parent or guardian at all times while in the library.
  30 Seats Remaining

Location and organizer

The South Branch is both the organizer and the location of the event
We can link to the branch and include both properties (separated by a space) in the @property attribute



  Family - Story Time @ South End Library
  Description: Develop your child's appreciation of language, rhythm and imagination through storytelling, puppetry, songs, finger plays and rhymes.
  Date: Thursday - January 15 2015
  Time: 10:30 AM - 11:30 AM
  Location: South Branch
  Program Type: Family
  Public Note: Free! Children under 12 must be accompanied by a parent or guardian at all times while in the library.
  30 Seats Remaining

Start and end times

Events have a startDate and an endDate
These expect specifically formatted ISO-8601 date/time values; we'll use a time element with a datetime property to express them



  Family - Story Time @ South End Library
  Description: Develop your child's appreciation of language, rhythm and imagination through storytelling, puppetry, songs, finger plays and rhymes.
  Date: Thursday - January 15 2015
  Time: 
    10:30 AM
    - 11:30 AM
  Location: South Branch
  Program Type: Family
  Public Note: Free! Children under 12 must be accompanied by a parent or guardian at all times while in the library.
  30 Seats Remaining

Typical age range

The typicalAgeRange property specifies a target audience
It takes just a simple text range:



  Family - Story Time @ South End Library
  Description: Develop your child's appreciation of language, rhythm and imagination through storytelling, puppetry, songs, finger plays and rhymes.
  Date: Thursday - January 15 2015
  Time: 
    10:30 AM
    - 11:30 AM
  Location: South Branch
  Program Type: Family
  Public Note: Free! Children under 12 must be accompanied by a parent or guardian at all times while in the library.
  30 Seats Remaining