Chapter 4

Making Your Page Search Engine Compatible

In This Chapter

  • Conquering HTML constructs
  • Using clean code
  • Designing with sIFR
  • Externalizing code
  • Validating HTML with W3C
  • Choosing the right navigation

In this chapter, you get down to the nitty-gritty stuff that makes your page stand on its own. In addition to worrying about links or content, you have to get the nuts and bolts right. Your SEO strategy is only as strong as its weakest link, so make sure that every part of the chain is forged as tough as you can make it. Paying attention to the small stuff pays off big-time in the long run.

Success with on-page optimization, the changing of the underlying code of a web page for SEO reasons, isn't something that you can just guess at or just hope that you luck out. You need to understand every element of a web page and use it to its fullest potential. Knowing how spiders are going to see and react to your page is absolutely critical to your optimization efforts. For example mistakes with JavaScript can lead to a spider trap, where a spider gets caught in an endless loop and is forced to abandon the page because it has no other alternative. In this chapter, we cover the things that make your page search engine friendly and what the biggest pitfalls are. Getting these elements right is essential if you're going to obtain and retain traffic and rankings in the long term.

In this chapter, we show you how to create clean, attractive HTML pages that properly render in the browser and give search engines a clear path to index the page and understand its value to their users. You discover how to write every part of your page, from your HTML code to your JavaScript and CSS, in a way that supports your ranking goals.

Optimizing HTML Constructs for Search Engines

At first, the web was made up in great part by research papers posted by academics. They were formatted in a specific way, and most of them were heavily text-based. These days, the Internet contains document types of every shape and size. Images, videos, and Flash pages — you name it, someone's built it — all serve their purposes in the construction of a successful website. (You can find more about optimizing media content in the “Choosing the Right Navigation” section, later in this chapter and still more on video optimization in Book V, Chapter 2.) Nevertheless, when you get down to the basic structure for a web page, you’re still looking at HTML.

HTML pages are the building blocks of your website, so it's worth it to take the time to construct them well. Unlike humans, search engines evaluate pages based on the code. Because search engines cannot understand images or similar content forms, that content is invisible to them, leaving them to only see the content in the text of an HTML page. You want to write your code so that it will be very easy for spiders to understand. You don't want to bury the content down in the code. This is intuitively obvious to web designers and seasoned search engine optimizers, but many people don’t take the time to put it into practice. In the following sections, we break down, define, and explain how you can best optimize each of the so-called on-page elements of a successful web page.

The Head section

The task of optimizing every HTML page begins in the Head section. The Head section is where search engines are first introduced to your page and where they first discover what the page is all about. This section makes that infamous first impression that you only get one shot at. But the job of the Head section isn't only to impress the search engine. Search engines like to share the wealth when it comes to information, so parts of your Head section get starring roles on the search engine results page. Time to get those parts camera-ready!

The four important tags in the Head section are the Title, Meta description, Meta keywords, and Meta robots tags. Metadata is, quite simply, data about data. It is descriptive of the rest of the page. Each of these tags helps to define for the search engine what's coming up in the page and how it relates to other pages: the first three by defining the content, and the last by defining how the search engine should handle the information and links on the page. You can find out more about how these first three tags can affect your site’s search engine rankings in the next few sections. For more on the Meta robots tag, jump to Book VII.

Optimizing Title tags for ranking and branding

The undisputed headliner of the Head section is the Title tag. Although the various search engines out there don't tell us how important any one element is in their algorithms, most industry experts agree that the Title tag is one of the most critical. Because the Title tag not only shows up in your browser window but also in the search engine results, it's easy to infer that this tag naturally has some impact in the search engine's ranking algorithms. The following code (and Figure 4-1) shows you how a Title tag appears in HTML.

<title>Good Titles Use Keywords like Ford Mustang 1967 specs</title>

image

Figure 4-1: The Title tag in Google search results.

Getting this tag right has many benefits — increased ranking, branding, and click-throughs. Getting it wrong severely hinders your page’s chances at ranking in the search engine — Title tags that appear on more than one page across a website (duplicate Title tags) are considered by search engines to be a signal of a low-value page and are filtered. Meanwhile, poorly written Title tags won't garner click-throughs or serve branding. Leaving out the keywords hurts your chances to rank for those words.

The Title tag, although short, tells the search engine what your page is about. The maximum number of characters allotted for the Title tag is approximately 45–70 characters, depending on character width. (Character width matters here because the Title tag length is actually based on a maximum width of 512 pixels, not an exact number of characters. Because each character has its own pixel width, the Title tag recommendation can’t be based on an exact number of characters.) You have just a few words to inform, entice, and reinforce your brand to search engines and their users. In order to get your message through, you need to be specific with keywords. Entice searchers with calls to action and use “research” words like how to and information. Figure 4-1, shown previously, displays a Title tag as seen in Google's search engine results pages.

So what do you do about this short, yet critically important, piece of content? In order to maximize the effectiveness of your Title tag, you need to make some solid decisions first:

  • Focus: Your page must have a single explicit subject. Put keywords related to that focus in the Title.
  • Silo: Your page must support the theme of the page above that page, and it must be supported by the pages that link below that page. Theme-level keywords should appear in the Title.
  • Branding: Some pages are critical to support branding; others are not. If branding is an issue, include branded keywords in the Title.

