Introduction to Web Design For Literary Theorists

Third Workshop:
Machines Read, Too (with a little help from their human friends)

Patrick Mooney
Co-Lead TA, 2013-2015
Department of English
UC Santa Barbara

Objectives for this workshop series

To learn the basic skills involved in building a small website for a course or section.
To actually build such a web site that is useful for your students and that represents you positively.
To engage in practices that minimize the labor required to do so.
To make your teaching practices more visible on the web.
To be able to read various versions of HTML and CSS in other places on the web.
To have an elementary understanding of the epistemological, political, and hermeneutic issues involved in semantic markup of web content.

Objectives for today's workshop

In the last two workshops, I've argued that your markup for your site should be semantic (indicating the structure of your document) rather than presentational (because HTML is not a word-processing application).
In the last workshop, we talked about how to control the presentation of your documents with CSS.
Today will present the other half of that argument: semantic markup makes your pages intelligible to machines as well as humans.
- Why does this matter? Well …

More specifically …

Today we will be talking about:

Additional HTML tags (especially in the <head>)
Microformats (http://microformats.org)
Sitemaps (http://sitemaps.org)
OpenGraph (http://ogp.me)
Some things Google (and other search engines) like

Details, details ...

I'm going to be moving over a lot of details rather quickly today.
You don't need to memorize them all.
- There are great references on the web, of course.
- This presentation is online.
- What's important is that you pick up major concepts and work along with them.
- Come talk to me in my office hours if you have questions!
A collection of useful links is online at http://is.gd/todoho.

Reminders from previous workshops

HTML is the standard language for displaying content on web sites.
An HTML document ("web page") is a plain text file with markup ("tags") that indicate the structure of the document to machines that render or otherwise interpret it.
Your HTML should focus on describing the document's structure, rather than its appearance.
- To put it another way, you should separate content from descriptions of its presentation.
- Describing the appearance of well-structured content is the function of CSS.

Reminder: A minimally acceptable XHTML document...

... has these elements:

A <!DOCTYPE> declaration: (to you) a string of gibberish that tells the browser what flavor of HTML you're using.
An <html> tag, with an xmlns= attribute to tell XML parsers how to parse the HTML.
A <head> tag, containing (at least) a <title> tag.
A <body> tag containing content.

So how do machines see text?

Think about how your students encounter difficult texts:

Caddy came to the door and stood there, looking at Father and Mother. Her eyes flew at me, and away. I began to cry. It went loud and I got up. Caddy came in and stood with her back to the wall, looking at me. I went toward her, crying, and she shrank against the wall and I saw her but I pulled at her dress. Her eyes ran.

Versh said, Your name Benjamin now. You know how come your name Benjamin now. They making a bluegum out of you.

— William Faulkner, The Sound and the Fury (page 44 in the Norton Critical Edition)

Why be nice to machines?

It's helpful to your users in various ways. (Especially the tech-savvy ones.)
It can enhance the visual appeal of your information when it's been processed by machines:
- Search engine results
- Shares on Facebook, Google+, etc.
Like any constituency, machines appreciate it when you pander to their preferences.

Some additional `<head>` contents

<link> — indicates that the HTML file (in some sense) depends on another file to be properly rendered or otherwise processed.
An example you saw in workshop two:

<head> <link rel="stylesheet" type="text/css" href="styles.css" /> <title>Some Books I've Read</title> </head> <body>
[...]
But there are other ways for HTML documents to depend on other documents...

The `<meta>` tag

Always goes in the <head>; section of the document.
As you might expect, encodes meta-information about the document.
This information is not directly visible to the viewer, but is meaningful to various types of software that perform various kinds of automatic processing.
There is no authoritative and definitive vocabulary for meta-information, but there are very common vocabularies.

Some examples

<meta name="generator" content="Bluefish 2.2.3" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="author" content="Patrick Mooney" /> <meta name="copyright" content="Copyright © 2014 Patrick Mooney" /> <meta name="keywords" content="Southern literature, UCSB, spring 2014, Faulkner, Eudora Welty" /> <meta name="description" content="Notes for my discussion section in English 133SO, Spring 2014, at UC Santa Barbara." /> <meta name="date" content="2014-05-29T03:47:45-0700" />

Indicating the (natural) language of your text

You can add the lang= attribute to any HTML tag:

<body lang="en"> <p lang="en-US">In J.M. Synge's <cite>The Playboy of the Western World</cite>, Christy Mahon refers to a shovel as a <q lang="en-IE">loy</q>.</p> </body>
You should generally be only as specific as you need to be.
- ja means Japanese; ja-JP means Japanese as spoken in Japan.

Microformats

Are a way of easily indicating certain types of information to automatic processors while (by default) remaining invisible to users in browsers:
- Identity information (name, address, phone number, website, etc.) with hCard
- Calendar information (event times, locations, etc.) with hCalendar
- Relationships with XFN
- Recipes with hRecipe
- Others...
Think of them as a way of pointing and yelling Here it is! And here's what it is! at non-human parsers.

Some Attributes Are for any Tag

<tag id="something">
- Attaches a unique ID to an individual tag for some purpose of your own.
<tag class="something something_else">
- Indicates that the tag belongs to one or more groups that you yourself designate for some purpose of your own.
One of these "purposes of your own" involves marking content for styling.
There are other purposes …

Marking up personal information with `hCard`

Find the HTML tag that encloses all of the relevant information (or, if there isn't one, surround the information with <span> ... </span> or <div> ... </div>). Give this element the class vcard.
Mark up whatever relevant information is there with class names from the hCard vocabulary.
- The only required piece of information is fn ("formatted name"), but you can provide a lot of other information if you'd like: email, telephone, web page, address, birthday, photo, etc.

Examples

The point is to mark up places where you're already putting this information:
- An about me page on your site.
- Other places where you're already putting some subset of your contact information:
  - A course syllabus.
  - A contact me page.
  - Etc.: any document you produce where you sign your name is a candidate.
Also: Why bother?
- Remember that the whole point of doing this extra work is to make information easily parsable by non-human parsers.

Some more hCard notes

If you have full control over your page's code, you should add the hCard profile to your document's <head>:
- <link rel="profile" href="http://microformats.org/profile/hcard" />
Remember that all you're really doing is pointing out to non-human readers where a certain type of information is.
You can wind up with a lot of extra <div>s and <span>s.
- Remember that HTML rendering collapses whitespace.
- You can take advantage of this to make your code easier for you to parse visually.

Another microformat: `hCalendar`

Used for describing events in a machine-readable way.
If you can, add the profile to your document's <head>:
- <link rel="profile" href="http://microformats.org/profile/hcalendar">
Mark up the container that encloses all of the information as class="vevent".
- Again: if there is no highest-level containing element that encloses everything, add a <span> or a <div> to enclose it.
Required information: when the event starts (dtstart) and its description (summary).
Other potentially intelligible components: url; location (an address); end time (dtend); latitude/longitude coordinates (geo); attendee, contact, organizer (ideally represented with hCards); several others.

Other considerations

What if the human-readable information is not machine-friendly?
- Example: dates should be written in ISO 8601 format (2015-02-21)
  - This helps to resolve ambiguity.
  - However, you (probably) don't use it (much) in your daily life.
- Use the <abbr> (abbreviation) tag to encode a machine-friendly version in the tag's title attribute:
  <p class="vevent"><span class="summary">First paper due</span> at <abbr class="dtstart" title="2014-05-19T12:00">noon on May 19</abbr>.</p>
If you have multiple events on a web page, you can be polite to the parser by giving an element that contains all of them (perhaps <div> or <body>) the class vcalendar.

Examples

Marking up events on a section guidelines handout.
Using the Operator plug-in for Firefox.
Validating your semantic markup:
- Google's Structured Data Testing Tool.
  - Checks for compliance with multiple standards that Google understands.
  - It's a useful tool, but ...
    - Note that it doesn't validate with the microformats standards.
    - Instead, it checks to see if the information Google wants is present.
    - These are related, but not identical.
- We'll talk about other approaches later this afternoon.

A final microformat: XFN

Used for indicating relationships between people.
If you can, add the profile to your document's <head>:
- <link rel="profile" href="http://gmpg.org/xfn/11">
Really simple: just add rel="[something meaningful]" as an attribute to your <a href> links.
Theoretically, you should use XFN to indicate the nature of your relationship to a real human when you link to a web page representing them: a blog; a Facebook or LinkedIn profile.

What you can put in `rel=` values

relationship category	sample XFN values
friendship (at most one)	`friend`, `acquaintance`, `contact`
physical	`met`
professional	`co-worker`, `colleague`
geographical (at most one)	`co-resident`, `neighbor`
family (at most one)	`child`, `parent`, `sibling`, `spouse`, `kin`
romantic	`crush`, `date`, `sweetheart`
identity	`me`

Uses of `rel=`

The only XFN value I myself use at all regularly is rel="me", which means the page I'm pointing to also represents me.
There are plenty of other things you can do with rel= values, though we're not discussing them.
Worth saying again: You should use XFN to indicate the nature of your relationship to a real human when you link to a web page representing them.

Be nice to Google

One of the reasons for using microformats: Google leverages them for deciding how to display search results.

You can instead use RDF or microdata, if you know these other standards.
Google takes hints from your semantic markup and uses it to match what you have to what people are searching for:
- events
- people
- recipes
- reviews
- etc.
rel="author" is less widely useful than it used to be.
- Google no longer uses this information, but some other services claim to.

Sitemaps

A way of providing hints to search engines:
- Locations for pages (or other files) they might not otherwise find
- How to rank various documents on your website relative to each other
- How often search engines should check for document updates
Place an appropriately designed XML file called sitemap.xml at the root of the site's directory.
- XML is just another markup language, conceptually similar to HTML, without a fixed vocabulary.
- XML vocabularies depend on context.

A sample

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://patrickbrianmooney.nfshost.com/~patrick/</loc> <changefreq>weekly</changefreq> <priority>0.9</priority> </url> <url> [...] </url> </urlset>

xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" just specifies the location of a machine-intelligible document that explains the XML vocabulary to parsers.

Some considerations

Sitemaps are understood by Google, Bing, Yahoo!, and other search engines.
Information in your sitemap that points to a domain name other than the one on which your sitemap is hosted will be ignored.
As in so many other ways, if a search engine can tell that you're trying to deceive it somehow, this directly hurts your search engine ranking.
- Always be honest with search engines. They're getting to be pretty good at detecting attempts to manipulate them.
You can sign up for Google Webmaster Tools (there's one for Bing, too) to see stats about your website and make sure that your sitemap is understood.

Open Graph

A way of providing basic information that controls how social networks display your web pages.
Facebook-originated, but also understood by LinkedIn and Google+ (and others).
Consists of a set of tags you put in your document's <head>.
If you omit it, social networks will try to guess based on other page information.
- You'll get better results from being explicit about what you want social networks to display, though.
Twitter and Pinterest understand Open Graph, but prefer that you use their own metadata vocabularies.

Add a bit of verbiage to your root `<html>` element

<html prefix="og: http://ogp.me/ns#">

Alas, this is technically invalid in any version of HTML other than HTML5.
However, even if it's technically invalid, it still works fine.

Four characteristics are mandatory to be minimally compliant:

<meta property="og:title" content="Discussion Notes for George Eliot's Middlemarch" /> <meta property="og:type" content="website" /> <meta property="og:url" content="[the document's actual URL]" /> <meta property="og:image" content="[URL of a thumbnail image]" />

Increasing your search engine ranking

Write valid HTML.
Engage in good semantic markup practices so that search engines understand the structure of your document.
- Put meaningful values in <h1>, <h2>, etc.
- Use microformats (or microdata or RDF).
- Check the validity of your documents using validators. There are good ones available free on the Internet.
  - Several are listed on the links for this course series.
Never ever try to deceive search engines.

Treat your own home page as a central hub for your online presence

Link to it from your other online presences.
Link back to your other online presences from it.
This process of reciprocal linking helps search engines to determine that your identity hub is, in fact, your identity hub.
Hope for links to your content from other places.
- Don't try to buy or trade links; search engines can pick up on this, and will penalize you for doing so.
- Search engines want signals from organically generated content.
Use good metadata to describe your site.

How much of this is worthwhile?

Admittedly, doing all of this for every HTML document that you write would be an awful lot of work, especially at first.
Remember that you can use older documents as templates for newer documents, or copy metadata from older documents and paste it into newer ones.
The short answer: you should do whatever you feel comfortable doing and have time to do. Each of the techniques we've talked about today will benefit you in some ways.
As with any skill, it gets easier as you do it more often.

What else can I do?

A lot.
Other microformats:
- resumes and CVs
- licenses
- recipes
- many more ...
Markup for other social networks:
- Twitter
- Pinterest
Move to microformats2.
Follow (some of) the identity hub construction suggestions at IndieWebCamp.

Introduction to Web Design For Literary Theorists

Third Workshop: Machines Read, Too (with a little help from their human friends)

Objectives for this workshop series

Objectives for today's workshop

More specifically …

Details, details ...

Reminders from previous workshops

Reminder: A minimally acceptable XHTML document...

So how do machines see text?

Why be nice to machines?

Some additional <head> contents

The <meta> tag

Some examples

Indicating the (natural) language of your text

Microformats

Some Attributes Are for any Tag

Marking up personal information with hCard

Examples

Some more hCard notes

Another microformat: hCalendar

Other considerations

Examples

A final microformat: XFN

What you can put in rel= values

Uses of rel=

Be nice to Google

Sitemaps

A sample

Some considerations

Open Graph

Add a bit of verbiage to your root <html> element

Increasing your search engine ranking

Treat your own home page as a central hub for your online presence

How much of this is worthwhile?

What else can I do?

Third Workshop:
Machines Read, Too (with a little help from their human friends)

Some additional `<head>` contents

The `<meta>` tag

Marking up personal information with `hCard`

Another microformat: `hCalendar`

What you can put in `rel=` values

Uses of `rel=`

Add a bit of verbiage to your root `<html>` element