Using the Expression Web SEO Checker

Expression Web 4 provides a new reporting tool: the SEO Checker, which helps you optimize the pages in your site for discovery and indexing by search engines. Pages that follow good Search Engine Optimization (SEO) guidelines rank higher in search-engine results, helping people find your site more easily.

Expression Web 4 Search Engine Optimization panel

What does the SEO Checker do?

The SEO Checker analyzes static page structure and content, compares each page against 50 different rules to ensure the page is search engine-friendly, and produces a detailed report of problems and solutions.  To come up with the 50 SEO rules, the Expression Web team researched the current best practices in SEO which generally emphasize authoring well-formed markup and providing relevant content.  The SEO Checker’s rules provide guidance in these categories:

What does the SEO Checker NOT do?

The SEO Checker provides guidance to help you improve your site’s markup and content, but that guidance alone is not sufficient in building a fully optimized site.  In addition to making changes to your pages based on the errors and warnings reported by the SEO Checker, there are many other tasks to consider, including:

  • Assessing your site’s ranking for targeted keywords (check your page rank in multiple search engines)
  • Providing compelling, original content in your site
  • Building links to your pages (from external sites and within a site)
  • Canonicalizing URLs (such as making sure search engines treat <yoursite>.com the same as www.<yoursite>.com)
  • Using descriptive filenames for your images

These tasks and more are covered on the Bing Webmaster Center blog in their five-part series on improving page rank.  There are many specific recommendations in these posts, so take a look:

If you’d like to drill deeper into understanding external link building and just how important it is for search ranking, see Link building for smart webmasters (from the Bing Webmaster blog) and Quality links to your site (from the Google Webmaster blog).

You should also ensure that all of the content you want searched on your site is reachable via internal hyperlinks, or by creating a sitemap.  You can use the Unlinked Files report in the Expression Web Site View to find pages that are not internally reachable.  Otherwise, for Sitemap best-practices, see “Reveal the heart of your site with a Sitemap”in Part 5 of the Bing SEO blog posts.

Be aware that the SEO Checker was built for analyzing static HTML content.  If the majority of your site’s pages are dynamically created by ASP.NET or PHP, you’ll see more meaningful SEO analysis results by using the free IIS Search Engine Optimization Toolkit.  Although the IIS Toolkit is not integrated with an editing tool, you can use Expression Web to easily find and fix any SEO issues that are reported by the tool.

Example: SEO for a mobile app site

I recently wrote a mobile phone application, and then considered how I wanted people to discover the app.  Some people will find the app on the phone’s app store, but the app store is not indexed by the big search engines.  Publishing a corresponding web site for my app adds the possibility that someone will discover the app via a web search.  In creating this very simple brochure site, I used the Expression Web 4 Compatibility Checker and SEO Checker to ensure the site is as search-engine friendly as possible.  I’ll walk through how I used each checker, and how I fixed the issues the SEO Checker found.

First, I reviewed and fixed code errors and markup compatibility issues on the site.  You might wonder why, since we’re talking about SEO.  This Bing Webmaster Center blog post explains:

Is your HTML source code valid? Just because it displays more or less correctly, are you sure it's solid? (Some browsers are much more tolerant of HTML coding errors than others are, so you may not actually see the problems. However, search bots are typically not as forgiving as those tolerant browsers, which is why this issue is important.) Errors in your page source code can have a detrimental effect on your page rank if the search engine doesn't understand and thus can't effectively crawl your code. For example, if you didn't properly format the <head> tag code […], all of the work you put into enhancing its content for keyword usage could be for naught.

Additionally, fixing code and compatibility issues first helps ensure that the SEO Checker will find all of the issues it can in your site.

The status bar at the bottom of Expression Web 4 displays the HTML Incompatibility icon (on the left in the following screenshot), Code Error icon, and doctype of the current page.  The HTML Incompatibility icon lets you know if your page has markup that isn’t compatible with the page’s doctype (HTML5 in this case).

Status bar showing compatibility error

You can click Go To Error to jump to the first compatibility error on the page, or Run Compatibility Checker… to get a site-wide report of compatibility issues.  See our previous blog post Improve Your Site’s Search Ranking for more info on running the Compatibility Checker.