After you decide on your focus, theme, and brand emphasis, you’re ready to start writing your tag. Even though the actual length of your Title tag varies depending on your industry standard, you can follow some basic guidelines to get started. The two most important terms to remember are unique and keyword-rich. You need to make sure that you're writing unique, keyword-rich titles for your pages. The title of your page should belong only to that page, and it should not be used anywhere else on your site. If you're following your focus, theme, and branding guidelines (see Book II, Chapter 4 for more on themes and siloing), you should already be using words in a combination that won't be repeated somewhere else. Your title should not be sensational or contain keywords that you don't expect to rank for. Be sure that you have only one Title tag per page. Duplicate Title tags are a severe issue that could lead to filtering of your pages by the search engines, denying them the ability to rank for key terms.

Your title should be fairly short. Google usually cuts your title off before 70 characters, so you need to get your message out right up front. Although Google indexes the whole tag, you want users to see your relevance immediately.

tip Put the keywords up front, and make them enticing for people to click through. Notice that in Figure 4-1, shown previously, the words search engine optimization and SEO are bolded wherever they appear in the Title tag. This is because Google sometimes bolds search query words, and query concept synonyms, that appear in the title, which may lead to higher click-throughs. Eye-tracking studies have shown that people are naturally drawn to boldfaced type. (Learn more about how Google connects information about various people, places, and things to generate concept synonyms in the Knowledge Graph portion of Book I, Chapter 3.)

If you’re working to establish your brand, put your company name at the end, unless your brand name is a main keyword in your SEO strategy.

Be aware that there is a difference between being keyword-rich and being spammy. Spam by excessive repetition of keywords only hurts your Title tag. Always strive to play within the acceptable boundaries when it comes to SEO. The margin of safety changes all the time and without any warning at all.

Writing a Meta description

Working your way through the tags in a typical Head section, the next stop is the Meta description tag. Search engines use the Meta description tag to create the snippets you see beneath the page title in their results, so this is an important tag to get right. Write your Meta description like a sentence, describing what visitors can expect to find on the page after they click through from the search engine. If you fail to provide a Meta description, search engines often select text off the page that may or may not be a good representation of your page's real value. It is in your best interest to craft a unique, targeted Meta description tag for every page. The following code displays a sample Meta description tag as it would appear in the raw HTML of a web page:

<meta name="description" content="Your description tag should use keywords, describe the theme and purpose of the page, and be fairly short. It is structured as a sentence.">

The Meta description should be about twice as long as your Title tag. Like the title, words used in the search query that are also found in the description may be bolded, giving your listing another opportunity to catch the eye of the searcher. Google displays approximately 160 characters for the description, sometimes extracted from the page content. If the Meta description is used for search engine results, you must put your best information right up front. No one but the spider sees it if you don't. Figure 4-2 shows a Meta description tag appearing in Google's search results.

image

Figure 4-2: Result descriptions in Google search results are often the page's Meta description tag.

Your description should answer the question, “What is this page about?” Try not to repeat any word more than twice; any more than that may look unnatural to users and to the engines. Ask yourself what your target audience would be looking for when searching for what your web page offers, and write your metadata to address that person. Notice in Figure 4-2, shown previously, that descriptions are in sentence form and give you a very clear idea about the content on the linked page.

remember Like your Title tag, your Meta description tag must be unique; that is, it has to be unlike any other tag on your site and targeted to the content of the page it’s on. If you repeat text in a tag, you run the risk of the search engines identifying the page as duplicate content (that is, content that appears elsewhere on your site or the web). Duplicate content is commonly filtered out of the search results by the engines because it’s not in their users’ best interest to show the same or similar pages more than once. Even if everything else on your page is unique and useful, a duplicate tag in the Head section can spell disaster for your rankings. Think of your metadata as the advertisement and the content as your product. Don't be guilty of false advertising!

Writing a useful Meta keywords tag

In the past, it used to be simple (well, okay, easier) to get ranked in the search engines. Use your keywords in the page's metadata (including Title and Meta description tags, as well as the keywords tag) and throughout the displayed body of the page, and within days or even hours, you could be on the top of any search engine you liked: Infoseek, AltaVista, Excite, or Yahoo. But times have changed, and search engines have developed algorithms that are much more sophisticated, containing many more variables. The Meta keywords tag, which is basically a place to list all the relevant keywords for your page, is very easy to abuse because it's not a user-visible tag and invites keyword stuffing — putting every word, not just relevant ones, into the content of the tag. As a result, the Meta keywords tag suffered a serious devaluation. To be frank, you are never, ever going to rank on the basis of your Meta keywords tag for any competitive term.

So why still use it? Although some engines claim that they don’t even bother to index the Meta keywords tag, some still read and store it in the data portion. Although the Meta keywords tag is not a major factor in rankings, it’s still better to sweat the small stuff and do everything right from the get-go. You can create a Meta keywords tag in only a few minutes, and search engines don’t penalize you for having a Meta keywords tag on a page (unless you spam by keyword stuffing the tag). You can never go wrong by using a Meta keywords tag, and you only hurt yourself if you don’t use this valid piece of HTML data. The following code shows you how to format a Meta keywords tag in HTML:

<meta name="keywords" content="First Keyword Phrase, Second Keyword Phrase, Repeated Keyword, Keyword">

