SEO Design Tactics: Before You Write Even a Line of Code

Search Engine Optimization (SEO) is often regarded as a mysterious and arcane discipline by most web designers… and yet, with just a few strategies, you can transform your designs into SEO juggernauts before you even write a line of code. This article will seek to demystify SEO and I’ll give you a few tips that you can put to use in the design phase of a website.

Designing for Search Engine Optimization

Search Engine Optimization (SEO) is taking the marketing industry by storm and quickly becoming one of the most important Internet marketing tactics. More and more businesses are looking to take advantage of SEO and this means web designers need to start thinking of how search engine optimization can influence the design of a website.

Establishing a site’s basic SEO strategies during the design phase is the best way to 1) ensure that the site performs well in search rankings and 2) prevent the site owner from ruining your design by trying to add these strategies themselves!

Nothing is worse than creating a beautiful design for a client only to have others come in and ruin it by adding a bunch of extra unplanned elements. Staying up on whats happening in Internet marketing and the latest patterns in SEO will only help you as a web designer and will keep your sites looking good!

Below are some common techniques SEO strategists use to enhance on-site search engine optimization. By keeping these elements in mind, you can design a website that will be easy to optimize since everything has already been taking into consideration when creating the layout.

The Primary Design Strategies for SEO

Strategy 01: Clear Navigation

Keep your site navigation hierarchy as flat and clear as possible. The more sub categories/folders you have (or the deeper your hierarchy is), the harder it will be for search engines to index all your pages. A flat hierarchy also helps search engines view more of your pages as “important”, thus giving them more weight in the search rankings.

Many designers don’t feel that they have control over a site’s navigational hierarchy when they are talking with a client… this really shouldn’t be the case though. Clients look to web designers as the experts of these things, so if you kindly instruct them to keep their navigational structure as clean and tidy as possible, they’ll usually listen.

The navigation design is important as well; Using images for your text can often ruin the ability for a search engine to properly crawl your site. Most font-replacement technologies (FLIR, SIFR, Cufon, CSS3, Embedded Fonts, etc.) are SEO friendly though, so this doesn’t mean that you have to stick to Arial or Times New Roman. The key is designing with “ease of use” in mind. Avoid nesting navigation or using non-traditional UI elements without discussing it with a developer first.

Strategy 02: Design Your Titles & Subtitles

It’s often helpful to actually send over a separate design comp to a developer that points out exactly what each text element is supposed to be coded as.

One of the most important elements of on-page optimization is having titles and subtitles with target keywords phrases. The most commonly used tags by SEO strategists are H1′s, H2′s and the tags. When creating and SEO friendly website layout, make sure you have spots for these tags on each and every page… and style them properly.

It’s also extremely helpful to point these elements out to the developer (if you’re not coding it yourself). Taking just a few moments to explain that each title should be coded as an H1 or H2 can save you a lot of frustration in the long run.

You might not be able to control how effectively the site owner will make up these titles when they add their own content, but designing with H1 and H2 elements at the top of the design hierarchy will ensure that they have the best chance at being discovered by search engines long after you’ve walked away from the project.

Strategy 03: Create Custom Landing Pages

Sites will often include custom landing pages for special events.

The phrase “content is king” is commonly spoken in the marketing and SEO community. Without content, a site has little value in the eyes of the search engine. Most search strategists want lots of unique content on every page and will often create many custom landing pages with unique content that are all optimized for different keywords. Creating a “landing page design template” for projects that are really seeking to maximize their search engine rankings is a fantastic idea.

When you design your landing page layout, make sure every page has room for at least a few paragraphs of description text. Otherwise, text might be added later and it may end up looking forced and out of place. If you design the layout with content in mind, the content will blend nicely and will actually be useful for the readers as well as the search engines.

Strategy 04: Image SEO Tactics

Images can be a great source of search traffic and they also provide search strategists with better on-site optimization. Every page should have a spot for an image, which should be worked into the content mentioned above. These images should have optimized file names, alt tags and titles that include the target keyword phrase.

Oh, one other note on images: Never use an image in place of text when you can help it! Text that’s embedded in an image might be readable for human visitors to your site, but search engines won’t see it. Whenever possible, use images with descriptive text to give the search engines something to find.

Strategy 05: Include Deep Linking