Running the SEO Checker

Now it’s time to tune my website for searchability.  I selected SEO Reports... from the Tools menu to display the SEO Checker:

SEO Checker dialog

The Learn more about SEO link takes you to Expression Web’s built-in Help documentation on SEO and the SEO reporting feature.  Be sure to take a look at this Help, as it has a wealth of information on SEO best practices and a detailed explanation of all the SEO rules that are used by Expression Web 4 to analyze your site.

After clicking Check, the Search Engine Optimization report showed these results for my site:

The SEO report pane

By default, the SEO report is sorted by page and line number, showing you issues encountered starting at the top of each page.  Each reported issue shows a problem summary, a link to a Help topic on the reported problem, the page name and line number, and the issue’s importance (Error or Warning).  While you should strive to fix both Warnings and Errors to maximize your SEO results, you’ll reap the most benefit from fixing issues marked as Errors.  For my site, I’ll show you how I fixed all of the SEO issues, including Warnings.

Fixing searchability issues

Warning: No keywords are defined for the page

My site’s first searchability issue is the warning “No keywords are defined for the page.”  If you haven’t worked with HTML keywords before, this statement may be a bit cryptic.  Fortunately, you can hover your mouse pointer over an issue in the Search Engine Optimization panel to see more detailed information, like so:

Hover tooltip for SEO keyword issue

You can also double-click on an issue to go directly to the line of code that contains the problem in your page.  In this case, double-clicking causes the code editor to highlight the <html> tag on line 2 of index.html.  The <html> tag itself is fine, but it’s highlighted because the checker did not find any keywords within the document.  So, how do we fix this issue?  If the guidance in the tooltip was sufficient for you, you could add the missing meta tag and keywords directly in the code editor.  But let’s say you wanted to learn more about this topic, in which case you could click on the WEB1034 hyperlink in the Search Engine Optimization panel’s Help Topic column.  Each SEO rule’s Help topic contains a detailed explanation of the issue, as well as example HTML for fixing the issue.  Here’s the Help topic’s example HTML for fixing the missing keyword issue:

The following is an example of a correctly formatted <title> tag, with <meta name="description"> and <meta name="keywords"> tags in the <head> tag section.

<head>
    <title>Contact Proseware, Inc.</title>
    <meta name="description" content="Contact information for Proseware, Inc., including addresses, phone numbers, and email"/>
    <meta name="keywords" content="Proseware,Proseware applications,Proseware utilities,Proseware tools,Proseware server tools"/>
</head>

Now that we understand the keyword issue and how to fix it, we could either simply type in a new <meta name=”keywords” content=”...”> statement in the code editor, or edit the keywords in the Page Properties dialog, which presents commonly used page meta content for editing.  To open the dialog, select Properties... from the File menu:

Page Properties dialog

From here, I simply typed a comma-separated list of keywords in the dialog, and Expression Web updated the HTML accordingly.

Warning: The title and description for the page are the same

The Page Properties dialog is a convenient way to also fix the third searchability issue listed in the result pane: “The title and description for the page are the same.”  The page description is generally shown below the page title in search results, and is an opportunity for you to summarize the page’s contents to entice people to visit your page.  Without a page description, it’s up to the search engine to choose what text to show.  Perhaps the worst thing you can do here is what I’ve shown above, where the title and description are the same.  This gives the person searching absolutely no additional information about your page, and is a lost opportunity to direct search traffic to your site.  Take a moment to fill this out and write a meaningful description.

There are two related SEO Checker rules: WEB1052 (“The <title> tag contents are not unique within the site”) and WEB1028 (“The <meta name=”description”> tag contents are not unique within the site”).  These rules remind you to keep these tags unique across all pages on your site.  Pages with duplicate page titles in your site compete with each other for search engine keyword relevance, reducing each page’s search ranking as a result.  Unique descriptions ensure that users see meaningful descriptions for each page, and can more easily identify the content they want.

Error: The <noscript> tag is missing

As part of marketing this mobile app, I created a Twitter account to keep people up-to-date with the latest changes to the app, and for users to give feedback.  Twitter provides canned widgets you can embed in your web pages to show the latest posts from your Twitter feed.  The beginning of the widget looks something like this:

script block snippet