Optimizing a Meta keywords tag is simple. Essentially, the only thing this tag requires is that you list all the keywords and keyword phrases that are important to your page. A general rule is that if a keyword was important enough to be included in your title and Meta description, it’s important enough to include in your keywords tag. As a best practice, order your keyword phrases from longest to shortest (four-word phrases, and then three-word phrases, and then two-word phrases, and so on). This keeps you organized and gives the search engines the most targeted and usually the most valuable words right up front.

warning Don’t go overboard. Remember, excessive repetition could be considered spam. Try not to repeat any single keyword more than four times in the Meta keywords tag. If you stick to a keywords tag approximately twice the length of your Meta description tag, you’re playing on safe ground.

The Body section

Other than the page title, which appears at the very top of your browser window in the page’s tab, all the user-visible content is located in a page’s Body section. As your site aims to satisfy the needs of users and search engines alike, dedicate ample time to producing high-quality body content.

After a search engine spider reads the summary-style information provided in a page’s Head section, it should find that the content within the Body section also supports the established keywords. The vast majority of text content, links, and images are located in the Body section. Having a significant amount of keyword-rich text content in the Body section is absolutely necessary to achieving a web page optimized for search engines.

Headings

Within the Body section, the heading acts like the headline of a newspaper, identifying the topic of sections or paragraphs of a web page. As such, it plays an important role for search engines looking to classify the subject matter of the page. Because of this, search engines give heading text significant weight in their ranking algorithms; thus, it’s very important that you optimize headings in line with your ranking goals.

As with a table of contents or outline, the heading is usually made up of short phrases, generally not complete sentences. Within the page, there are often sub-sections with their own subheading tag designations. Hence, an H1 tag may be followed by H2 tags. Figure 4-3 displays an H1 heading tag used in content.

image

Figure 4-3: A heading on a page.

tip When you’re writing an H1 tag, you must include the most important keywords of that web page, which are likely to be the keywords also used in the Title and Meta tags. When seen together with the other keyword-optimized page elements discussed in the following sections, all of your page's significant text works together to support the spiders' recognition of your keywords as your site's area of expertise. For this reason, we recommend that you always use at least one H# tag on every page of your site. You can use multiple headings as needed, but they should always be used in hierarchical order. An H1 tag is given more weight than an H2 tag. It's rare that there would be more than one H1 on a page because pages generally only have one major subject. (There are exceptions to this rule; for example, we have multiple H1 tags on our homepage at www.bruceclay.com because we have a very long page that is defining multiple top-level topics.)

All other subjects naturally fall below that top-level listing. Following an H1 tag, the next heading on the page can be represented by the H2 tag. In other words, heading tags should not be used out of order. The H1 tag should be followed by the H2 tag, which can be followed by the H3 tag, if needed.

warning Don’t use excessive headings: Too many can actually dilute the theme of your page. Think of this structure as a table of contents, and you can’t go wrong.

Each heading throughout the page should be unique. Because the purpose of the heading is to summarize the unique content of the page or section, each heading should naturally be unique as well. However, the content within a heading tag should be similar to the content in the Title tag because both share the task of summarizing the page content and including significant page keywords.

Try to keep headings from being too long. Because they are serving as a headline for the page, headings must be concise and to the point. Notice that the heading in Figure 4-3 acts as more of a title describing the subject of the page. A heading should usually be only a few targeted words and never more than a single sentence. Including an entire paragraph in a heading tag would likely be considered spam by the search engines. Here are a few points to remember about headings:

  • tip Use heading tags as a headline for your page.

  • Use heading tags in hierarchical order, following an H1 with an H2, an H2 with an H3, and so on.
  • Keep headings short and unique.
  • Don't use headings for styling text. Use CSS instead. For more on CSS, check out HTML5 and CSS3 All-in-One For Dummies, 3rd Edition, by Andy Harris (John Wiley & Sons, Inc.).

Content

Search marketers often say that content is king. Regardless of its relationship to royalty, tests show that content weighs heavily in search engine rankings. Although search engines are rapidly developing the capabilities to index other types of media, in most cases, you're dealing with a search engine spider that is deaf, dumb, and blind. Thus far, spiders cannot see images, watch videos, listen to podcasts, fill out forms, or use any other advanced features of your website, although they can detect that those engagement objects are present, and they’re expanding their ability to index that content. For this reason, it's imperative that you have enough sentence-structured text content on your page for a search engine to adequately determine what your page is about. The amount of content necessary to be competitive varies by industry, but the trend is that the amount of content has steadily increased over time for all industries. Discover how much content is right for your industry by doing competitive research (as described in Book II, Chapter 1).

If you’re just starting out and haven’t done competitive research, plan for a minimum of 450 or more words of good, relevant, useful text content on your important pages. Your content should always be unique to the page it's on and should naturally incorporate the keywords found in your title, description, and headings. The reason for this is simple: The first three tags define what the page is about; therefore, it is only logical that those words are repeated again in the text content on your site. Don’t fall into the trap of discussing something without ever naming what it is or relying on the images on the page to provide context. Remember that the search engines aren't able to look at the picture and understand what you’re talking about. If your page is about Ford Mustangs, you need more than a picture of the car to let the search engines know that. Say what you mean.

tip Use synonyms and related words in order to reinforce your keywords. When discussing shoes, you should also be using words that help define what sort of shoes. Are the related words heel, leather, instep, size, and designer? Or are they horse, anvil, iron, and mare? You can see that many very different mental pictures are painted by placing the keyword shoes in context.

