Web Design Templates and Search Engine Optimization

Chris · #1 (**permalink**) 08-23-2005, 11:31 AM

The following was written by Shari Thurow

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?

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.

Conclusion

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

bj · #2 (**permalink**) 08-23-2005, 08:33 PM

Quote:

"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.

Personally I think Shari is dead wrong about this. If a spider has to dig the content and links out of hundreds of lines of bloat . . . It is a usability issue, and the spiders "use" code much as a browser does. Where's the difference? If it takes too long to get to the stuff you're looking for, is there any difference if the eyeballs are virtual or real? Eyeballs go elsewhere when there's code bloat.

coder · #3 (**permalink**) 08-24-2005, 09:41 AM

Quote:

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.

Just from reading these 2 paragraphs it really lowers my opinion of the entire article and the author. All of the serious web designers I know write their own code. When we were taught html it was on notepad, so we had to know what we were doing. Plus it is so much cleaner then any WYSIWYG program.

Chris · #4 (**permalink**) 08-24-2005, 03:45 PM

Quote:

Originally Posted by coder

Just from reading these 2 paragraphs it really lowers my opinion of the entire article and the author. All of the serious web designers I know write their own code. When we were taught html it was on notepad, so we had to know what we were doing. Plus it is so much cleaner then any WYSIWYG program.

you're saying everyone you know hand codes their entire site, html included, from scratch? if so, i wonder how they get anything done at all.

try handcoding the webproworld forum from scratch and i'll get back to you in about 2 years...

swordfish-1 · #5 (**permalink**) 08-24-2005, 08:11 PM

I agree with CRich and bj, I do a combination of both on our small site. To me, it's always been a
balance between visual appeal and simplicity of use for the viewer, optimising for the spiders, and the ability to keep up with it all on a timely basis.

I think that weather you use templates or code manualy, the same rules of sound SEO still apply.

Relevant content
Ease of navigation
Relevant backlinks
Keyword prominence and placement
Meta tags, alt tags,
and page descriptions weather you think you need them or not.

coder · #6 (**permalink**) 08-25-2005, 09:23 AM

Quote:

Originally Posted by CRich

you're saying everyone you know hand codes their entire site, html included, from scratch? if so, i wonder how they get anything done at all.

try handcoding the webproworld forum from scratch and i'll get back to you in about 2 years...

Actually yes, that is what i'm saying. Usually start a new site layout in either photoshop or fireworks to get the look of the site. From there slice the site into pieces and put it together in a html editor. Our choice is homesite. Obviously the more sites you create the more code snippets you have which saves time. No sense in re-creating the wheel every time you want to use one. Once the site is coded create includes for the header, nav's, footer, etc.

And i'm not saying not to use someone elses code if it works as nice as phpBB, but I guarantee it wasn't created in dreamweaver or FrontPage

Chris · #7 (**permalink**) 08-25-2005, 09:53 AM

Quote:

Originally Posted by coder

Quote:

Originally Posted by CRich

you're saying everyone you know hand codes their entire site, html included, from scratch? if so, i wonder how they get anything done at all.

try handcoding the webproworld forum from scratch and i'll get back to you in about 2 years...

Actually yes, that is what i'm saying. Usually start a new site layout in either photoshop or fireworks to get the look of the site. From there slice the site into pieces and put it together in a html editor. Our choice is homesite. Obviously the more sites you create the more code snippets you have which saves time. No sense in re-creating the wheel every time you want to use one. Once the site is coded create includes for the header, nav's, footer, etc.

And i'm not saying not to use someone elses code if it works as nice as phpBB, but I guarantee it wasn't created in dreamweaver or FrontPage

ok, starting a site in a graphics software suite then exporting it to an html editor is not hand coding.

in fact, unless you designate otherwise, the html is already embedded when you export something layout-wise. i use dreamweaver and fireworks hand-in-hand and the html code is only as bloated as the developer allows it to be.

frontpage = satan. \m/

bj · #8 (**permalink**) 08-25-2005, 02:56 PM

For the record- I hand code pretty much everything- in DreamWeaver. I know the shortcut keys so well(ctrl-shift-p for paragraph, ctrl 1 for h1, etc), and have my code snippets handy on the right top, ready to be placed in with a double click. But I pretty much use code view exclusively- except when I'm setting up colors, then I split screen because it's a timesaver. You can generate clean code in most good html editors- except FrontPage, which, from what I've seen, morphs your code no matter what you do to try to stop it.

Interestingly enough, a friend just sent me this. He says it came from the New York Times, though I dunno if it was the actual newspaper, which I know he gets, or their website. It's enough to make ANY true coder cringe and sweat . . .

Quote:

How to Open a Web Storefront

Q. How would I go about creating a Web site for my family's business?

A. Whether you handle the details yourself or pay someone to set the site up for you, the basic steps for Web site building are the same. You need to create and register a domain name for the Web site, create the Web pages and find a server to put the site online so Internet visitors can find it.

Many companies have Web site creation packages for small-business owners that will do all of these things for a few hundred dollars, and also include e-commerce features like an online shopping cart and credit card processing. If you are interested in an all-in-one Web site package, companies like dotster.com, godaddy.com, register.com and networksolutions.com could be of interest.

You can also just register your Web site's domain name for around $10 (subject to annual renewal) with one of the companies mentioned above, and then create and store your Web site on another computer or, for about $20 a month, use a company that specializes in putting Web sites online.

As for creating and maintaining your Web site's pages, programs like Dreamweaver from Macromedia or Microsoft FrontPage can simplify the design process if you are not familiar with Web page coding and don't want to hire a professional designer. Companies like Homestead (homestead.com) have ready-made templates you can use to create a site that they will put online for a monthly fee.

Once you have your site up and running, services like Edit.com (edit.com) can give you access to your Web pages so you can easily add or update information yourself, particularly if you originally hired a Web designer to create your site.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode