Beyond the Basics, Part 2:
Get Noticed with the New Search Engine Optimization (SEO) Checker
What You’ll Learn in This Hour:
. What search engines are and how they work
. What Search Engine Optimization is and why it is important
. How to use the Search Engine Optimization Checker to make sure your site will be found on search engines
. How to troubleshoot errors and warnings from the SEO Checker
After individuals or businesses launch a website, they usually immediately ask one of two questions: “Why is no one visiting my website?” or “Why can no one find my website on Google/Bing/Yahoo!/my favorite search engine?”
The answers to these questions are as varied as they are inaccurate, but they all relate back to the science (or alchemy) of Search Engine Optimization (SEO).
Basically, SEO is a series of techniques and best practices on how you format, code, and write your web pages so that the search engines list them higher in the hierar- chy and you get more visits. The problem is that all the search engines are different, and all of them change on a continuing basis. Because of this, the techniques that work best for high rankings today may be useless—or even detrimental—to your rankings next week.
That said, there are some baseline best practices in place that will always work to help your SEO, and they are easy to follow once you know them. To help you stick
ptg7913109 to those guidelines and ensure that, at the least, search engines understand your
content and help people find it, Expression Web 4 now has a built-in SEO Checker in the form of a new panel. In this hour, you learn how to use this new tool to opti- mize your site for search engines and how to write your code and content in such a way that people and search engines understand it.
One caveat, though: Following the tips and techniques in this hour and getting a perfect score (no errors) in the SEO tool in Expression Web 4 by no means guaran- tees that you will get tons of visitors to your site. To get visitors, you have to have great content, and that’s entirely up to you.
What Is a Search Engine, Anyway?
Search engines are, by far, the most used applications on the Web, and you use them every time you are on the web, whether you know it or not. In the beginning, search engines were merely directory archives of the Internet—much like a huge phonebook for the Web—but today, they are smart, semi-intelligent content skim- mers that read everything that can be found on the Web, catalogue it, and try to feed the most relevant content to users when they search for it. When you ask a search engine “What is the best recipe for apple pie?”, it returns a list of the most popular and the most relevant articles on the Web pertaining to that topic.
Search engines now come in many different shapes and formats, some of which are surprising. Whereas the traditional search engines—Google, Bing, and Yahoo!—are still indexes of sorts, you now have a long line of applications that mimic search engine behavior or add a new layer to the search. Facebook is a great example of this new type of search engine. Rather than searching for a set term, you now use your friends and followers to do the searches for you. If you use Facebook as a search engine and ask, “What is the best recipe for apple pie?”, you will likely get a series of answers from your friends ranging from actual recipes to links to articles on the Web. More than likely, some of these will match those from the “normal” search engines. This new kind of search can be grouped with a new type of technology, referred to as “semantic search” or “meaningful search,” where the results are not merely word or sentence matches, but actual thought-through, meaningful answers.
Semantic search will become more important in the coming years, and all the tradi- tional search engines are now falling over each other to try to leverage this type of technology in their own systems for more accurate results.
The bottom line is this: Whereas search engines used to be archives that could be tricked by putting in the right words, sentences, and keywords in your pages, today, search engines are organic semi-intelligent creatures that actually read through
ptg7913109 your content and try to match it with people looking for that content. As a result,
for the best possible search engine results, both in the traditional systems and on Facebook, Twitter, and wherever else people now do searches, your best option is to make the information on your site as accurate, concise, and informative as possible.
That’s where we start.
Search Engine Optimization in Expression Web 4
Search Engine Optimization in Expression Web 4 is a panel function much like Find.
To activate it, go to Panels on the main menu and select SEO. This opens the Search Engine Optimization panel at the bottom of the workspace (see Figure 23.1).
FIGURE 23.1 The Search Engine Optimiza- tion panel appears at the bottom of the workspace when activated.
To start the Search Engine Optimization tool, click the green arrow in the upper-left corner. This opens the SEO Checker dialog (see Figure 23.2).
FIGURE 23.2 The SEO Checker dialog lets you decide what pages to check and what to check for.
Before you actually run an SEO check of your site, click the Learn More About SEO link in the SEO Checker dialog. This takes you to a series of reference articles by the Expression Web team that explains the different elements of SEO and what the best practices are. It is a good idea to read through these articles to get a solid under- standing of what you are looking for and how things should be done. That way, when the report is generated and the errors and warnings start appearing, you know what they refer to and whether they are relevant to you.
ptg7913109
Running an SEO Check of the MyKipple Site
With the new MyKipple site open in Folder view, open the SEO panel to run an SEO check of the site:
1. In the SEO panel, click the green arrow in the upper-left corner to open the SEO Checker dialog.
2. Under Check Where, check All Pages. Under Show, check both Errors and Warnings (refer to Figure 23.2).
3. Click the Check button. Expression Web 4 goes through all of your pages and checks them for SEO optimization. The resulting list shows all the places Expression Web 4 found something it considers to be an error or warning (see Figure 23.3).
FIGURE 23.3 After the SEO Checker com- pletes its run, the SEO panel lists all the errors and warn- ings it found in your page(s).
Looking at the output of the SEO Checker, you can now see how it works. On the far left, you have the Problem Summary, in which the actual problem is described in short form. To its right, you have a Help Topic link that takes you to a further description of the problem, what causes it, and how it can be fixed. Next to that is the address and name of the page the error was found on and what line the error was found on. The final column lists whether this is an error or a warning. The dif- ference between errors and warnings is that errors are things that Expression Web 4 thinks will damage or interfere with your Search Engine Optimization, whereas warnings are things that are left out or not done properly that will increase your ranking if they are fixed.
If you hover your mouse over any of the error items, you get a ScreenTip with further information about the error (see Figure 23.4). This is a quick way of getting an explanation for what’s wrong if you don’t want the full breakdown from the Help link.
ptg7913109 The SEO Checker should return 66 errors from the 13 pages in your site. This sounds
like a lot, but if you scroll down and actually read the errors, you’ll notice that a lot of them are repeated on every page and even more are things you don’t necessarily want to change. This is an important lesson learned early: The fact that Expression Web 4 and the SEO Checker consider something to be an error doesn’t necessarily mean it is an error. You’ll see what I mean by this shortly.
Analyzing SEO Checker Reports
As I said in the introduction to this hour, Search Engine Optimization is part science, part alchemy, and part common sense. For this reason, the output of the SEO Checker may not necessarily be something you want to follow. You have to treat each error or warning as an individual case and look at whether the particular problem Expression Web 4 found is one that should be looked into or whether it can be ignored.
The best way to see this in action is to look at some of the errors and warnings and analyze them.
The<h1>Tag Is Missing
The first error you should have is “The <h1>tag is missing” on line 2 in about.html.
This error indicates that the page has no main heading for the search engines to index. The idea is that the content wrapped in the <h1>tag is the descriptive head- ing for the whole page and search engines will look for this tag first. If you look back to when you created the page layout for MyKipple.com, you’ll remember you used the <h2>tag for headings. This is an educated choice, because faced with the lack of an <h1>tag, the search engines will look for an <h2>tag instead. Even so, it might be a good idea to make the heading an h1instead of an h2.
Scrolling down the error list, notice that this error appears for every page. This is when you’ll be happy you set up a DWT in Hour 18, “Dynamic Web Templates.” To fix this problem, just change the tag in the DWT and edit the h1style:
FIGURE 23.4 The SEO Checker pro- vides a lot of information about your errors and warn- ings if you hover the mouse over each item.
ptg7913109 1. Go to the Folder list and open myKippleMaster.dwt.
2. In Code view, go to line 131 and change the <h2>beginning and end tags to<h1>and</h1>.
3. Save the DWT and make sure it updates eight pages.
4. Open the kippleStyles.css file, which is found under the styles folder, and find the H1 style.
5. Find the h2style directly below and copy the background-image,
background-repeat,background-position,display, and padding-bottom attributes up to h1, as shown in Figure 23.5. Save kippleStyles.css.
FIGURE 23.5 It is often easier to copy CSS code from one style to another in Code view than to use the Modify Style dialog.
Run the SEO Checker again, and you’ll see you now have only 57 errors to deal with: All the <h1>warnings were removed in one sweep.
The<a>Tag Text Is Too General to Provide Search Benefit
With the h1tag added to all the pages, the next errors on the list are regarding the
<a>anchor tags, more specifically that the <a>tag text is too general to provide search benefit. Most of these errors are referring to the menu links. The error says that the text is too generic, and this is, of course, accurate. However, to fix this error, you have to replace the simple button words (Home, Gallery, About Me, and Contact) with something more descriptive, and that wouldn’t be functional. So, once again, you can ignore this warning.
That said, the <a>tag warning is actually vitally important, just not in this particu- lar instance. Search engines rank sites based on interactivity. That means the more links you have inside your site pointing to other pages or places inside your site, the better it will be ranked by search engines. However, at the same time, you need to
ptg7913109 make those links descriptive so people (and search engines) understand where they
are pointing. Simply setting all link texts to “link” or “click here” does nothing for your search rankings. The SEO Checker warns you about this. A better option is to use descriptive words or even full sentences as link texts.
The<title>Tag Contains Placeholder Content or Text That Is
Too General to Provide Search Benefits
Earlier in this book, you populated the <title>tag for some of the pages. The
<title>tag contains the text that appears in the browser bar, in bookmark links, and, most importantly, as the heading for search engine links. Therefore, it is impor- tant that your <title>tags are not only filled in, but that they provide information about the page so people understand what is to be found on that page. For this rea- son, simply setting the title of each page to “MyKipple.com – Home” or
“MyKipple.com – About” is not ideal. Better titles are “MyKipple.com – a site about the stuff that surrounds us” and “What is MyKipple.com? Learn more about us.”
In the case of most of the pages in our project, the title of all the pages is currently MyKipple.com. To change this, double-click the error in the SEO panel, and
Expression Web 4 takes you to the line in question in Code view. From here, you can remove the original text and replace it with something more descriptive. Including the site name at the end of the title ensures that, if people search for a word in the title along with your site name, they are more likely to find this page.
The<title>tag warnings must be dealt with on an individual, page-by-page basis.
Scroll through the SEO panel and fix the <title>tag warnings as they appear.
Remember to save the pages after inserting the new descriptive titles.
The Description for the Page Is Not Unique
In addition to the <title>errors, the SEO panel also indicated that there is a prob- lem with the description of some pages—more specifically, you’ll find another error saying the description for the page is not unique. As you learned earlier, the descriptionmetatag is a short description of the contents of the page. This particu- lar metatag is important because it is the text that appears under the main title when the page is listed on search engines. In other words, it needs to be short and descriptive so people will click it. The reason for the warning is that the descriptions of all the pages in the MyKipple site are the same.
ptg7913109
▼ Try It Yourself
Make Individual Descriptions for Each Page
If you think back to when you created the DWT, you’ll remember that you made the
<title>tag and keywordsmetatag an editable region, but not the description. To create individual descriptions for each page, you must first make a new editable region for the descriptionmetatag in the DWT:
1. Go to the Folder list and open myKippleMaster.dwt.
2. In Code view, go to the metatag line with the name description (most likely line 19) and place the cursor at the beginning of the line.
3. Create a new editable region by typing
<!-- #BeginEditable “description” -->.
4. Go to the end of the line and close the editable region by typing
<!-- #EndEditable -->.
5. Save the DWT and make sure all pages are updated.
Now that the descriptionmetatag is an editable region, you can go into each page and give it a unique description. If you don’t want to make the change in Code view, you can right-click the page in Design view, select Page Properties from the context menu, and enter a new description in the Page Properties dialog.
The<img>or<area>Tag Does Not Have an altAttribute with Text
Ignoring the warnings we have gone through so far, you’ll find a series of warnings that the <img>or<area>tags don’t have altattributes attached to them. This warn- ing refers to the image hotspots you created in Hour 7, “Getting Visual, Part 2:
Advanced Image Editing, Thumbnails, and Hotspots.” Like with images, hotspots (wrapped in <area>tags in HTML) need altattributes to be valid. This altattribute is not only for people visiting your site with non-image browsers, but for search engines. In fact, if you think about it, Google, Bing, and Yahoo! may be the three most important “blind” visitors. As computers, they can’t see images, and they rely solely on the text on your site.
Clicking the <img>errors, you’ll quickly realize why these errors are being generated:
Rather than attaching the correct altattribute to the hotspots, we used the incorrect titleattribute. This is a common mistake that, because it doesn’t immediately cause a validation error, is easy to make. Fortunately, it’s just as easy to fix. In Code view, all you have to do is change titletoaltfor the four lines in question, and the error disappears.
▲
ptg7913109
Summary
As you have worked your way through this book, you have learned a lot about how to write and edit valid code and what web standards are. Now, at the end of your journey, I introduce you to yet another set of rules you have to adhere to. So, is SEO really all that important? And should you care? The answer to both questions is a resounding “yes.” However, that’s not a bad thing.
Even though the site did generate what seemed like a lot of errors, the reality is that most of them were errors you could ignore, and those that were not were usually omissions and/or easy fixes. The reality of the situation is this: If you write 100%
standards-based code (as Expression Web 4 does), and you remember to add a unique title, description, and keywords to all of your pages, you are writing a site with solid SEO. Any warnings that show up will likely be extraneous elements that don’t really matter or things you simply forgot to deal with. So, caring about SEO is, in many ways, synonymous with caring about web standards. Because Expression Web 4 pretty much does that for you, you’re on safe ground.
I wasn’t joking when I told you in my Introduction that using Expression Web 4 puts you leaps and bounds ahead of the competition right out of the gate. For many, SEO and web standards are still a mysterious alternate reality they can’t wrap their heads around. However, as you learned in this hour, it really isn’t all that hard, and the rules are simple.
Q&A
Q. The SEO Checker produced a lot of errors for the extra pages made in this book, such as menus.html. What do I do with those?
A. The SEO Checker will check all the pages in your site unless you specify otherwise. Throughout this book we have created several demo pages that are not meant to be published to the Web. When you run the SEO Checker, you can choose to only check the pages you actually intend to publish, or you can get the demo pages up to standard by following the recommenda- tions the Checker provides. It’s up to you.
Q. If I create a page that returns no warnings or errors from the SEO Checker, will it be listed at the top of Google searches?
A. Sadly, the answer is no. Google and other search engines rank sites on a long list of features, including quality of content, popularity, number of other sites linking to the site, and so on. Just because your site passes