There’s practically no maximum number of words you can put on a page: A search engine just keeps reading. (Your visitors might not, though! If you don’t have anything interesting to say, stop talking.) You should have all the words discuss the same subject matter for SEO, but long pages are not frowned upon by search engines. There used to be upper limits on how large of a page the search engines would index, but those limits have gone out the window. (Note, however, that page speed — how fast your page renders in a browser — is a factor, and page sizes affect that speed. We discuss this in greater depth in Book VII, Chapter 1.)

And although the search engines might be happy to read your 50,000-word opus, keep user fatigue in mind. If you find yourself discussing several topics on a very long page, consider breaking that discussion up into multiple pages. This adds depth to your site by expanding the number of pages you have on a keyword phrase and also allows you to manage the site’s themes.

remember When it comes to formatting the text on your page, remember, people tend to scan text on the Internet. Keep paragraphs short and direct. Give the facts as concisely as possible. Customers don’t want to spend a long time reading if the web page isn't going to satisfy their requirements. Tell your customers who you are, what your product is, and why they should choose you over your competitors. Use lists, as well as bold and italicized text, to direct your visitors’ eyes to important words and concepts. Bulleted lists are ideal for product pages, which users scan to pick up important information.

If you are writing content for your own website, your first response might be to feel frustrated. What on earth are you going to write about? Everyone knows everything that you could possibly tell her, and you’re not a writer anyway. But that’s just the thing: People don’t know everything, and you are an expert on the topic even if you’re not the world's best writer.

For most people, the hardest part of adding content to their websites is the writing of the content in the first place, but it doesn't have to be. There are lots of themes for you to write on and many topics available for you to write about. For e-commerce sites, this might include a well-written product description, user reviews, tips and tricks, or the inclusion of some frequently asked questions.

Remember that many people on the web are there to do research. You should address the concerns that your visitors may have and give them a reason to buy whatever you are selling (literally or figuratively). Search engines look for research words, like how to and tips, as markers that indicate that page will satisfy a user doing research.

Suppose, for example, that you’re in the business of selling cowboy boots. You are an expert in your area. Brainstorm everything you can think of that relates to cowboy boots, even if it’s only somewhat related. After you have all your ideas down, pick a few of the best. For example, you probably want to focus a section of your site on the keywords [buy cowboy boots]. Everyone, you think, knows about how to buy boots. It’s just a matter of finding the right fit and style. You don’t need to explain how to buy cowboy boots to your site’s visitors. But it’s one of your keywords, so you sit down and write all the obvious information.

Of course, you know how to check the fit of your boots and which styles work best for which people. It’s obvious to you that your jeans should be tucked inside your boots if you’re working outside and that you should take certain steps to care for your boots.

But most people don't know these things. That’s why they’re coming to your site in the first place. Your expertise is a valuable resource for the development of content. Explaining something that is obvious to you is probably the best way to introduce new customers to your products. If a visitor who is an expert comes into your site, having correct and informative content reinforces to him or her that your site is worthwhile.

Write your first draft with the page’s keywords in mind. Use your keywords as a guide for the content. Tape them to the side of your monitor or put them at the very top of the document so they’re on your mind as you write. Don’t worry about keyword densities or forcing the words in. If it doesn’t sound natural to use the keyword, don't use it. The first draft is just to get the information out.

Take a look at the tone of your piece:

  • Match your audience. Are you writing to the right audience? Baby boomers and teenagers have very different ways of expressing themselves, not to mention widely different cultural touchstones, and writing the same way to each of them is probably not going to work. You have to speak their language.
  • Engage the reader. Your content should get users involved and offer them ways to connect to the material.
  • Solve a problem. Does your content solve a problem or help the customer make a decision? Fighting fear, doubt, and uncertainty increases your conversions as visitors learn to trust you.
  • Educate. If your website deals with a highly technical area that your customers probably don’t know enough about to ask intelligent questions, have you educated them enough to feel comfortable in making their decision?

Revise your draft with these ideas in mind. Knowing your audience means putting in the kinds of words that they will be looking for: the same kinds of words that help them understand what the best choice of products is for them.

tip After your next draft, ask someone else to read it over for you. The best person for this task is someone who fits the profile of a site visitor. Have that person read it aloud to see if it is easily readable and answers his or her questions in an easy to understand way. If not, revise the content to meet that person’s understanding. You might even find that you're going to need another page of content in order to answer the questions.

After you have a final draft, incorporate your final product into the destination page, and use a page-rating tool to determine the validity and strength of the document. Tweak it if necessary. Keep in mind how the content supports the website theme as a whole. This ties into the linking strategies discussed throughout Book VI.

The final thing to remember about writing for search engines is that there is no magical formula for writing the perfect copy. You’re going to have to put in hard work and pay attention to detail to meet the needs of both the search engines and your human visitors. Start writing and go from there.

Links

Links within the Body section of a web page provide anchor text, which is the text that the user clicks on in order to follow the link to a new page (see the following code). When they are measuring the relevance of the web page, search engine spiders consider the anchor text of links pointing to that page. The keyword used within the anchor text of the hyperlink is not added to the keyword frequency of your website (how many times a keyword is used and how far apart in the text it appears), but it does add to the relevance of the target web page in the search engine.

<a href="http://www.mydomain.com/bikerboots.html">Motorcycle Boots</a>

