Section 11.3. Adding Meta Tags

11.3. Adding Meta Tags

Meta tags give you a way to attach descriptive information to your Web pages, which is important because some Web search engines rely on these tags to help surfers find your work. Figure 11-4 explains how it all works.

Figure 11-4. Ever wondered where the information that you see in a search listing comes from? The underlined link part (in this example, "Sugar Beat") is the title of the Web page that's been found. The text underneath is a hidden description pulled directly from the page's meta tag. Meta tags can also contain a keyword list, which search engines sometimes consult when deciding which results to list. That means it's important to list likely search terms in your meta tag's keyword list.

Note: Fun fact for etymologists and geeks alike: the term meta tag means "tags about," as in "tags about your Web page."

All meta tags are placed in the <head> section of the page. Here's an example meta tag that assigns a description to a Web page:

 <html> <head>  <meta name="description" content="Noodletastic offers custom noodle dishes made to order.">  <title>Noodletastic</title> </head> <body></body> </html> 

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

Meta tags don't show up when your page appears in a browser. They're intended for the programs that read your Web pagelike browsers and Web search engines (see the box below).

How Web Search Engines Work

A Web search engine like Google is built out of three separate pieces. The first piece is an automated program that roams the Web, downloading everything it finds. This program (often known by more picturesque names like spider, robot , or crawler ) will eventually stumble across your Web site and copy its contents.

The second piece is an indexer that chews through the Web page, and extracts a bunch of meaningful information, including the Web page title, the description, and the keywords. The indexer also records a great deal of more esoteric data. For example, a search engine like Google keeps track of what words crop up the most often on a page, what other sites link to your page, and so on. The indexer inserts all of this digested information into a giant catalog (technically, a database ).

The final piece of the search engine is the part you're probably the most familiar withthe front-end, or search, page. You enter the keywords you're hunting for, and the search engine scans the catalog looking for suitable pages. Different engines have different ways of ranking pages, but the basic idea is that the search engine attempts to make sure the most relevant and popular pages turn up early in the search. In a search engine like Google, Web sites aren't ranked individually. That is, there's no such thing as the world's most popular Web page (in the eyes of Google). Instead, pages get ranked in terms of how they stack up against whatever search keywords have been entered. That means that a slightly different search (say, "green tea health" instead of just "green tea") could get you a completely different set of results.

In theory, there's no limit to the types of information you can place inside a meta tag. For example, FrontPage is notorious for inserting meta tags that identify that your pages were built with its software. (Don't worry; once you understand meta tags, you'll recognize this harmless fingerprint and you can easily remove it.) Another Web page might use a meta tag to record the name of the Web designers who created it, or the last date it was updated.

Although there's no limit to the information you can put in meta tags, in practice, there are two meta tags that are more important than all others, because they're the only ones heeded by search engines. These are the description and keywords meta tags. These details, in conjunction with the <title> tag, constitute the basic information the search engine needs to know about your page. That means you need to make sure you put these tags in every page you create.

11.3.1. The Description Meta Tag

The description of your page is the simplest part. You simply need 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."> 

This tag is split over two lines in this book because there's not enough room for it on one line. But when you're composing a description in your HTML, file make sure you don't hit the Enter key. If you do, your description could get broken up over multiple lines when it appears on a search results page.

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 use the description text, while others rely more heavily on the text in the page. Even if your description is shown on a search result page, you'll see only the first part, followed by an ellipsis () where it gets cut off.

The Importance of Titles and Image Text

A search engine draws information from many parts of your page, not just the meta tags. To make sure your pages are search-engineready, you should check that you're using the <title> tag in all your pages, and alternate text with all your images.

Alternate image text is the text that's shown if an image can't be retrieved. You specify this text using the alt attribute in the <img> tag (see Section 7.1.2). Search engines also pay attention to the alternate textfor example, Google, uses it as the basis for its image-searching tool ( If you don't have alt text, Google has to guess what the picture is about by looking at nearby text, which is less reliable.

The <title> tag also plays several important roles. You already know that it sets the text in the title bar of the browser window. The <title> tag also helps identify your Web page in a search (see Figure 11-4). Finally, the <title> tag contains the text that appears in the bookmarks menu if a surfer bookmarks your page. Keep that in mind, and refrain from adding long slogans. "Ketchup CrusadersBecause ketchup isn't just for making food tasty" is about the longest you can stretch a title, and even that's iffy. On the other hand, remember not to omit essential information. The title "Welcome" or "New Page 2" (a FrontPage favorite) isn't very helpful.

11.3.2. The Keyword Meta Tag

The keyword list should contain a list of about 25 words or phrases (or less) that represent your Web site. Each word in the list is separate 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 key 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 page stuffed their 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 approachthey 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.

Note: To find out which Web search engines still support the keyword list, check out

Even though search engine support is spotty, it's a good idea to keep using the keyword list. Just don't expect it to do that much for you.

Keyword Tricks

Can I make my Web site more popular by adding hidden keywords ?

There are quite a few unwholesome tricks that crafty Webweavers use to game the search engine system (or at least try). For example, they might add a huge number of nonmeta-tagged keywords, but hide the text so it isn't visible on the page. (White text on a white background is one oddball option, but there are other style-sheet tricks.) Another trick is to create pages that aren't really a part of your Web site, but are stored on your Web server. You can fill these pages with repeating keyword text. To complete this trick, you can use a little JavaScript code to make sure real people who arrive at the page are directed to the entry point of your Web site, while search engines get to feast on the keywords. (JavaScript is discussed in Chapter 14.)

As seductive as some of these tricks may seem to lonely Web sites (and their owners ), the best advice is to avoid them altogether. The first problem is that they pose a new set of headaches and technical challenges, which can waste hours of your day. But more significantly, search engines learn about these tricks almost as fast as Web developers invent them. If a search engine catches you using these tricks, they may ban your completely, banishing your site to the dustbin of the Web.

If you're still tempted, keep this in mind: Many of these tricks just don't work. In the early days of the Web, primitive search engines gave a site more weight based on the number of times a keyword cropped up, but modern search engines like Google use much more sophisticated page-ranking systems. A huge whack of keywords might not move you up the search list one iota, and it'll make you as popular as Enron.

Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
Year: 2003
Pages: 135

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: