Website Design for Search Engine Performance

When you design your pages for higher search engine rankings, you have to think like the search engine algorithms do. Their goal is to serve the webpages that are most likely to contain the information that the user was looking for. The essential process is pretty straightforward. To begin, the search engine robot gobbles up the entire contents of the page and analyzes it. Their algorithms give extra ranking weight to the most important parts of the page, and let the less important parts have less influence. It sounds simple, and it can be if you help them by using search engine-friendly design principles. The trick is balancing your design requirements with the search engine ranking methods, but it's not difficult to understand.

At the start, keep in mind that your first goal should always be to design your website for your users. The search engines can send enormous user traffic to your site, but if you don't have a well-designed, content-rich website waiting for them when they arrive, they will quickly leave your site and all of your hard work will have been wasted. But let's get on to the job of creating a search engine friendly website.

SEO Tips & Tutorials » Search Engine Friendly Design

Search Engine Friendly Webpage Design

I've discussed how Google and the other search engines pay extra attention to things like the contents of the <title> tag in my other SEO Tips pages. But what I haven't discussed is the importance of the structure of your webpages, and the structure of your website as a whole.

The first principle of search engine friendly design is to make sure that the HTML and CSS code for your webpages is free of technical errors. An HTML or CSS validator will check your pages for such errors and can often suggest how to repair them. The second principle is to make sure that all of the links in your anchor tags (<a>) are correct. You should strive to use complete URLs in your links (that is, complete URLs starting with "http://") to insure they are pointing to the intended page. Relative links (that is, URLs consisting only of a file name, or preceeded with a shorthand directory path such as "../") can lead to broken links and other problems when poorly designed crawlers scan your site. These crawlers often create bad links, such as using the wrong version of your domain name or using "https://" instead of "http://" - both of which can cause canonicalization problems. Do not block your JavaScript and CSS files in your robots.txt file. The search engines need those resources to fully understand how your web pages are displayed to users.

Semantic HTML Mark-Up

Once the technical issues are covered, you need to begin to think about the structure of your webpages. The search engines have become quite adept at determining where the most important content of a page resides, but you can help them by keeping to a well-structured design for all of the pages on your site. Use block-level tags like <DIV>s to structure your page, and where practical, it can be helpful to use "id" attribute names that are meaningful (ie. "header", "menu", "footer", etc.). HTML5 allows adding a formal structure to your pages using semantic tags like <nav>, <main>, <article>, <header> and <footer> and you should be using it for all new pages you create and moving your existing code to that new standard.

Google has become increasingly sophisticated in its ability to analyze the semantic content of webpages. While it's still a good idea to use an outline-style for tags like <h1>, <h2>, etc., and to emphasize important words and phrases in <b>old tags, those HTML tags play a much lesser role in ranking these days. Google prefers a robust use of related terms over endlessly-repeated keywords. The other search engines follow this practice to one degree or another as well, so it's best to use natural language and to make every page rich with content that users will find helpful and engaging.

Don't forget about mobile users. You can serve those users specially-designed pages, or use "responsive design" to accommodate devices from laptops to smartphones, but you need to pay attention to the needs of those users in order for your pages to appear in the search engine results pages (SERPs) that they'll see when they search for sites like yours. Mobile traffic is now a substantial portion of the Internet and it's still growing; especially for e-commerce websites. On the e-commerce websites I operate for myself and my clients, mobile users account for between 15-25% of their overall traffic.

Crafting High Quality Pages

Don't try to make your main page bear the burden of snaring traffic for all of your website's target keywords. The main page should hit the primary theme keywords and the internal pages should focus on the more specific topics. Too many sites try to cover every topic on their main page with every conceivable combination of their target keywords. The more focus your main page puts on your primary topics without "keyword stuffing", the better off you'll be in the long run.

