Guest article: Typesetting for SEO

Our latest guest feature writer is Sean Enns of Harbour City SEO. Sean's take on SEO is to set beautiful text that shines for both machine readers and human eyes; read on for his under the bonnet approach to typesetting text on the web.

Search engine optimizers are slaves to the search engines. We spend our days and nights trying to understand systems shrouded in myth and misconception, endless hours spent seeking the secrets to ever-shifting and ambiguous algorithms. Try as we might, we never really get to the whole truth, though there’s an occasional glimmer when we look hard enough. 

While robots handle the rankings, it’s important to remember that it’s people, not machines, that we’re really trying to communicate with. The heart of SEO is communication: with search engines, and with people. The biggest challenge today is to balance readability for humans and search engines, with whom we communicate in very different ways.

Machines, for instance, don’t care about kerning, word spacing or line height. They don’t care about contrast, and whether you publish your post in Swiss 721 or Comic Sans.  These formatting decisions have no effect on your rankings (although the rankings do, interestingly enough, bias results towards good spelling and grammar). So while good typography is important in the context of pleasing the user, all the search engines care about is text and the underlying code. Good SEO is about striking a balance between what’s good for search engines and users. Let’s look at how.

Make your content (machine) readable

Five years ago, I may have advised against using webfont rendering technology, but over the last two years we’ve seen major growth in the accessibility and availability of online type. With the advances in HTML and CSS — especially the near-universal compatibility of the @font-face selector with modern browsers — it’s not just easier to use creative type solutions online; it’s also free of Flash, meaning it’s friendly to your SEO strategy. 

First, focus on speed

Page speed is a major consideration in SEO strategies these days, so you need to make sure your site loads quickly. Every second counts. There are some obvious things you can do, like making sure your images are scaled properly and optimized for web viewing. More specifically, there are strategies specific to serving webfonts that will keep your site performing at peak efficiency.

Think about using a content delivery network (CDN) to distribute static content (like your font files) on servers located around the world, so that data is stored in closer proximity to your visitors. The fonts aren’t huge, but page speed is a game of inches, not miles, so every little bit helps.

Leverage browser caching. You’ll want to do this for your site, regardless of whether you’re using webfonts or not. If you are, it’s worth adding some extra rules into your .htaccess file. Basically, setting up browser caching will mean that files will be stored (cached) by the client’s browser, cutting down on the load time for future visits. (See script below.)

# 1 YEAR Header set Cache-Control "max-age=29030400, public" # 1 WEEK Header set Cache-Control "max-age=604800, public" # 1 MIN Header set Cache-Control "max-age=60, private, proxy-revalidate"

Keep your code clean.

Keep all your CSS in one place. Ideally, you’ll want to aggregate all of your CSS rules into a self-contained stylesheet and avoid the use of inline styles for font styling. Use efficient selectors, and if you use a framework (like 960.gs or Blueprint), make sure you purge any styles that aren’t being used.

During development, especially for large sites, it often makes sense to use multiple stylesheets; you might have one stylesheet for typography, one for layout, one for color and one to handle webfonts specifically. But multiple stylesheets aren’t good for page speed, because you’re asking the browsers to make extra round trips. One solution is to keep separate files for development purposes, and aggregate all of your styles into a single minified version for the live site.

Break up your content with headings

Heading tags (H1, H2, H3, etc.) still play a role in optimization. They’re primarily used to organize content into main and sub sections, but the keywords you use in your headings will affect your page’s ranking. The rule of thumb is to use H1 for the main heading with your primary keywords, H2 for section headings (use alternate keywords here) and H3/H4 for paragraph headings. Because the H3 and H4 tags can get quite small, you’ll also want to make sure the font you’re using for your headings scales well to smaller sizes.

Use a table of contents

Links carry authority when they go from your site to another site; search engines “read” the words contained in the anchor text and apply those keywords to the destination. To a lesser degree, they also confer authority when they go from one page to another within your site. They even carry carry some weight when used as links to anchor points elsewhere on a single page of content.

Search engine representatives for Google recommend using a table of contents and anchor links as navigational tools on long copy. This communicates your content to users more effectively, and[i] has also been shown to increase the rankings of specific pages on a site. 

Focus on people first

Following the rules of typography — font size, kerning, line height, letter spacing and alignment — is key to engaging your audience. Beyond your audience, search engines are a unique reader that need to be spoken to in a specific voice. How clear your voice is can be the difference between your website's link on Google's search results displaying on page 2...or page 20.

Sean Enns is an SEO specialist, internet marketing consultant and amateur web-typographer. He’s the owner of Harbour City SEO, a boutique agency operating out of Nanaimo, in beautiful British Columbia.