How to Select an HTML Template for Better SEO

Selecting a good HTML template can help your SEO campaign before your new website is even deployed; accidentally selecting a poor HTML template can undermine your SEO campaign. Web design for SEO is an artform dealing in the good, the bad, and the ugly.

A well designed, modern HTML template will typically include:

• a fluid, mobile-first, desktop-friendly design;
• a basic and extensible navigation scheme, nicely styled with CSS, which works with both desktop and mobile web browsers;
• a  handful of popular design elements, nicely abstracted so you can easily mix and match to present different types of content on different pages;
• one or more default color palettes;
• several example pages, with elements combined to fit typical use cases, such as Contact Us, Meet Our Team, Pricing, and Case Study, for example.

Many templates, however, emphasize nice styling and example pages, but turn out to be difficult to modify, don't have correctly working fluid design on mobile, have brittle navigation systems which can't be easily extended, or have other issues which can negatively affect SEO.

How can you sort the wheat from the chaff, and select an HTML template for your website which will provide a solid foundation for your SEO campaign?

Here's the basic process for selecting a template.

First, identify a few nice candidate templates with a design aesthetic that you like, and the page elements you need. Then, run them through a few quick tests.

1. Ignore older templates, they're not worth the hassle;
2. Check the template in an HTML validator;
3. Replace the default fonts with a Google font and see what happens;
4. Extend the navigation menu to see if it scales to the needs of your website;
5. Update the default template theme colors;
6. Review the documentation on customization that comes with your template (if any), or with the platform the template is based upon (such as Bootstrap or WordPress).

Let's unpack that process a bit, and see how these simple steps can help you select a great template.

Ignore Any Template More Than 3 Years Old

This might sound  harsh, but it's the single best thing you can do to increase your chances of landing on a template that doesn't drag your project down into some abyss or another.

Only in very recent years have fluid, mobile-first design techniques become widely understood and practiced. Grid layout systems such as used by Bootstrap were not unheard of, but they were uncommon and designs were still a little clunky. The grid systems have matured a lot in the past few years.

Templates designed before 2019 simply weren't put through the crucible of the modern mobile web. (Well, they sorta were, but they often melted down.)

Of course, templates which are under active development may be considred, even if they were first created several years ago.

If you spend your time evaluating recently designed or updated templates, you'll be forging your own, much better, luck, and building a better foundation for your SEO efforts.

Verify Correct HTML Validation of the Template

Use the W3C HTML Markup Validation Service to verify that the template HTML is valid and correct in the live demo or sample pages.

There might be certain errors in the template which are due to boilerplate code that would be fixed in the ordinary process of customizing the template for your website. However, you'll want to look carefully at any errors discovered by the markup validation service, and make sure that you understand them and how to fix them, if you decide to use a template that doesn't start out free of validation errors.

In particular, you'll want to be wary of templates which have validation errors related to improper nesting of HTML elements. Such warnings or errors as, "element div not allowed in element a in this context" are a red flag. This is a sign that the designer took shortcuts to make the site look pretty, but it may not work in certain web browsers, may not even work in different versions of the same modern web browser, and may not work well on mobile devices (which have smaller screens). Unless you are a highly skilled web designer, it can be very difficult to fix errors of this type, and in some cases you can't fix them without changing the overall template or navigation menu design.

Generally speaking, it will be easier to integrate new design elements into a correctly validating HTML template than into one riddled with structural HTML errors and warnings. Sometimes the simplest change, such as adding a dropdown menu, or centering a copyright notice at the bottom of a footer can break, for no obvious reason, the layout flow on a page riddled with structural HTML validataion errors. (Yes, that example comes from real-world, recent experience, with a template designed within the past year!)

It's OK to pick a template that has some HTML validation errors and warnings, so long as you understand the issues. If you fix those issues before you begin to modify and extend the template to fit your needs, your path will be smoother.

Google and Microsoft Bing value correct HTML, because poor HTML leads to a poor user experience. Many validation errors in a web page are likely to directly affect your SEO performance. Even a few errors related to non-valid nesting of HTML elements might knock your website down a peg.

Test CSS Restyling of Fonts

Replace the typeface selected by the template designer with a typeface from the free Google Fonts library. They have very nice instructions and replacing the font should be pretty straightforward.

If the designer has used Sans Serif typeface in the templates, change it to a Serif font so that you can easily spot elements which might have been styled in an overly specific manner.

You might see, for example, that pull-quotes remain in the original Sans Serif font styling after you've updated the font family for the page to a  Serif font. If so, you might have a little more CSS spelunking to do. You might be able to simply remove the overly-specific font stylings from the template, so that the template system can be easily styled from the root or body of the CSS. Otherwise, you can override them  for the elements you use in your site custom.css.

Extend the Navigation Menu and Test on Mobile Devices

The Achilles Heel of a great many otherwise lovely templates is the navigation system. So many are designed to work as single-page sites, or sites with 3 to 7 pages. If your sites needs dozens or hundreds of web pages, you'll need to make sure that the basic navigation in your template can be extended without breaking the fluid design or the mobile experience.

Sketch out the structure of your site, how many sections at the top, how many pages in each section, and then extend the navigation system in the template to aproximate the scale of your website. Make sure navigation works on both desktop and mobile.

Check to See Colors Can Be Easily Restyled with CSS

I normally save this test for close to the end, because there are lots of different schemes and conventions that designers use to style colors in HTML templates, and it can be a little tricky to figure out what they're really doing, so that you know how to test changing the theme colors. If a template flunks one of the simpler tests above, then you get to skip this step.

If you're new to all this, it can be useful to look at some examples. The W3 CSS Color Themes is a very straightforward scheme for setting theme colors. It's a great place to start to see the basics of how CSS works.

At the other end of the spectrum, Bootstrap has a very nice, elegent, convention for setting theme colors, but there are a couple more layers of abstraction so it can be tricky to approach the topic directly in Bootstrap, without first getting a handle on the basics with a simpler template kit. On the other hand, Bootstrap has a vibrant community and excellent documentation, so if you're alreadly comfortable with CSS basics, it can be a good idea to see how they do it, even if you're planning to use some other template or design system. See the UX Planet How To Customize Bootstrap to establish a beachhead here if you're new to Bootstrap and want to check it out.

Test Bootstrap Templates for CSS Restyling with Themestr.app

If you've selected a template which is built on top of the Bootstrap design system, it's a good idea to generate a custom Bootstrap style with Themestr.app and drop it in place to see if all elements of the template respond to the new colors and fonts. If not, look in the CSS extensions of your designer template to see if they've used the anti-pattern, !important (which should be avoided).

If the template theme system you've selected as a layer on top of Bootstrap has been well designed, the CSS file from Themestr.app can be dropped into your site's custom.css and fonts and colors will be updated accordingly.

Working With Template Vendors

If you've found a commercial template you like, and discover issues which could negatively impact the SEO performance of your site, contact the vendor and let them know what you found. The vendors seem to be so focused on making cool designs that they sometimes overlook issues like correct HTML validation, extensible naviation, or accidentally broken mobile fluid design. Template vendors need to know that you care about SEO when you're selecting an HTML template.