facebookIcon tracking


Airtight SEO Audits, Part 2: Design and Coding

Published: July 10, 2013

Author: Kent Yunk

Our SEO Audits series continues with a detailed look at the design and coding elements that can help (or hinder) your site’s traffic.
(If you missed our kick-off post on site infrastructure, go ahead and catch up. We’ll be here.)
Design and coding issues involve all the front-end coding, including HTML, CSS, and JavaScript. They also incorporate design decisions, such as the use of Flash, graphics, and content formatting. These issues affect a site’s ability to be fully crawled and properly scored and ranked.
We’ll break it down as follows:
– HTML File Size
– Page Clutter
– JavaScript, DHTML and Form Elements
– Image Maps
– Frames
– Flash
– Custom 404 Page
– Content and Keywords
Let’s dive in.

HTML File Size

Large, slow-to-load pages run the risk of being crawled only partially or skipped completely. Bing, for example, calls for pages to be under 150K in size. The Bing spider will either simply stop reading after this point or may “weigh” the page size before reading and skip the page altogether. Likewise, Google suggests the cutoff is 100K. (This cutoff does not apply to PDFs.)
Level of Impact:  High

Page Clutter

Poor coding techniques may cause a visiting search engine spider to leave the website before reaching valuable content. Excessive clutter created by large JavaScript and style sheet code pushes valuable content down the page, reducing its prominence. Additionally, clutter adds to the file size of the page and, as noted above, may prevent it from being fully crawled.
Level of Impact: Moderate
What you might find (example): On most pages of the site, the actual visible body content of the page does not start until about one-third into the source code or more.

JavaScript, DHTML, and Form Elements

Search engines cannot execute JavaScript. As mentioned above, spiders may leave a page if JavaScript is present. Additionally, search engines may not be able to crawl sites that require JavaScript to navigate, nor will they read content that is contained in JavaScript pop-up windows.
Search engines also cannot read or interact with form elements, such as drop-down boxes for navigation. Therefore, pages with these elements may not be crawled, and a site will not be crawled at all if drop-down navigation is the only source of navigation.
Level of Impact:  High
What you might find (example): Disabling JavaScript still allows the pages to be displayed, but the user experience is somewhat compromised. This activity causes the home page to show each of the slider images stacked on top of each other. When cookies are disabled, the site will not load, leaving a blank page.
In this situation, you’d want to create a custom error page that tells the user that they will need to enable cookies to view the page. This practice will prevent visitors from leaving without ever seeing content.

Image Maps

Search engines cannot follow links contained in image maps. A site will not be crawled if image maps are used to navigate.
Level of Impact:  High 


Frames are an older technique of HTML coding that display multiple sources of content in separate scrollable windows on the same HTML page. We recommend creating frame-free pages to improve site usability and to help search engines more easily crawl the site content.
Level of Impact:  Low   


Search engines cannot follow links or read image content contained in Flash. A site will not be crawled if Flash is used to navigate. Valuable content contained in Flash should also be presented by alternate means to ensure that it is crawled, indexed, and ranked.
Level of Impact: Moderate

Custom 404 Page

A custom 404 error page—one with a brand-specific logo, navigation, sitemap, etc.—ensures that you do not lose searchers to a “file not found” 404 error page. Should searchers click through from a search engine results page, they will be able to easily re-enter the site from a page that no longer exists.
Level of Impact: Moderate

404 page custom
Sample 404 page from the Apple website 

Content and Keywords

Content and keywords include all visible text and some hidden content areas (such as page title and meta tags). This content is what ultimately should be optimized. However, content will not be found and scored if infrastructure and coding issues are present, so these items are also important. Content issues impact a site’s ability to rank well for a particular query.
A site’s content is critical to the success of any SEO campaign. Lack of keyword-rich content will negatively affect a site’s performance on search engines. Additionally, poorly formatted content may have a similar effect. Search engines heavily weigh well-written, informative, industry-specific pages. Specifically, search engines look at three main keyword attributes:
– Keyword Frequency—Keyword frequency refers to the number of times a keyword is used in the analyzed area of the page. Search engines view pages with more keywords as having higher relevancy and therefore score them higher. However, care should be taken not use too many keywords; most search engines will penalize this practice, because they consider it an attempt to artificially inflate rankings.
– Keyword Weight—Keyword weight is a measure of how often a keyword is found in a specific area (title, heading, anchor text, visible text, and other written elements) of the web page. Unlike keyword frequency, which is just a count, keyword weight is a ratio of keywords to total word count. A good rule of thumb is to not mention the keyword more than 10 times on a page. Search engines calculate keyword weight when they rank pages for a particular keyword. Normally, high keyword weight tells search engines that the keyword is extremely important in the text; however, a weight that is too high may make search engines suspect spamming and they will penalize the web site’s ranking.
– Keyword Prominence—Prominence is another measure, arguably the most important, of keyword importance. Prominence measures the proximity of a keyword relative to the top of the analyzed page area. A keyword used at the beginning of the title or heading or at the very top of the visible text is considered more important than other words. Prominence is a ratio that is calculated separately for each important page area such as a title, heading, visible text, anchor text, etc.
HTML pages are written similar to pyramid-style news writing. The most important items of a document’s visible text are placed at the top, and importance is gradually reduced toward the bottom. This idea also applies to keyword prominence. A keyword near the top of a page at the beginning of a sentence is given higher prominence. However, search engines also look for keyword presence in the middle and bottom of the page, so keywords should be placed there too.

