Web Design Templates and Search Engine Optimization

    August 23, 2005

Reader Question: Our Web developer uses page templates for our Web site. I am worried that “code bloat” and other template issues might interfere with our search engine optimization (SEO) efforts. Are Web page templates good or bad for search engine optimization?

Web Design Templates and Search Engine Optimization
Design A Search Friendly Web Site

Editor’s Note:  When designing a web site, do you consider how search engine friendly it is? Will the Googles and Yahoos of the world be able to index the site the way you would like? What design tips and hints do you follow when designing a site of your own? Discuss at WebProWorld.

Answer: There is nothing wrong with using Web design templates. I use them all of the time for both static and dynamically driven Web pages. The key to having search-engine friendly design templates is to: (a) identify the page types you will have on your site, and (b) construct the design templates based on the characteristics of each page type.

Identifying types of Web pages

Before I create a Web page, I try to determine the best information architecture for a Web site. Let’s use a small B2B Web site (less than 50 pages) as an example.

Right away, I know the site is going to have a Home page, Site Map, and Contact form (with a corresponding “Thank you” page). I also know that the Web site will have a list of services. What does that communicate to a Web designer? Right away I know the designer must create a number of design templates:

  • Home page (unique design template)
  • Services (category/parent page template)

      – Service 1 (child page template)

      – Service 2 (child page template)

      – Service 3 (child page template)

      – Service 4 (child page template)

      – Service 5 (child page template)

  • Site map (possible unique template)
  • Contact us (form template)
  •   – Thank you for contacting us (response template)

    Because the “Thank you” page is a response to a form, and since Web search engines do not fill out forms, I know that this particular page does not need to be search-engine friendly.

    Next, I know that all B2B sites should have an About Us or About the Company section. A well-written About Us section helps communicate trust and credibility to a target audience.

    Let’s assume that this small B2B site wants to put press releases, client testimonials, and location pages in the About Us section. The information architecture might look like this:

  • About Us (category/parent page template)
  •   – Client testimonials (subcategory/parent page template)

         – Testimonial 1 (child page template)

         – Testimonial 2 (child page template)

         – Testimonial 3 (child page template)

      -Press releases (subcategory/parent page template)

         – Year (subcategory/parent page template)

             Press release 1 (child page template)

             Press release 2 (child page template)

             Press release 3 (child page template)

      – Company locations (subcategory/parent page template)

         – Location 1 (child page template)

         – Location 2 (child page template)

    Notice that in the above two examples, I have a number of child-page templates:

  • Services
  • Testimonials
  • Press releases
  • Locations
  • Are all of these child pages going to be formatted in the same manner? Probably not, since a press release does not contain the same type of content as a client testimonial. Therefore, I know that the Web designer will have to create four unique child-page templates.

    I will not go into grave detail at this point on what this fictional site’s information architecture should look like. I just want readers to understand that even a small Web site can have 10 or more page design templates.

    Which pages should be search-engine friendly? All of the pages except the “Thank you” response template should be search-engine friendly. Now that I have identified the search-engine friendly page types my fictional site will have, I have construct each template

    Some search-engine friendly Web page characteristics

    What Web designers/developers must consider BEFORE they create Web page templates are the characteristics that will and will not be used on every page. For example, every page should contain a unique and descriptive HTML title. In the fictional example, Service 1 and Service 2 will not have the same title-tag content because each service is unique.

    Assuming that each service description contains keyword-rich text, what other search-engine friendly characteristics should a Services child page have? Web search engines need to have easy access to the text on a Web page. Therefore, the site should have a navigation scheme and cross-linking structure that is spider friendly.

    Web page templates should always be created primarily for human beings, not for search engine spiders. I do not automatically think, “All navigation on this site must be CSS-formatted text links” because I know that people tend to respond better to graphic images rather than CSS-formatted text. Many of the search-engine friendly design templates I created have a combination of graphic images and CSS-formatted text. Usability testing early in the design phase can tell you which page designs your users prefer.

    For the sake of this article, let’s say user tests in this fictional B2B site showed a clear preference for a Flash navigation. Now, search engines have an extremely difficult time indexing Flash navigation, but I am not concerned. At the bottom of every Web page, I have a text-link navigation that corresponds to the graphic-image navigation.

    The supplemental text-link navigation serves multiple purposes: (1) when site visitors read a page and scroll, they will not have to go back to the top of the page to see the main navigation, (2) text links are generally search-engine friendly. The supplemental text-link navigation is a form of horizontal navigation.

    In my design templates, I also will cross-link vertically through breadcrumb links.

    For example, a Services child page will have the breadcrumb link structure of:

    Home > Services > Service 1

    An About Us (section) client testimonial will have the breadcrumb link structure of:

    Home > About Us > Client Testimonials > Testimonial 1

    (Of course, as a search engine optimizer, I will try and make breadcrumb links as keyword rich as possible, but concise.)

    The reason I bring up a Services child page and a Testimonials child page is that these two page types should probably link to each other. Think about it. If a client testimonial praises the virtues of Service 1, shouldn’t that Testimonial page provide a direct link to the exact service being praised? Of course it should!

    If you are going to use search-engine friendly design templates, always consider both horizontal and vertical cross-linking. Your site’s linking structure communicates the content that you think is important to both site visitors and Web search engines.

    “Code bloat” – does it affect search engine positioning?

    “Code bloat” really does not affect search engine positioning. In fact, “code bloat” is more of a Web site usability issue than a positioning issue.

    One exception I found has to do with Web design/development software. In my experience, FrontPage tends to create code that can impact search engine visibility. For example, if you create a set of graphical navigation buttons, FrontPage will often code those buttons into an image map. Image maps are not particularly search-engine friendly. If the FrontPage-generated image map is the only site navigation? Then the resulting Web pages might not be too search-engine friendly.

    I prefer to use Dreamweaver because it tends to generate less extraneous code than other Web design software. However, Dreamweaver’s drop-down menu arrays are certainly not-search engine friendly, and the scripting code for the menus can often be longer than the actual XHTML page! So I know to create my own drop-down menus rather than rely on the software’s settings.

    Software developers should consider the Web search engines when they come up with software features.


    I wish I could write everything I know about search-engine friendly design templates in a single article. I hope this guides everyone in the right direction. Don’t be afraid to use a graphics-based navigation scheme just because an ill-informed SEO firm says not to. And don’t succumb to a Web designers’/developers’ sense of information architecture unless they have usability training and experience.

    Always create design templates for your target audience, first and foremost. You will often find that user-friendly design templates are search-engine friendly as well.

    Related links:

  • Web site architecture and search engines – Part 1
  • Web site architecture and search engines – Part 2
  • Web site architecture and search engines – Part 3
  • URL structure and search engine optimization
  • Keyword repetition for search engine optimization
  • Shari Thurow is Marketing Director at Grantastic Designs, Inc., a full-service search engine marketing, web and graphic design firm. This article is excerpted from her book, Search Engine Visibility (http://www.searchenginesbook.com) published in January 2003 by New Riders Publishing Co. Shari can be reached at shari@grantasticdesigns.com.

    Shari Thurow Answers SEO Questions: Click Here For Free Answers