In this article, you discover the basics of site design with search engine optimization in mind. Building a website is like baking a cake in a lot of ways; one of the first things you have to do is gather your ingredients.
We first guide you to deciding on the content and the types of keywords that you want. Then we discuss H# or heading tags (HTML code used to format headings), page headings, and the importance of using clean code for your site.
You find out how to organize and name all the assets on your page, including images, videos, and podcasts. After you have everything organized, you discover how to actually construct your site.
We finish off this article by discussing keeping your page simple and neat, creating dynamic content for your site that is still seen as relevant by the search engines, and developing a design procedure so that everyone in the web development process is on the same page.
We talk a lot about HTML, Cascading Style Sheets (CSS), and JavaScript in the upcoming pages; however, we don’t attempt to teach you to write code in this article. We strongly recommend that you learn at least the basics of HTML before you attempt SEO.
Even if you aren’t going to be the one doing the optimization on your website, it’s a good idea to learn the basics. If you want to be good at search engine optimization (SEO), you need to understand both the marketing end and the technical end.
If you know the basics of HTML, you can communicate with your IT guys in their own language, which prevents them from claiming something can’t be done if it actually can. It also allows you to be able to catch mistakes others might miss, helps you research your competition’s websites, and is just generally good to know.
Table of Contents
1. Deciding on the Type of Content for Your Site
You must know what your business is about. It colors how you choose your keywords and how you arrange your site. You need to know if you have a research or an eCommerce site, or if it’s both. How can you tell? Here are a few ways:
Research
A research site’s keywords should lean toward how-to types of phrases. As in [How do you fix a lawnmower?] or [How do you say Where is the consulate, I lost my passport? in Spanish?]. Or even more specific keywords like [Mustang] or [John Wilkes Booth]. These are keywords that people use when they do research.
If you have a site that provides information, such as recipes, lists of dead historians, or classic auto club newsletters, you want your keywords to be research-based. Research websites typically use keywords like [research], [reviews], [how to], [information], and so on.
eCommerce
If you have an eCommerce site, your site is designed to sell things. Your keywords are geared more toward users who want to make purchases. That could include the keyword [free] because who wouldn’t want free stuff?
Also, you’d include much more specific keywords in an eCommerce site than in a strictly informational site, like [Ford Mustang convertible with leather interior], because people search for broader terms when doing research and more specific terms when they’re ready to make a purchase. eCommerce sites have calls to action in their content, using terms like [buy now], [purchase], [shopping cart], and so on.
Research and eCommerce
Some sites provide both information and purchasing opportunities. You can have a site that provides tons of information and recipes for the best barbecuing techniques, and have things like grills and barbecue sauces available on your website for purchase.
Knowing what kind of a business you have (and what kind of website you want to build/redesign) helps you to pick out your keywords. Separate them into information-type keywords and transaction‐type keywords. This means thinking about whether the keyword would draw someone doing research to your site or someone ready to buy something.
You have to do research and continue to do it. SEO is not like doing research for a tenth‐grade English essay, where you do it once and then never have to do it again. The market changes constantly and you have to be able to keep up with it.
2. Making a User-Focused Website
The process of building your website so that it functions in a way that caters to the specific needs of your customers is called building a user‐focused website, or designing for usability. A user-focused website is just as it sounds — a website that is created with a focus on users and their needs.
Designing a user-focused website means thinking about the preferences of your personas when you make decisions about your navigation, search functionality, visual elements, shopping cart flow, and any other elements of your website.
Whether you’re building your website from scratch or making improvements to an existing website, always keep your user’s preferences and needs in the front of your mind. Think:
- Will this placement confuse the user?
- Will this placement/font size/color/and other design aspects make my user happy?
- Can I alter this design in any way to improve my user’s experience?
Keeping usability in mind keeps your end-user happy, often resulting in more sales and conversions that in turn keep you and your boss happy, too. Remember that SEO and usability are not mutually exclusive. Rather, they actually work hand in hand because many of the things that are good for human visitors are also helpful to search engines.
Usability may even make the search engine happy: Google lists “Focus on the user and all else will follow” as the number one item in its “Ten things we know to be true” company core values documentation.
Keep in mind that you can never confirm the exact factors the search engines evaluate to determine rank, but you can look for clues and make educated guesses. Google’s listing of “focus on the user” as the number one priority in its core values is a pretty good clue.
3. Choosing Keywords
After you decide what kind of site you’re building and for whom, you have to choose what keywords will go where. You need to know what keywords to assign to each page in order to:
- Focus the page content.
- Make it faster for the viewer to understand the content.
- Make it easier for a search engine spider (or robot, referring to the search engine programs that read your site and index its contents) to determine what each page is about.
Running a ranking monitor to discover what’s already working
If you have an existing website, you have to first establish a benchmark; that is, you should find out what’s currently working before you begin rearranging things. You need to find out which of your web pages already rank well in the search engines, and for which keywords.
For instance, if you have a page on your site that’s already ranking in the top five listings for one of your keywords, you should just designate that as the main page for that keyword and leave it alone.
Check on which keywords are working for you and which aren’t and don’t fix something that’s not broken. Conversely, if you have a page that is consistently not ranking for any keywords, it’s time to fix that page.
To help you evaluate your keywords, you can take advantage of a useful tool called a ranking monitor. This tool is extremely helpful for keyword research and keeping track of how your pages are ranking, both now and further down the road as the market grows and changes.
A ranking monitor tells you without personalization bias where your pages rank in the search engines for each keyword, or whether they rank at all.
At the time of this writing, we don’t know of any ranking monitor available for free; however, subscribing to a paid monitor is worth the cost. No matter which you choose, you need to be looking for a ranking monitor that:
- Checks multiple search engines (domestic and international)
- Includes historical data, so you can see trends over time
- Is “polite” to the search engines by automatically spacing queries over time, or allows you to customize the crawl rates to use time delays
- Supports proxy (remote location) queries
- Offers multiple languages
- Is schedulable
- Runs from a server and not from your desktop computer
- Integrates with other tools to allow for analysis
Matching Meta tags and keywords to page content
After you run the ranking monitor, you can identify the pages that rank well for particular keywords. Consider those ranking keywords as being assigned to those pages. Remove other unrelated keywords so that your page stays focused very clearly on its main keyword.
You want to follow some SEO best practices for how you assign keywords to a page. When assigning keywords to your web pages, select one to five main, related keywords (or keyword phrases) for each individual page.
Allow two or three supporting keywords (or keyword phrases) per page. Supporting keywords may be suitable for developing pages around as well as for increasing your depth of content.
Make sure all keywords on the page relate to one another: Too many unrelated (but well-ranking) keywords can dilute the theme and bring your rankings down. If the page is about painting a classic Mustang, make sure the keywords all relate to painting a classic Mustang.
Your page content should also include synonyms and clarifying words that a user would be looking for. Slang terms are excellent clarifying words because they mimic the way people actually speak: [stang] or [pony car] for Mustang wouldn’t be considered secondary keywords, but they’re important to prove your expertise to your visitors. If you already have a website and need to tweak it for ranking, take a look at the page you have and think about where you can enhance it.
Going back to the classic car customization example: If you have a page on your site that’s mostly about tires but it also has a paragraph about rims and a line or two about wheel axels, that page is a little disjointed.
Because the page is primarily about tires, make it all about tires and create a separate page for rims and another page for axels. Then pick two or three really good supporting keywords for your page about tires. After you choose your main and supporting keywords for each page, you are going to arrange them strategically. You should put keywords in
- The page’s title tag
- The Meta description and Meta keywords tags (metadata appears in the Head section of the HTML code and defines the page content)
- The headings on the page, especially in your H1 tag
- The page content
Search engines look at the Title, Meta Description, and Meta keywords tags not only to understand what your page is about but also to grab text to display in your search results listing.
Search engines pull the descriptive text that displays on their results pages from any of several different sources depending on the search query and the engine itself: from the Meta description tag, from the page content, occasionally from the Open Directory Project (DMOZ), and from Yahoo, which often uses the description from a site’s listing in the Yahoo Directory.
When you’re structuring the HTML coding for a web page, it can look a little like an outline, with main headings and subheadings. An important place to have keywords is in those headings, placed within heading tags. Heading tags are part of the HTML coding for a web page. Headings are defined with H1 to H6 tags.
The H1 tag defines the most important heading on the page (usually the largest or boldest, too), whereas H6 indicates the lowest-level heading.
You want to avoid thinking of headings as simply formatting for your pages: Headings carry a lot of weight with the search engines because they’re for categorization, not cosmetics.
You can control what each heading looks like consistently through your site using a CSS style sheet that specifies the font, size, color, and other attributes for each heading tag. Here’s an example of what various heading tags can look like:
<H1>This is a heading</H1>
<H2>This is subheading A</H2>
<H2>This is subheading B</H2>
<H3>This is a lower subheading</H3>
Search engines pay special attention to the words in your headings because they expect headings to include clues to the page’s main topics. You definitely want to include the page’s keywords inside heading tags.
Heading tags also provide your pages with an outline, with the heading defining the paragraph that follows. They outline how your page is structured and organize the information. The H1 tag indicates your most important topic, and the other H# tags create subtopics. You should follow several SEO best practices for applying heading tags.
First, you want to have only one H1 tag per page because it’s basically the subject of your page. Think of your H1 tag like the headline of a newspaper article: It wouldn’t make sense to have more than one. You can have multiple lesser tags if the page covers several subsections. In feature articles in newsletters, you occasionally see subheadlines that are styled differently than the headline:
Those subheadlines would be the equivalent of an H2. Say that you have a page that describes how you can customize classic Mustang convertibles. Your very first heading for your page should be something like this:
<H1>Customizing Classic Mustang Convertibles</H1>
Your second paragraph is about customizing the paint job for the convertible. So it should have a heading that reads:
<H2>Customizing Paint for Mustang Convertibles</H2>
When you view the code of your page (which you should most definitely do, even if you have someone else create it for you), it should look something like this:
<H1> Customizing Classic Mustang Convertibles</H1>
<p>200 words of content about Customizing Classic Mustangs using the keywords.</p>
<H2> Customizing Paint for Mustangs </H2>
<p>200 words of content about Customizing Paint for Mustangs using the keywords.</p>
<H2> Customizing Upholstery for Mustangs </H2>
<p>200 words of content about Customizing Upholstery for Mustangs using the keywords.</p>
When assigning heading tags, keep them in sequence in the HTML, which is how the search engines can most easily read them. Heading tags should follow the outline structure you used in school for an outline or a technical paper. If you wanted to add an H3 tag, it would have to follow an H2 in the code.
Similarly, if you had an H4 tag, it could only follow an H3 tag and not an H2. Heading structure is a relatively simple concept, but you would be surprised at how many websites use the same type of heading for every paragraph or just use their heading tags to stuff keywords into the HTML code.
In reality, many sites do not properly use heading tags, so it should be a quick win to place appropriate headings on your site. Absolutely avoid any headings that look like this:
<H1>Mustang Mustang Mustang Ford Mustang</H1>
This tag is unacceptable to search engines (to say nothing of your visitors) and is considered spam. The words in each heading tag should be unique and targeted to the page they’re on.
Unique and targeted means that your heading tag’s content shouldn’t be duplicated anywhere across the site. If the heading on your tires page is “Classic Mustang Tires,” “Classic Mustang Tires” shouldn’t be the H1 on any other page on your site. Search engines look for uniqueness on your page.
For example, if you have an H1 heading of “Ford Mustang Convertible” at the top of two different pages, the search engine might read one of the pages as redundant and not count it. Having unique heading tags allows the search engine to assign more weight to a heading, and headings are one of the most important things on the page besides the Title tag.
If you want to have any of the elements on your website (Title tags, heading tags, and so on) help your pages rank in a search engine, they all need to be unique. It may take a little more time to go through your site and think up unique, relevant, keyword-rich tags for everything, but it’s worth the effort. The little things count when it comes to SEO.
5. Keeping the Code Clean
Another part of building a search engine-friendly website is keeping your code clean and simple. When we talk about code, we’re talking about languages like HTML, XHTML, AJAX, JavaScript, and the like.
Coding supplies the building blocks of your website. If we were talking about building a house, the code would basically define the walls, floors, insulation, light fixtures, kitchen sink, and everything right down to the color of the paint in the bathroom.
We assume that you already know a little bit about HTML, CSS, and JavaScript code and what it all looks like. In this article, we assume that you’re at the planning stage of your SEO campaign, gathering your assets and starting to visualize a big picture plan for your website.
But first, there are a few more concepts to grasp. You want to streamline your site’s code so that it’s an easy read for the search engine spiders. Keeping the code as clean as possible, as it relates to SEO, means some specific things:
- Get to each page’s content as soon as possible in the HTML view. You want your keywords to start showing up early in the search engine spider’s crawl.
- Code by using as little on-the-page markup (formatting and other types of on-the-fly HTML codes, such as Font tags, which could be controlled in a CSS style sheet, instead) as possible. If you have useless tags in your code, get rid of them.
The preceding list gives you some great goals, but how can you achieve them? These best practices can slash the code clutter right out of your web pages:
- Use an external CSS file to define the look of your website, rather than relying on inline formatting.
- Move any JavaScript code into an external JS file when possible. Include simple calls to the JavaScript file from your pages, which keeps the on-page code short and sweet.
You may also have extraneous tags lying around in the HTML. Code gunk buildup can happen if you’ve cut and pasted content from another source (such as an old web page of yours or a document from Microsoft Word or other programs that add a ton of unnecessary HTML code to your text).
Or you may have been working on a particular page for so long that it’s acquired excess tags like barnacles on a ship’s hull. Go through and remove all the extraneous tags and code from your pages, including extra carriage returns. Simplifying your code streamlines the site and makes it easier to read for the search engine spiders.
If they read too much redundancy or if your page code appears too complex, they’re less likely to assign a lot of weight or relevancy to your page. Just as two drops of dye in a small glass of water have a lot more impact than two drops of dye in a barrel of water, the messy code could “dilute” the strength of your keywords.
A couple of programs are available to clean up your code if you’ve got a bunch of gunk hanging out in the HTML. The cheapest is your friendly neighborhood text editor, Notepad. If you’re used to reading HTML, just open your HTML file in Notepad and tidy up the raw code, one page at a time. If you’re using a UNIX/Linux server, save your work in UNIX format.
For those who aren’t able to read HTML easily, other tools are available for help. One free resource for tidying up cluttered code is aptly named Tidy, and it comes highly recommended by the W3C web standards consortium. Another free and easy tool is Dirty Markup, an online tool that cleans up unruly HTML, CSS, or JavaScript with the push of a button, right in your web browser.
6. Naming Your Files
How you name your files is important because a search engine looks at the filename as an indication of what’s in the file, so this is another good place to have keywords. Instead of naming your image of a red Ford Mustang like this:
*0035001.jpg
Rename the file as you’re uploading it to describe it, using something like this:
*ford-mustang-1967.jpg
Not only is the file now easier for you to identify when building your pages down the line, but it also now contains three keywords that search engines can read and add to their algorithms for ranking.
Use filenames that make sense to both the search engine and the user. You might understand the gibberish you just used as a filename, but someone else who doesn’t know you or your sense of humor might not. Also, use full words instead of abbreviations.
Searchers generally don’t use abbreviations in their search queries unless those abbreviations are very common. The same advice is true for naming video and podcast files. Make sure that the filename is descriptive and simple: It helps you and the search engine in the long run.
When naming your files with phrases, don’t leave spaces between words. Nor should you use an underscore (_) to separate words. Search engines interpret the underscore as its own character, so it’s like naming your file fordxmustang, which misses an opportunity to use your keywords when a search engine spider crawls it. It’s possible that search engines can figure it out, but you’re better off naming your files properly in the first place.
Instead, if you have to use spaces (remember, search engines can parse words from web page filenames without any help), use hyphens. They won’t be read as separate characters. That way, you can have files that look like this:
ford-mustang-1967-good-condition.jpg
Even without hyphens in your filenames, a search engine can actually parse out up to 500 words that are concatenated (run together without spaces). You might want to use a hyphen in places where there could be confusion in the parsing, either for a search engine or for a user. In those cases, you might want to throw in a dash in order to make it legible.
For example, the distinction between mensexchange.jpg and mens-exchange.jpg is important, after all. Eyetracking studies done by Mediative (formerly Enquiro) research have found that users are not likely to click on a long URL on the results page.
They tend to click the result below the hideously long URL instead. So when you’re naming the pages and files in your site, keep the length down to a reasonable level.
As descriptive as it is, you wouldn’t want something like this as your base domain name:
https://www.reallycoolclassiccustomcarsatareasonableprice.com/
Also, follow a standard of using either all lowercase or all uppercase in naming files. Apache servers are case sensitive: Lower or uppercase makes a difference to them. The pages /FordMustang.html and /fordmustang.html are not considered the same to a case-sensitive server.
Also, do not use more than two hyphens in a page URL, and avoid having more than one hyphen in the domain name. Filenames (like our ford-mustang-1967- good-condition.jpg example) are mostly exempt from this rule (we’ve found examples with 14 hyphens in the filename), but we still recommend economy in your naming conventions.
7. Keeping Design Simple
When it comes to designing your site, the old adage KISS is good advice: “Keep It Simple, Sweetie.” Make your website as straightforward and easy to navigate as possible. Make sure the links and instructions are clear and not horribly complicated.
Also, be aware of how much Flash you are using. Adobe Flash is a multimedia program that allows you to place animation on your website. There are many major companies out there with big, shiny websites that contain lots of complicated and cool-looking Flash.
But here’s a secret about those sites: A search engine can’t read them. A search engine is basically deaf, dumb, and blind. It can’t see what the viewer sees; it can only read the code. It can’t read a page as a person reads it (yet).
The search engines are trying to emulate what a person can see and react to, but technology isn’t there yet, so the search engine spiders have to make do with reading the code. Websites built entirely in Flash generally don’t have searchable content.
A search engine, being blind, deaf, and dumb, can’t see the Flash animations that describe all the cool things the website has to offer because all the search engine can see is the Flash plug‐in in the HTML code.
The capabilities of the search engines and of this technology are evolving rapidly. We may one day see Flash become as spiderable as text, but that day hasn’t arrived yet. That’s not to say that your website can’t contain Flash, but make sure there’s readable content that goes along with it. Including a few Flash movies on the page is a good thing for user experience, provided they are relevant and are accompanied by a reasonable amount of companion text.
Also, make sure that the Flash is not too complicated for the page, or for the user. Some sites create mini-applications using Flash and include them on their websites. If that’s your site, don’t miss an opportunity to pull good text content out of the application to include on your pages, as well.
For instance, if your Flash application contains instructions on how to use Flash, grab that text and make it part of the text on your page. Also, if you use Flash, place a description of the Flash content in the actual text of the page. That makes it easier for the user to understand, and a search engine spider can read it and use it in your ranking. It’s a win/win situation.
Also, many websites include a Flash animation as the splash page (sort of like a site’s welcome mat), and users have to sit and wait for it to load and play before going on to the actual site. In general, these pages are usually skipped.
Most people want to go to the content right away instead of having to sit through a minute of pretty, but useless, animation. If you currently use this Flash animation on your site, you should probably remove it. Here’s another hint for your website. Some people out there think it’s a cool idea to include music that plays when a user visits their website.
We can tell you right now that many people do not enjoy this. There is nothing more annoying than visiting a site and being unable to find the music player to turn off the background music. The only people who enjoy having music playing on the page are the ones who put it there in the first place and the ones who pay to have it there.
We would recommend that unless you have a site that actually sells music, don’t include background music on your site. And if you really must, make sure it defaults to off.
Keeping the content on your page simple and easy to navigate not only helps you get better rankings but also means that your user has a much better experience and will return to your site again. Follow this general rule: If it looks cool but is a pain in the rear to use, users won’t use it.
8. Making a Site Dynamic
A dynamic website is a site that is built using a template and a CMS (Content Management System) that gives you control of how to define your web page, pulling information from a database.
This means that the pages don’t exist until someone asks for them. If you have 10,000 products, you’re not going to build 10,000 individual pages by hand. Instead, you use a CMS to build it dynamically on the fly.
A CMS actually generates the page that a search engine spider crawls by taking the information in your database and plugging it into a template web page, so the CMS is responsible for creating all the tags, content, and code that search engines see.
The most important thing you need in order to have a dynamic site, and we really cannot stress this enough, is to have an SEO-friendly CMS. Any CMS that supports SEO completely allows you to access and edit these tags as well as to set rules for generating tags that are SEO friendly.
That means that you can focus on the content on your website. That content is what builds the page that the user sees. You need to be able to make changes to the H# tags and control the metadata on each page separately. Every element must be customizable.
If you cannot customize your current CMS, get a new one. End of story. If you can’t write a Title tag individually, you’re out of luck when it comes to SEO. If you can’t control your H1 tag, you’re out of luck.
Chuck your inflexible CMS and get one that allows you to control page tags and content; otherwise, you can’t do any of the SEO we’ve been talking about.
Pixelsilk is a low-cost CMS that was designed from the ground up to be SEO friendly. For simple websites, you could use blogging software like the highly customizable WordPress, which is free and open source.
Keep this list in mind when searching for a good CMS. It must be able to
- Customize HTML templates
- Produce unique Title tags
- Produce unique Meta description/keywords tags
- Produce unique heading tags (H#)
- Categorize content by groups
9. Making Your Site Mobile Friendly
A mobile-friendly website is a site that looks and functions equally well on a mobile device, such as a smartphone or tablet, and a desktop computer.
This is important because today more than a billion people worldwide are regularly using mobile devices to research and make purchases, and a good many of those people want to research and buy from your site.
If your site doesn’t look good on a mobile device, or if it’s not easy to use, you are going to miss conversion opportunities left and right. Having a mobile-friendly website is also important if you want your website to rank in mobile search results.
Google takes the mobile user experience very seriously. There are some who also believe mobile optimization is on its way to becoming a desktop ranking factor, as well.
When optimizing your website to make it mobile-friendly, you should take several factors into consideration, including the following:
- Choosing the right mobile design approach
- Designing for mobile user experience
- Understanding mobile’s effect on SEO
- Testing for technical mobile-friendliness
10. Developing a Design Procedure
Developing a design procedure for your website is also important. Keeping a procedure the same through all parts of the design process helps you if something goes wrong. If your design procedure is a set procedure, you can more easily pinpoint where the goof-up happened and fix it.
When developing a design procedure, create a style guide for your website conventions and best practices. If you use a template style guide, all images are named the same way, for example, using hyphens for spaces, and they are all saved under the same file folder.
All videos are named in a standard way and go in their own folder, and so on. This prevents confusion down the line. If you have a design team, make sure they’re all on board with the style guide and that any newbies you bring in are trained to follow it.
Also, make sure it’s a procedure that everyone can follow. Sure, it may all make sense in your head, but it needs to make sense to everyone else, too. (Besides, don’t be too sure that what makes sense to you now will make sense to you in six months.)
Document every last bit of your procedure, and if you have the resources, hire a technical writer to take it all down and rework it so that it’s understandable for everyone else.
Here’s a handy list of things you should be keeping in mind when you’re coming up with the standard design procedure for your website:
- Know what your site is about.
- Know your page themes.
- Know the major categories/silos.
- Know the subcategories.
- Know your keywords and how your research and choose them.
- Know whether your site is eCommerce, research‐oriented, or both.
- Know how you arrange your files.
- Have a set standard for naming files.
- Have a set standard for naming Title tags.
- Keep track of all your titles and headings in order to avoid redundancy.
- Know the color scheme, fonts used, and visual standards.
Having a set standard in place before you start also helps to keep the process moving as quickly as possible and results in the least amount of headaches for everyone involved. It also makes doing your SEO much easier because you don’t have to waste time redefining your goal with every single page edit.