Title Tags

The prominence formula takes the following factors into account:
1. Keyword positions in the area
2. Number of words in the keyword
3. Total number of words in the area
Keywords that appear at the beginning of an analyzed page area are given 100% prominence. To achieve our goal of 100% prominence, target keywords should be placed at the beginning of the title.
Additionally, many search services display the Title tag in their search results, so the tag must be compelling enough to prompt users to click through.
Key Tips and Recommendations:
– To maximize the impact of the title tag, relevant keywords should be placed as far to the left as possible (preferably at the beginning) to achieve 100% prominence.
– Keep the title concise to avoid diluting and mitigating the page message.
– Each page on the site should contain a title that is unique and relevant to the content on that specific page.
– Remove extraneous words and stop words. Auxiliary words like “and,” “on,” “a,” “the,” “for,” “to,” “about,” “are,” “that,” “were,” “by,” and “of” are too common, and search engines do not consider them. A title tag’s impact is diluted if it includes a stop word; therefore, it is best to omit stop words whenever possible.

Meta Tags

While dependence on meta tags is decreasing, they are still very important to the smaller engines (and sites that use Flash or dynamic scripting) because:
– In many cases, the meta tags are the only readable content on the page available to the engines.
– Even though some engines consider meta tag content irrelevant, others treat the tag content as body content.
– Engines sometimes use a meta description tag as a page description to display (snippet) in the search engine results page (SERP).
– Many internal search engines rely on meta information for scoring and ranking pages.
Key Tips and Recommendations:
– The meta description should include the primary keyword.
– The description should contain strong marketing language, such as a benefit statement, that is compelling enough to generate a click.
– Search engines sometimes log descriptions of the indexed pages and often display them along with the page title in their results.

Below is an example of how the PPC Associates site homepage has been displayed in the SERP.
meta description

Heading Tags

The keyword should be present in the very first heading tag on the page, regardless of whether it is H1 or H6. Using the target keyword as the first word in the title increases its prominence.
Search engines view heading tags just like the headline of a newspaper article. Because the tags describe the content that follows, engines give them a fair bit of weight. In a perfect scenario, a spider looks for a combination of title tag, heading or H1 tag, and the first and last 25 words on a page to contain a common theme. This “theme” is best encapsulated by the selected keyword.
The goal is to have the keyword at 100% prominence. Important points about heading tags:
– Page headings should be identical (or nearly so) to the page title.
– To maximize the impact of the heading tag, relevant keywords should be placed as far to the left as possible.
– Each page should contain only one H1 tag, but it can contain multiple H2 (or lower) heading tags.

Link Text

Search engines prefer plain text links. Text links help visitors and engines navigate, and they can provide engines with valuable information about the destination of each link. Search engines cannot read text contained in graphics like a visitor can, and graphical links do not provide much information about the page to follow.
Certainly, making use of an image alt attribute helps, but alt text is not nearly as important to the engines as link text. Link text carries more weight than both ordinary body copy and the alt attribute in the engines’ algorithms.
As the engines crawl, they develop opinions on the topic of each page based on the content contained therein. Link text provides the engines a clue to the topic of the destination. By creating text links that contain specific keywords describing the destination pages, the engines are helped in their quest to index and score content.

Alt Attribute

The alt attribute is descriptive text for an image coded in the HTML image tag. The alt attribute helps visitors with visual impairments determine images content by providing alternative (alt) text. While not very important to search engines, the alt attribute does provide another opportunity to use keywords.

Visible text

The first 200 words of the body tell the story about the page, making them the most important page elements to the search engine.
That’s “all” for this edition. Stay tuned for the rest of the SEO Audit series, which will address web templates, link analysis, and spam/black-hat techniques.

25 E Washington Street
Suite 420

Chicago, IL 60602(650) 539-4124


Want to become a client?

Contact Us decorative arrow

Want to join the team?

View Our Openings decorative arrow

Find us on social media.

Press inquiries.

Email Us decorative arrow

Expert insights for your inbox. Subscribe to our content.

Accept No Limits.

Learn more about 3Q/DEPT READ MORE