Shepherd Interactive

Search engine ranking is very important to our clients. They want their information to rank highly in customers’ search results. They want the right information to show up for the right search keywords and they know that this is a fundamental key to a successful online business. Shepherd Interactive gets it. We know that there are many techniques and strategies that can assist with high search engine ranking — in fact, entire businesses are built around search engine optimization (SEO) consultation. When we work with our clients, we not only give them good SEO advice they can use, but we also implement many techniques for them “behind the scenes” as well.

According to Google, content is king. One of the programmatic techniques we utilize to support this is source-ordered content. The idea is simple: give search engine spiders your page content starting with the most relevant content first, ending with the least relevant content last (site navigational links, header links, footer links, copyright links and copyright text, etc).

The implementation is fairly straightforward, yet largely unused; often you will see that websites have been coded so that navigational links appear before the actual content of the page when viewing source. There is an important distinction between the source view and what a the page actually looks like in a browser because the source view is what search engine spiders “see.” This means the search engine spiders must look through all the navigational links, all the header text, and all the left-side navigation text and links before getting to the actual content body of the page. This conflicts with the notion that “content is king.”

Even legacy websites that have table-based layouts can benefit from source-ordered content optimization. For example, a typical table-based layout might have the following markup:

<table>
  <tr>
    <td>
      company logo / tagline and slogan - "be all that you can be"
    </td>
    <td>
      company banner image / company phone number / address / contact information (1-800-555-1212)
    </td>
  </tr>
  </tr>
  <tr>
    <td></td>
    <td>
      <!-- horizontal navigation -->
      website link 1 - about us
      website link 2 - products and services
      website link 3 - locations
      website link 4 - testimonials
      website link 5 - contact us
    </td>
  </tr>
  <tr>
    <td>
      <!-- left-side navigation links, sub navigation -->
      subnavigation link 1 - company profile
      subnavigation link 2 - client list
      subnavigation link 3 - company portfolio
      subnavigation link 4 - career opportunities
      subnavigation link 5 - photo gallery
      subnavigation link 6 - sample videos
    </td>
    <td>
      This is where the heart of this page's content actually starts.
      Look at how low it is positioned in the source in comparison
      to the rest of the content.
    </td>

By changing the table markup slightly, we can change the ordering of how the source would appear to search engine spiders so that the content appears above the left-side navigational links. Here is an example of what the markup would look like after this is done:

<tr>
  <td></td>
  <td rowspan="2">
    This is where the heart of this page's content actually starts.
    Look at how low it is positioned in the source in comparison
    to the rest of the content.
  </td>
</tr>
<tr>
  <td>
      <!-- left-side navigation links, sub navigation -->
      subnavigation link 1 - company profile
      subnavigation link 2 - client list
      subnavigation link 3 - company portfolio
      subnavigation link 4 - career opportunities
      subnavigation link 5 - photo gallery
      subnavigation link 6 - sample videos
  </td>
</tr>

Notice in the above example that for search engine spiders, the page body content now appears BEFORE the left-side navigation. The header text still appears before the body content, but with this change, we are moving a step in the right direction. However, by using a CSS-based layout, we can truly show that content is king. Consider the following markup:

<div id="container">

  <div id="body">
    This is where the heart of this page's content actually starts.
    Now look at how it is positioned in the source in comparison
    to the rest of the content.
  </div>

  <div id="left-navigation">
    <!-- left-side navigation links, sub navigation -->
    subnavigation link 1 - company profile
    subnavigation link 2 - client list
    subnavigation link 3 - company portfolio
    subnavigation link 4 - career opportunities
    subnavigation link 5 - photo gallery
    subnavigation link 6 - sample videos
  </div>

  <div id="header">
    company logo / tagline and slogan - "be all that you can be"
    company banner image
    company phone number / address / contact information (1-800-555-1212)

    <!-- horizonal navigation -->
    website link 1 - about us
    website link 2 - products and services
    website link 3 - locations
    website link 4 - testimonials
    website link 5 - contact us
  </div>

  <div id="footer">
    copyright text goes here
  </div>

</div>

Now, the body content appears first before any other content on the page (aka front-loading). This is good because that is normally where the keyword-optimized content will be. Next is the context-specific subnavigational links, then the ubiquitous website header content and footer content. The header and footer content are considered least important because they are repeated on each page and do not change. They also do not contribute any meaningful content to the information that is being presented on the page. Now, using CSS, we can arrange the <div> elements where they belong on the page, with the appropriate color and font treatments according to the website design and brand guidelines.

Tags: content before navigation, seo, source ordered content