Links have a lot of power when it comes to a website appearing high in the search engine results page. How many links a particular page or site has is part of the algorithms search engines use, simply because it’s saying that your page or site has meaning and carries a certain amount of expertise. It’s like being the most popular kid in school because everyone says you have all the answers.

With anchor text, you’re basically describing to the search engine what the page you’re linking to is about. So if you provided a link with the words Pink Cowboy Boots as the anchor text, the engine reads that and adds it to the relevance of the page. So if all the hyperlinks to that page within your website say the same thing — that it’s a page about pink cowboy boots — the engine’s going to pick up on that like a giant blinking neon arrow and say that your page is about pink cowboy boots when someone enters that search query.

Two types of links can be used in the Body section: relative links and absolute links. An absolute link is a link that contains the whole file path, so when it appears in code, it begins with http://, as shown here:

<a href="http://www.classiccarcustomization.com/fords/mustangs/tireoptions.html">

That’s the whole file directory in the link itself. A relative link references a file located in a physical directory relative to the current page or the root of all directories, so it can simply start with the page name and leave off the http:// and domain. If you’re on the page www.classiccarcustomization.com/mustangs/paintoptions.html, you could use <a href="tireoptions.html"> to reach http://www.classiccarcustomization.com/mustangs/tireoptions.html.

You can use two periods before the filename to indicate that the page is located one directory up (closer to the root) from the directory the page is located in. For example, the HTML on the same page — <a href="../tireoptions.html"> — indicates that the link goes to a page located at www.classiccarcustomization.com/tireoptions.html.

Relative links are a bit of a shortcut, and on the whole, we recommend that you don’t use them, especially if you’re building your site from the ground up. When you use a relative link, it works only in relation to the page that the link is contained on. So tireoptions.html is only going to work if there’s a mustangs/tireoptions.html for it to link to.

If the directories were to get switched around or taken out for whatever reason, the relative link would no longer work: Where it linked to no longer exists. So if the page with the link on it (in this case, paintoptions.html) was moved to the /mustangconvertible directory, the relative link of <a href="tireoptions"> would not work anymore because there's no tireoptions.html page located in the /mustangconvertible directory. A link to /tireoptions.html and an absolute link would still work. Without the leading slash (/), the link goes to the current directory only.

An absolute link is easier to maintain than a relative one because it is very clear what you’re linking to and why, and there will be no confusion if the location of a page changes. Although fixing one or two broken links isn't a big deal, if every link on your site is relative, you'll have a huge repair project every time you decide to reorganize your page. And forget about reusing snippets of code from page to page. Relative links, unlike absolute links, rarely still take you to the page you intended if you happen to reuse the code on another page.

Bottom line: The absolute link <a href="http://www.classiccarcustomization.com/mustangs/tireoptions.html"> always gets you to the Tire Options page. A relative link like <a href="tireoptions.html"> gets you there only if you’re starting from the same directory. In the long run, absolute links are less of a hassle.

Images

Images in the body of your site are also pretty important. Not only do they add to the overall aesthetic of your website and provide a visual of the product if you’re trying to sell something, they also add weight and relevance to your ranking. Images aid users and they provide search engines with additional clues about the page. Images can also appear in vertical search engines (search engines that look for a specific file type only).

