Titles for Web Pages: In-context and Out-of-context

Most writers know the value of an informative title, but many beginning web authors don’t know that each web page needs two kinds of titles. The in-context (IC) title always sits at the top of a page, with the rest of the document immediately beneath it. The out-of-context (OOC) title is frequently displayed by search engines or archive pages, as part of a long sorted list.

When a web author has neglected to provide an out-of-context title, many HTML authoring tools will supply a generic, uninformative title, such as “New Page 1″ (see the example below).

25 Nov, 2001 — first posted by Dennis G. Jerz
23 Jun 2013 — last updated

If you are creating web pages with a content management system such as WordPress, then by default the in-context and out-of-context titles are the same. If, on the other hand, you are coding your web page by hand, or you are digging into templates (which determine how your server will assemble the various bits of content in your database), then you have the opportunity to fine-tune your content so that the in-context title appeals to the human readers who are actually looking at your pages, and the out-of-content title so that it is most useful to the search engines and social media services that assemble previews of your pages, often in a long list of links that compete for the reader’s attention.

Why Bother with Two Different Titles?

Write the out-of-context title for the benefit of someone who has not yet decided to view the rest of your document. Search engines and social media services will scrape the out-of-context title (and perhaps an image and a few lines of text) in order to construct a preview of the page you want to share. You don’t have much control over how Facebook or Twitter constructs that preview, but you can make sure that your out-of-context title is meaningful — not something overly general like “Table of Contents” or “About this Website.”

The In-Context (IC) Title

A person who sees your in-context title can always see the rest of your document right below it.  The navigation links, graphics, and other descriptive content provide additional information.  Since anybody who can read the in-context title can also see all this other stuff at the same time, the in-context title doesn’t have to carry the full weight of describing the page’s contents.

Example:

If you put up a website devoted to skiing near the Elizabeth Mount University, you might include a link to the school’s home page, a logo, photos of students on a ski trip, a map showing nearby resorts, and a calendar of upcoming events.  Your in-context title (the words sitting at the top of the page) might be “Everybody’s Favorite Sport.”  Maybe you have created a big graphic that includes the word “skiing,” and you don’t want to repeat that word in the title because it would be redundant. An image of someone launching off a ski jump, or a graphic that includes a fancy version of the word “skiing,” will let your visitors know what the site is about.

The Out-of-Context (OOC) Title

If your out-of-context title reads “New Page 1″ or something else uninformative, the credibility of your website will suffer.

The OOC title is mostly meant for computers to display, when the reader is not actually looking at your website. The user is probably looking at a list of search results, and will have to click on the OOC title in order to visit your page.

How many times have you been searching through a list of search engine results, and found a list of pages with titles like “Jen’s Page” or “Page 2″ or “Untitled”?   If you have information of value to web searchers, you should write a good OOC title, so that readers will know what your pages have to offer.

Example:

On 25 Nov, 2001, I searched Google for “UWEC students skiing.”  Here’s how one of the hits was presented:

Infinity Software Solutions, Inc.
 deeper discounts for UWEC students & staff. Most shows … Reserve ($2/day) and UWEC Recreation (for univ  trails, cross-country skiing, snowshoeing, workshops and a 
www.infinitejoy.com/links/simple.html – 48k - Cached - Similar pages

If you were looking for skiing links, not software solutions, you wouldn’t be likely to click on this link; but here’s what you would find:

Simple Pleasures is a compilation of local recreational and volunteer activities, with an emphasis on those that are simple, healthy, non-materialistic, community-building, supportive of the environment, supportive of the arts, etc. While most of these activities are available no matter where you live, the primary focus of this page is on the Chippewa Valley of west-central Wisconsin.    Last Updated 02/11/2000.

The rest of the page is a list of local activities in the Chippewa Valley, collected nearly two years ago.  Its relationship to Infinity Software Solutions, Inc. is unexplained.

A much better OOC title would have described the page contents more accurately, since the reader of the OOC title hasn’t yet decided to visit your page, and can’t scan down the page looking for interesting stuff:

Nature-friendly Recreation Links — Chippewa Valley, WI (Feb, 2000)
 deeper discounts for UWEC students & staff. Most shows  Reserve ($2/day) and UWEC Recreation (for univ  trails, cross-country skiing, snowshoeing, workshops and a 
www.infinitejoy.com/links/simple.html – 48k - Cached - Similar pages


Creating the In-Context Title

  1. Type it at the top of the page.
  2. Apply the “heading” format.  This will make the text larger, while at the same time marking that line of text as particularly important because it describes the content of your website.  In MS FrontPage:
    • Put the cursor on the line you want to identify as the “heading”.
    • Click the drop-down box in the upper left of the screen; it is probably labeled “Normal”. (See image at right.)
    • Choose a heading (Heading 1 for the largest heading; Heading 2 for a subheading, and so on.)

Note: Simply increasing the type size to 18pt or 24pt is not the same thing as applying the “Heading” formatting. If you increase the type size, but don’t identify the text as a “heading”, the computer will think it’s just large text; it won’t know that you have identified this particular block of text as describing the content of your website.

Creating the Out-of-Context Title

  1. You need to tell your web editor what the out-of-context title is. In MS FrontPage:
  2. Right-click on the page you wish to edit.
  3. Select “Page Properties”.
  4. Type the title in the “Title” box.

See Also:

 

“[T]he headline text has to stand on its own and make sense when the rest of the content is not available. Sure, users can click on the headline to get the full article, but they are too busy to do so for every single headline they see on the Web. I predict that users will soon be so deluged with email that they will delete messages unseen if the subject line doesn’t make sense to them.” — Jakob Nielsen, “Microcontent