So the theme here is, to borrow a phrase, "Don't Bury The Lead." That means removing unnecessary clutter from the <head> section, putting your most important information in the first paragraph or two of your document's main content, which should absolutely include an <h1> tag to emphasize the primary topic of the page as well as the location of the main content. And remember that the <title> tag is the most important piece of real estate on your webpages. It needs to be attractive, consice, and relevant to the page content.

Proper Use of Meta Tags

The legacy of the Myth of the <META> tag still haunts many web designers. You'll often see a Keywords <META> tag stuffed with dozens of keywords, including past tense, future tense, past tense possessive, plurals, and singular variations on the site's keywords. Don't make yourself crazy here. First of all, only Bing pays any attention whatsoever to the Keywords <META> tag for ranking. For your main page, eight or ten broad keywords in this tag are plenty. Let the content of your pages bear the burder of more specific keywords and phrases. The only <META> tags your webpages ever need are (1) Description, (2) Keyword, (3) Content-type or Charset (HTML5), (4) Viewport, and (optionally) (5) Robots. All the others are superfluous as far as search engines are concerned and will not help your site to perform better.

While Google does not use the content of the Description <META> tag for keyword ranking, there are good reasons for including unique, relevant, and useful content in this tag as an important signal of quality for that page, and for your site as a whole. Further, since Google will often use the content of the Description <META> tag for the snippet it displays in the search results, it's just common sense to include a description that will entice users to click on your link in the search results.

Website Navigation Structure

Finally, there's the issue of the navigation structure of your website. That is, the link pathways through your site that start on your main page. The navigational links on your site should largely follow a hierarchical pattern. The main page should always link to the most important pages on your site such as main category pages, and then those pages should link to the less important pages, such as pages that discuss specific topics or detail individual products.

Main Page -> Category Page -> Sub-Category Page -> Specific Topic Page

This approach has several advantages. Not only does it keep your website well-organized and easy to expand and maintain, it promotes a controlled flow of link value (or PageRank) through your site so that the most important pages get the most "link juice", the secondary pages get a bit less, and the least important pages get the appropriate value in the end. Note that this link structure is not the same thing as your site's directory structure, even though it's usually identical. This is simply a question of navigation pathways you create with the links on your site. To further guide the search engines in deciphering your navigation, consider adding microformat mark-up, such as RDFa or microdata. See my advice below, or visit Schema.org for details.

If your website relies on a database for the content of your pages, you should strongly consider using server control methods to avoid having to rely on query strings in your page URLs (ie. URLs that include control parameters following a "?"). For example, a clean, well-structured URL such as:

http://www.example.com/category/topic/

is better for users and search engines than an unintelligible URL such as:

http://www.example.com/page.php?catname=category&title=topic&page=1

There are several reasons why you should avoid relying on query strings in the URLs for your website. First, if you mix the order in which the command parameters are listed when you link to such pages, the search engines will try to index all of the variations separately which will lead to duplicate content issues. Second, query strings look like gobbledygook to users and they can get confused or intimidated by them. Third, if you need to change the underlying software that creates your pages based on URLs that include query strings, you're likely to have to change those query strings which can require setting up complicated 301 redirects in order to keep users and search engines from seeing "404 Page Not Found" errors. Most of the popular scripts for blogs and shopping carts now have optional settings or plug-ins available to eliminate the need for query strings, and you should use them. If you need help, search on "search engine friendly URLs" and you'll find lots of good advice.

Google adds extra support for hierarchical website navigation through their support of breadcrumbs in Schema.org formats that they will sometimes use for providing Rich Snippets, Sitelinks, and other features in their Search Engine Result Pages (SERPs). Your website must be properly coded and have gained enough overall trust and strength for these features to be added to your listings, so you have to put in the time and effort required to qualify for them. When you do, it can really make your site stand out. And all it takes is adding some additional tags and attributes to your normal HTML mark-up, so anyone can do it.

Having a strong hierarchical structure in your website navigation design is best practice even beyond to the impact on search engine rankings. The effort required will pay off quickly in many, many ways in the improved performance of your website and in reduced design maintenance problems.

This page was last updated on September 25, 2020