Internal linking, also known as “deep linking”, is another common practice by search strategists. This isn’t a very dramatic visual element, but the site could end up having more links on pages than you expected. For instance, if the site is going to have several category levels, SEO strategists suggest that you include links to all of the sub-categories on each main category page. The sidebar is usually a good place to drop this kind of “link list”, but it’s also common to add links in the footer on important SEO landing pages.

These links are important for SEO because they help search engines understand what pages are about. Target keyword phrases should always be used when deep linking to other pages.

Where this comes to play in design: I often see site owners try to add these elements after the design phase… which usually results in ugly link-lists that feel completely out of place. Providing a simple design template that they should abide by if they choose to add things like this in the future will help prevent them from ruining your hard work!

Strategy 06: Design a Site Map

Every website should have an HTML and XML sitemap (also known as an “archive” page). These sitemaps help search engines crawl/index your site and help users to find content. In addition to a basic XML document, it is especially important to have a well designed HTML sitemap for large websites.

As an added benefit, these sitemap pages can make your site design more usable. Navigating large sites can often be tricky and many people use sitemaps to pinpoint what they are looking for. So, when creating a website it’s highly advisable that you design a custom layout just for the sitemap. This design template should be capable of displaying possibly 100′s of links in an organized fashion, so do your best to plan for a well organized and easy to read layout.

Strategy 07: Incorporate Social Media

Social media is another very popular marketing method that actually has an impact on SEO. Search engines are starting to use social media popularity as a signal for how relevant and important content is on the web. By integrating social media “share” buttons into your design, you can help increase the relevance of content to search engines. It’s also common to have icons somewhere linking to the main profiles of Twitter, Facebook and other social profiles on a website. The more “social” traffic that a site can generate, the higher that site will show up in search rankings.

Examples of SEO Friendly Websites

Virgin.com

The Virgin website does a number of things right from an SEO standpoint. They embed deep-linking inside their navigation dropdowns, the titles are all styled with SEO font-replacement methods, and they include a fantastic sitemap that is expansive, yet easy to scan.

Wikipedia.org

While Wikipedia might not win any awards for incredible design, they are worth referencing for SEO strategies because they just do it so darn well. Wikipedia is the king of deep linking and content creation. They have massive amounts of indexed content (over 100,000,000 pages) and a majority of their pages rank extremely well in the search engines partly due to their impressive deep linking. Every page on wikipedia links to other pages on Wikipedia using search engine friendly, keyword rich text links. This helps keep users on the website longer, it helps users find more relevant content and it helps increase the rankings of all their pages in the search engine.

Bnet.com

The Bnet website is a great example of a site that merges great design with SEO friendly strategies. Their navigation is stylish, yet very easy to crawl. The site index makes it very easy to find a wide variety of content. The most important feature being the category deep-linking. They also have solid on-page optimization using things such as page titles, content titles and breadcrumb trails to enhance on-page SEO and rankings.

eHow.com

eHow is another content behemoth with tons of high ranking pages. eHow prides itself on having extremely useful content on pretty much every “how to” topic imaginable. The key to their success is not only the quality of the content, but also their impressive on site optimization. They have a very clear SEO friendly navigation on the left hand side for categories. All their subpages also have SEO friendly navigation on the left hand side, plus many sections that link to popular and related content no matter what page you are on.

eHow also makes great use of the flat navigation we mentioned. All their content is only one level down from the root folder. So all their categories, sub categories and single pages are http://www.ehow.com/something/.

Final thoughts

The Internet is becoming more complex on a daily basis, with business owners wanting more and more features and elements on their site. The problem is everyone also wants clean, hassle free websites that are as user friendly as possible. It can be difficult to find a happy medium between the two, but the way to win the war is to keep thinking ahead.

Lots of site owners have a site designed without ever considering where they want to go with SEO… so they’ll often try to add search strategies after the design is complete. You can usually tell when a site owner has done this – widgets will look odd and out of place; social media buttons will look like they were taped on; and design templates can look completely broken. Establishing a site’s basic SEO strategies during the design phase is the best way to 1) ensure that the site performs well in search rankings and 2) that the site owner won’t ruin your design by trying to add these strategies themselves!

Learn what people are going to want ahead of time to improve their visibility on the web, so you can come up with creative, eye-catching designs that also have all the latest features and elements business owners expect.

Do you have your own SEO strategies or tricks? Have a question about this article? Leave some comments below!