Images should contain keywords in their filenames (when they’re named properly; see Chapter 1 of this minibook for more info). A search engine can read the filename and add it to the overall relevancy of the page. Also, although search engines cannot see images, they can read Alt attribute text. Alt attribute text is the HTML code that describes the image. The Alt attribute is designed to be an alternative text description for an image. The Alt attribute displays before the image is loaded (if it's loaded at all) in the major browsers; the Alt attribute also displays instead of the image in text-based browsers, such as Lynx. Alt is a required element for images in order to help vision-impaired people, and it can only be used for image tags because its specific purpose is to describe images. Stuffing many keywords into the Alt attribute text is considered spam and will pull your site from a search engine’s index (list of websites they crawl during a search). Instead, Alt attribute text should be a short descriptive phrase that clearly describes the content of the image. In the sample code, "1967 Ford Mustang with dented rear fender" is the Alt text for the image named ford.dented.fender.jpg:

<img src="ford.dented.fender.jpg" alt="1967 Ford Mustang with dented rear fender">

Make your images relevant to the overall content of the page. You can’t have a picture of a duck on a page about classic cars, for instance — not unless the duck is driving a classic car. Another way a search engine can “see” an image is by the descriptive text around the image, so the image had better be relevant to the text describing it. As we mentioned previously, the image name, if it contains keywords, also helps to identify the image to the search engines. The identification of the image related to the keywords of the page it’s on allows the image to contribute to the page as content. This helps your relevancy.

Enriching Your Site with Rich Snippets

Earlier in this chapter, we tell you that snippets are the sentence or two that search engines show in the search results below the page title. Usually pulled from the Meta description tag, the point of the snippet is to describe to visitors what they can expect to find on the page after they click through from the search engine.

As with traditional snippets, rich snippets also appear in the search engine results pages (SERPs) under the page title. The main difference is that traditional snippets pull in text that describes your content, whereas rich snippets can actually add a visual — and sometimes interactive — element to your SERP result listing.

Although this list is ever evolving, at the time of publication, both Bing and Google support rich snippet markup for seven categories:

  • People
  • Products
  • Reviews and ratings
  • Businesses and organizations (including name, address, telephone number, geo location, and logo)
  • Recipes
  • Events
  • Music

Bing also supports a Breadcrumbs snippet, and Google also supports markup for video content, TV episodes, and software applications.

Figure 4-4 shows two rich snippets, Ratings and Recipes, displayed in a Google search listing.

image

Figure 4-4: A SERP listing showing rich snippets for recipes, which can include an image, ratings and reviews, cook time, and calories.

A good way to wrap your head around snippets and rich snippets is to think of them as a preview of your content that is created to set expectations and naturally encourage users to click through to your site.

Marking up content for rich snippets

Rich snippets are created by adding special lines of code called structured data markup to your website. Essentially, adding structured data markup to your HTML is like adding big neon arrows that make it clear to search engines what the people, places, or things (known in the search world as entities) are on your website.

To make sure all the sites are using a common vocabulary to describe the entities on their web pages, structured data languages like microdata (including Schema.org), microformats, and RDFa exist.

If you are a web developer, we encourage you to choose a structured data format and write your own rich snippet code. If you are not a code person, fear not. Thanks to the Google Structured Data Markup Helper, you don’t need to be a microdata or Schema.org expert to add rich snippets to your web pages. All you need is a basic knowledge of HTML and the ability to copy and paste code into the HTML of your web pages.

Here’s how to automatically generate your rich snippet markup using the Structured Data Markup Helper:

  1. Decide which web page you want to create a rich snippet for.

    The Structured Data Markup Helper tool can generate snippet code for only one web page at a time.

  2. In your web browser, navigate to the tool at www.google.com/webmasters/markup-helper/u/0/ (see Figure 4-5).
  3. With the Website tab selected (not the Email tab), choose a content type that best represents your web page (Google calls it a “data type”).

    Google provides ten options; if you’re not sure what type of content you’re working with, it’s probably an article.

  4. Enter the URL of the web page you want to mark up.
  5. Click the Start Tagging button.

    The Structured Data Markup Helper will load two columns. In the left column, you see a page that looks just like your web page; in the right column, you see a list titled My Data Items.

    To generate rich snippet markup, use the mouse to highlight the items listed in the right column within your website in the left column. With the item highlighted, use the drop-down menu that appears to identify the item. (Is it the brand name? The logo? The price?)

    For example, if you click the logo image in the left column, choose Brand and then Logo from the drop-down menu, as shown in Figure 4-6. (We know that Logo is under Brand in the drop-down menu because that is the way it is listed in the My Data Items column to the right.)

  6. If you highlight the product price in the left column, choose Offer and then Price from the drop-down, as seen in Figure 4-7.
  7. If there are any data elements you can’t highlight in the left column, such as the web page URL, click the Add Missing Tags button at the bottom of the right column and add the tags, as seen in Figure 4-8.
  8. When you’ve identified all your data items, generate your rich-snippet code by clicking the Create HTML button in the right column.

    You see the right column expand to show the HTML of your web page. Within that HTML view, you see several code phrases highlighted; this is your rich-snippet markup code!

  9. Using the HTML view as a reference, copy and paste the highlighted lines of code into your own web page HTML.
  10. After you’ve added rich snippet markup to your web page, use the Structured Data Testing Tool (www.google.com/webmasters/tools/richsnippets) to test that your code snippets have been added correctly.
image

Figure 4-5: The Structured Data Markup Helper asks you to choose a content type.

image

Figure 4-6: Using the Structured Data Markup Helper to identify your logo as an entity.

image

Figure 4-7: Using the Structured Data Markup Helper to identify your product price.

image

Figure 4-8: Add missing tags manually if there are elements you can’t highlight in the Structured Data Markup Helper.

warning Always be careful when altering your website code. Something as small as a period in the wrong place can cause errors to appear on the live website. Although the Structured Data Markup tool lets noncode writers easily generate rich snippet code, we recommend as a best practice that you not make any permanent changes to your website code unless you feel confident that you know what you’re doing. If you think you know but you’re not sure, ask your web developer for help.

Understanding how rich snippets affect rankings

To help you grasp how rich-snippet markup can potentially improve SERP rank, we need to revisit the semantic search topic that we cover in Book I, Chapter 3.

In a semantic search world, the search engine begins with user intent and tries to understand the query itself, not just the keywords in the query. In other words, the search engine wants to understand the meaning and context of the query’s intent, just as a human would. To do this, semantic search technology seeks to extract entities (people, places, and things) from its database as answers and display personalized search results that are just right for the individual user.

When you are adding rich snippet markup to your pages, essentially you are using a special kind of code (structured data markup) to give your content more meaning and context. Optimizing your content with rich-snippet markup can also help the search engine better understand your content as an entity (person, place, or thing).

In other words, rich snippets can help Google more thoroughly understand your content, the context of your content, and the relevance of your content in relation to specific search queries.

So, although Google says that rich snippet markup on its own does not directly boost your rank, the added context provided by rich snippets very well may.

The context your rich snippet markup gives Google can also help your SERP rank by helping the search engine populate the Knowledge Graph database (read more about the Knowledge Graph in Book I, Chapter 3). By helping to inform and expand the Knowledge Graph, your semantic markup also helps Google more thoroughly understand and index your content. This can lead to improved rank because added contextual understanding may help Google see your web pages as more relevant to the search query.

tip Google and Bing never promise to use the Meta description text or the rich-snippet markup you supply; sometimes they use it and sometimes they don’t. Even without a 100 percent guarantee, including rich-snippet markup whenever possible is still worthwhile because SERP listings with rich snippets tend to see a significant increase in click-through rate.

Plus, even when your rich snippets don’t show up in SERP results, they still supply search engines with structured data that helps them better understand (and rank!) your content.

Using Clean Code

When designing or building your website, keep the code as clean as possible. If you have useless tags in your code, get rid of them, and code in as little markup as possible. That means no extraneous tags lying around in the HTML. You want to streamline your site’s code so it's an easy read for the search engine spiders. If you can define something in 200 tags instead of 400, cut out all the tags you don’t need.

Code gunk buildup can happen if you’ve cut and pasted code from another source (like an outdated web page of yours) or if you’ve been working on a particular page for so long that it’s acquired excess tags. Go through and remove all of the extraneous tags and code from your page. Simplifying your code streamlines the site and makes it easier for the search engine spiders to read. If spiders read too much redundant stuff, they’re less likely to assign a lot of weight or relevancy to your page and are more likely to throw out the page.

With clean code, the goal is to have a high amount of content with the least amount of markup. This means there’s more content going on than HTML coding. Figure 4-9 shows two different pages’ HTML code side by side. On the left is a messily coded image of a table, and on the right is the clean version of the same table. Note the difference between the messy code and the clean code: The clean code has a higher content-to-code ratio. The less code a search engine spider has to read, the faster it can crawl your page. And the sooner it gets to the content of your website, the better. The first 200 words of a page carry the most weight, so it’s important to get the spider to the actual content as soon as you can.

image

Figure 4-9: Note how the clean code has more content in it.

Making Your Site W3C-Compliant

One of the ways to get your code nice and clean is to validate it. Validating code means making your website W3C-compliant. The World Wide Web Consortium (W3C) is an international consortium where member organizations, a full-time staff, and the public work together to develop web standards. The W3C’s mission statement is “to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.”

W3C goes about achieving this mission by creating web standards and guidelines. It’s basically like health code guidelines for a restaurant. A website needs to meet certain standards in order to be as least imperfect as possible. Since 1994, W3C has published more than 110 such standards, called W3C Recommendations.

A compliant page is known to be spiderable and to have links that are crawlable, so although the search engines do not require W3C compliance, it's not a bad idea. If you have complex or just plain ugly web page code, or if you’re having issues getting your pages crawled and indexed, validating your code to W3C standards might help.

tip On the front page of the W3C’s website (www.w3.org) is a sidebar called W3C A to Z, which contains all sorts of links. Bookmark this page: These links are a great reference to help you understand the standards that the web is built on.

Here’s something about search engines: The harder they have to work to read your site, the less often and less thoroughly the search engines index your site. Because more content tends to mean more authority, you are less likely to receive top ranking. In fact, if a search engine has to work too long at reading your page, it might just abandon it all together.

So it’s a good idea to follow the W3C standards, simply because they make for a faster, more efficient page that is set up the way a search engine expects to find things. It’s like having your house swept, cleaned up, and in order when the spiders come to visit: It makes them like what they see. (Internet spiders, that is. It doesn't work that way for the arachnid variety.) If your site doesn’t comply with the W3C standards, the search engines might not crawl all your pages on your site. Because you can’t rank pages the search engines don't know about, that's a big problem.

To comply with W3C, every page should declare a doc type (document type) and validate itself. To declare your doc type, include a line at the very top of your HTML code, which declares the document as an HTML document and identifies the type of HTML you are following. Because HTML has changed since the early days, some versions are different from others. Declaring a doc type is telling the search engine what it’s going to be reading. It’s important to comply with your declared doc type. If you don’t, you confuse the search engine spider, and it takes longer for the spider to crawl your pages.

To validate your page, go to the W3C’s Developer Tools page (http://www.w3.org/developers/tools) and use the free tools on that page, as shown in Figure 4-10.

image

Figure 4-10: The W3C Developer Tools.

These are tools that you can use to basically “proofread” your site in order to make sure they comply with the W3C standards.

Access the Markup Validation Service, shown in Figure 4-11, by clicking the MarkUp Validator link on the W3C Quality Assurance Tools page. Also known as the HTML validator, it helps check web documents in formats like HTML, XHTML, SVG, or MathML. If you plug your site’s URL into the text box and click the Check button, the tool checks your website to see whether the code matches the declared doc type.

image

Figure 4-11: Check your website's code with a markup validator.

The link for the Link Checker tool (see Figure 4-12) appears below the MarkUp Validator link on the main Quality Assurance Tools page. It checks anchors (hyperlinks) in an HTML/XHTML document. It’s useful for finding broken links, redirected pages, server errors, and so on. There are some options for your search — like ignoring redirects and the ability to check the links on the pages linked to from the original page — and you can also save the options you set in a cookie to make it quick to run it again in the future. If you don’t select the Summary Only check box, you can watch it go through each link on the page. Most of the time, you just need to run the tools without making any adjustments, so don’t stress about the options. Many other link checkers are also available out there. The W3C’s tool is great for checking one page (if you were putting up a single new page with a lot of links, for example), but for checking the links in a whole site, we prefer Xenu’s Link Sleuth, which is a great (and free!) link-checking tool that makes sure all your links work. It’s available at http://home.snafu.de/tilman/xenulink.html.

image

Figure 4-12: The Link Checker validator from the W3C.

Click the CSS Validator link on W3C’s Quality Assurance Tools page to access the CSS Validation Service, which validates CSS style sheets or documents using CSS style sheets. As shown in Figure 4-13, it works a lot like the Markup Validation Service. Just put in the URL of the site you wish to validate, and then click the Check button.

image

Figure 4-13: The CSS Validation Service from the W3C.

Validating your CSS ensures that your site looks picture perfect whenever a standards-compliant browser (like Firefox) or spider (like Google) comes by and checks it out.

Externalizing the Code

When you’re working with CSS and JavaScript, it’s important to externalize the code. Externalizing the code is basically putting all your definitions in a file, putting that file on your site, and using a single line of code within your actual pages to tell the browser (and search engines) where to find it. Because the code represents the building blocks of your website, there’s going to be a lot of it. Just the JavaScript for your analytics alone can take up dozens of lines of code, maybe even hundreds. Externalizing your code is streamlining your page-designing process.

Not only does it reduce the size of your page to externalize CSS and JavaScript, giving your browser less to load, but if you want to go in and change all your headings to blue, all you need to do is go to the glossary page where all the terms are defined and change that particular code to blue; the change then appears throughout your website. You don't have to go through every single page and do it by hand. The advantage for SEO is that externalizing your code makes the page code much cleaner, thus making the content-to-code ratio much higher overall.

Choosing the Right Navigation

You can allow a user to navigate your site in several different ways. There’s text-based navigation, which means all the navigation info (links, information about those links, any cool little widgets you have, and so on) is listed in the text. There’s image-based navigation, which means you click an image linked to another page or a section of an image map (the image is on a layer that allows for attaching links and other goodies) and navigate via that link. Then there’s navigation using scripts such as JavaScript or technology such as Flash to build your navigation. For search engine optimization, we recommend that you use text-based navigation. This ensures that the search engine spiders can read and understand it. You can, if you really want to, use any of the other ways to build a navigation system for your site, but they all have significant drawbacks when it comes to search engine optimization.

Image maps

Using an image map for your site navigation doesn't help with SEO because you don't have any anchor text to take advantage of. Your anchor text is important because it tells the search engine what that page you are linking to is about. When a page is linked to the anchor text classic cars, search engines tend to think, “Hmm, this page must be about classic cars.” The more links you have with that anchor text pointing to that page from other pages, the more it’s like a giant blinking neon sign telling the search engine that this page is about classic cars. The search engine then assigns more weight to the link and increases the perceived relevance of the linked page.

Because an image map does not contain any readable text, any text that is contained within the image is not going to be seen by a search engine spider. A spider is deaf, dumb, and blind and can only understand the code on the page; spiders do not see what a human user sees. Any text within the image-map navigation is not counted toward your overall page rank. The search engine can read only the Alt attribute text. And because you have one image for the navigation, that’s only going to be one Alt attribute tag. Some designers break up a big image into several smaller images so that they can use multiple Alt attribute tags, but Alt attribute tags still do not carry as much weight as hyperlinked text, especially because those trying to game the system may be able to deceive a search engine with spam in the Alt attribute tags.

remember When deciding which type of navigation to build, you also want to consider your mobile users and how images load on different devices. (Find out more about designing mobile-friendly navigation in Chapter 3 of this minibook.)

You will also want to consider the possibility that desktop users do not have images turned on in their browsers, usually because they’re still on a dial-up connection and they want pages to load sometime this century. (They are still out there.)

Flash

Another type of navigation system is Flash. Navigation that utilizes nonanimated Flash-file text may be readable by a search engine, but this is only for the latest versions, and search engines still won’t be able to read any of the links or anchor text.

Also, some search engines see Flash files as files separate from the page they’re attached to, and they do not count the Flash content toward that overall web page. Flash can also be annoying because it can break, slow down load time, or start playing unwanted music or videos. On many Apple devices, such as the iPhone and the iPad, Flash doesn’t work at all. In addition, many people choose to turn off Flash in their browsers in order to avoid Flash-based advertisements, and they wind up stranded on your page if your navigation is Flash-based because they won’t even be able to see it.

JavaScript

JavaScript is a program that the search engine spiders attempt to crawl. Both JavaScript and AJAX, which stands for “asynchronous JavaScript and XML,” may be indexed by the search engines. To determine whether your JavaScript is being seen by a search engine, use Fetch and Render (found in Google Search Console), as described in Chapter 5 of this minibook.

Text-based navigation

Text-based navigation is the navigation you should rely on when designing your page. Search engines can read the content of your text and can use the anchor text in the links to assign weight and relevance to those pages. Text is also clean, simple, and easy to use, and you don’t run the risk of users being unable to see it in their browsers because all browsers can read text.

Not only is text easy (search engines and users can easily read it), but it’s also highly controllable and customizable. You can add JavaScript to the text using CSS for increased interactivity or styling and still have it be understandable to a search engine.

A word about using frames

Frames have fallen by the wayside as site design has advanced in the past several years, but a few sites out there still choose to use them. Our advice is to not be one of them. Search engines read a frame as a completely separate page, so if your navigation is in a different frame than your page content, they're being read as two separate pages. Splitting up the relationship between your content is a bad idea. Just don’t do it.

tip If you decide to use images, Flash, or JavaScript for your navigation, at least use a text-based footer on the page that offers alternative text links to your pages and to your site map so that search engines can follow that and can do a read-through of your site.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.220.108.111