Adding Meta Elements

Meta elements give you a way to add descriptive information to your Web pages, which is important because some Web search engines rely on these elements to help visitors find your site. Figure 11-3 explains how it all works.

Ever wondered where the information you see in search listings comes from? The underlined link in the above example ("Sugar Beat") is the title of the Web page the search engine found. The search engine pulled the site's description (shown underneath the title) directly from the page's hidden description meta element.

Figure 11-3. Ever wondered where the information you see in search listings comes from? The underlined link in the above example ("Sugar Beat") is the title of the Web page the search engine found. The search engine pulled the site's description (shown underneath the title) directly from the page's hidden description meta element.

Note

Fun fact for etymologists and geeks alike: the term "meta element" means "elements about," as in "elements that provide information about your Web page."

You put all meta elements in the <head> section of a page. Here's a sample meta element that assigns a description to a Web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="description"
    content="Noodletastic offers custom noodle dishes made to order." />
  <title>Noodletastic</title>
</head>

<body>...</body>

</html>

All meta elements look more or less the same. The element name is <meta>, the name attribute indicates the type of meta element it is, and the content attribute supplies the relevant information.

Meta elements don't show up when your page appears in a browser. They're intended for programs, like browsers and Web search engines (see the box below), that read your XHTML markup from top to bottom.

In theory, there's no limit to the types of information you can put inside a meta element. For example, some Web page editing programs insert meta elements that say its software built your pages (don't worry; once you understand meta elements, you'll recognize this harmless fingerprint and you can easily remove it). Another Web page might use a meta element to record the name of the Web designers who created it, or the last time you updated the page.

Some meta elements are more important than others, because search engines heed them. In the following sections, you'll learn about two of these: the description and keywords meta elements. These details, in conjunction with the <title> element, constitute the basic information that a search engine needs to gather about your page.

The description of your page is probably the easiest meta element to come up with. You simply write a few sentences that distill the content of your site into a few plain phrases. Here's an example:

<meta name="description" content="Sugar Beat Music for Children offers age-
appropriate music classes for children 4 months to 5 years old." />

Although you can stuff a lot of information into your description, it's a good idea to limit it to a couple of focused sentences that total no more than around 50 words. Some search engines home in on the description text, while others rely more heavily on the text in the page. Even if your description appears on a search results page, readers see only the first part of it, followed by an ellipsis (…) where it gets cut off.

Your keyword meta element should contain a list of about 25 words or phrases that represent your Web site. Separate each word in the list by a comma. Here's an example:

<meta name="keywords" content="sugarbeat, sugar, beat, music, children,
musical, classes, movement, babies, infants, kids, child, creative" />

The keyword list is a great place to add important terms (like "horseback riding"), alternate spellings ("horse back riding"), synonyms or related words ("equestrian"), and even common misspellings ("ecquestrian"). Keywords aren't case-sensitive.

Unfortunately, there's a huge caveat. Most search engines don't use the keyword list any longer. That's because it was notorious for abuses (many a Web master stuffed his keyword list full of hundreds of words, some only tangentially related to what was actually on the site). Search engines like Google take a more direct approach—they look at all the words in your Web page, and pay special attention to words that appear more often, appear in headings, and so on. Most Web experts argue that the keyword list has outlived its usefulness, and many don't bother adding it to their pages at all.