These widgets rely on Javascript, but search engines (and some users’ browsers) will not run this Javascript.  In these cases, where the script is intended to generate user-visible content, you can provide a <noscript> block with alternate text to show the user or provide additional information for the search engine.  For this case, I added this just below the second <script> block:

<noscript>Read the latest tweets: <a href=”https://twitter.com/mapminders”>@mapminders</a></noscript>

Don’t bother providing a <noscript> block if you’re simply using <script> for analytics tracking, though.

Warning: The <meta name=”robots”> tag contains illegal values

The robots meta tag instructs the search engine if and how it should index your page content.  The rule’s help topic lists all of the recognized directives, and what each one means: nofollow, follow, noindex, index, noodp, noydir, noarchive, cache, nocache. Think carefully before using a directive like nofollow (which stops the crawler from following any of your page links) or noindex (which prevents the current page from being indexed).

For our mobile app website, I had copy/pasted a robots meta tag with an invalid directive:

<meta name="robots" content="all, index, follow">

Fixing this issue is as simple as removing the invalid “all” directive from the content attribute.

Error: The <img> or <area> tag does not have an ‘alt’ attribute with text

This is an oft-cited HTML recommendation – you should always provide alt text for your images, not just for accessibility, but also for search engine relevance.  The logo image in my header and the screenshots from my app were all missing alt text, so it was easy to add this in and fix the issues.

And here’s a tip for optimizing your images for SEO which the SEO Checker won’t tell you about: you may improve your image search relevance by using hyphen-separated names for your images, such as “location-detail-screenshot.png”, in addition to having meaningful alt text.  We considered adding this as a rule in Web 4, but found it very tricky to correctly automate this check in all of the languages we support in Expression Web.

For more information, see the Bing Webmaster Center blog post Images and Flash and Script, Oh My! (SEM 101) for the SEO best practices when using images in your site.

Error: The <a> tag text is too general to provide search benefit

And now we’ve come to the final SEO issue in our example.  These lines were flagged for having content that is too general:

<li><a href="#">Home</a></li> <li><a href=" [app store link] ">Download</a></li> <li><a href="#contact">Contact us</a></li>

I wasn’t sure how to resolve this, so I clicked on the WEB1058 help topic link and read the following:

The <a> tag appears to contain generic text, such as "link" or "click here." If a hyperlink points to content that is relevant to the site, the search ranking of the site may be reduced unless the anchor text accurately describes the target of the hyperlink.

Search engines use the contents of <a> tags to provide details about the page to which the <a> tag links.

For a decent-sized site, it’s worth improving the search relevance of internally linked pages, so we could spend some time rethinking link names to make them more contextually descriptive.  For example, we could replace “Download” with “Download the MapMinders app”, and replace “Contact us” with “Email the MapMinders developer”.  But, for such a small site, this may be of little search value and ends up making the link text more visually cluttered.  For your own sites, you may need to make this trade-off, as well.

And with that, I’ve fixed all of the searchability issues identified by the SEO Checker!

Beyond the SEO Checker: measuring SEO improvements

Now that you’ve optimized your website for search using the SEO Checker and published your changes, what next?  Well, your goal was to have a higher search engine page rank for certain keywords, and to drive more traffic to your site as a result of higher page rank, right?  If so, you need to measure your keyword ranking, site traffic, and so on over time.  There are many SEO analytics tools available for this purpose, each with their pros and cons.  (See “Baseline your site’s current performance” in this Bing Webmaster Center blog post for a comprehensive list of metrics to pay attention to.)  Two free tools to consider are Bing Webmaster Tools and Google Webmaster Tools.  After some initial configuration, they will report data on the number of indexed pages, your top pages, keyword relevancy, and clicks from search results to your site.  These tools are fairly lightweight, so depending on the size of your site and what data you want to track, you may very well find that you need more fine-grained search tracking software.

Regardless of the analytics tools you choose, just remember that SEO is an iterative process.  You’re unlikely to see improvements overnight, but rather over weeks and months.  During that time, check your SEO analytics reports, keep improving your site content, and periodically re-run the SEO Checker to make sure you’re not missing an SEO opportunity.

Eric Wright, Principal SDE
Microsoft Expression Web