Link Development - Combining Adjacent Image and Text Links



Have you ever thought about internal link saturation? Take a look at the below <table> example, you've probably seen something similar to this in various ecommerce environments.

Sponsor Note: The SEO Snake Oil is being used as a product example only.

Adjacent Image and Text Links - <table> Example

SEO Snake Oil 25kg Drum SEO Snake Oil - 55 Gallon Drums
What is SEO Snake Oil? It is the strongest and best liniment known to mankind for the cure of all Blogger pain and lameness. Made from the oil of Chinese Water Snakes, our products contain a minimum of 50% SEO Snake Oil, the highest concentration known to exist. No other SEO Snake Oil has our levels of EPA! More...

What you're seeing above is 1 <table> divided into 2 columns; 1 with 1 row, image at left and, 1 with 2 rows, title and short product description at right. Note that there are 3 links to the same destination within this one product table; Image, Title, and More, all 3 are separated via the <table> layout.

This is a common structure for many ecommerce documents. I've used a single column layout as an example in this article and you're more likely to see 2, 3, 4, and even 5 column layouts in typical ecommerce pages.

Here's a visual hint, we've removed all styling attributes.

<table>
<tr>
<td><a href="/seo-snake-oil"><img src="/images/seo-snake-oil.jpg" alt="SEO Snake Oil 55 Gallon Drum" /></a></td>
<td><a href="/seo-snake-oil">
SEO Snake Oil - 55 Gallon Drums</a></td>
</tr>
<tr>
<td><dfn>
What is SEO Snake Oil?</dfn> It is the <strong><em>strongest</em></strong> and <strong><em>best</em></strong> liniment known to mankind for the cure of all Blogger pain and lameness. Made from the oil of Chinese Water Snakes, our products contain a minimum of 50% SEO Snake Oil, the highest concentration known to exist. No other SEO Snake Oil has our levels of <abbr title="Eicosapentaenoic Acid">EPA</abbr>! <a href="/seo-snake-oil">More...</a></td>
</tr>
</table>

What does the visual hint provide? Continue reading while thinking about the balance of SEO Snake Oil mentions you see, where they appear, and what separates them from one another, between the lines.

Look at the <code> examples closely as you'll see each one represents a different semantic element and/or attribute that is applicable to the environment it is in, I'm following protocols.

Last but not least, pay close attention to the content that surrounds the anchor when all is said and done with. The <code> visuals as you progress through this article will show you how we take the original fragmented link relationships from the <table> example and consolidate them into one semantically loaded anchor. Single <div> Example

Back to Previous

Let's use a conservative product count of 50 items per page divided into 2 columns. If there are 3 anchors for each item, we now have 150 total anchors just for the product listings in the document. Add those to the remaining anchors in the document and you may exceed a threshold and negate the real value of the Titles Linked to Product Pages.

Back to Previous

Adjacent Image and Text Links - 3 <div> Example float:left

Take a look at the below example...

SEO Snake Oil - 55 Gallon Drums
What is SEO Snake Oil? It is the strongest and best liniment known to mankind for the cure of all Blogger pain and lameness. Made from the oil of Chinese Water Snakes, our products contain a minimum of 50% SEO Snake Oil, the highest concentration known to exist. No other SEO Snake Oil has our levels of EPA!

What you're seeing in the above example are 3 <div>s with various CSS properties that mimic the above <table> layout. We have 1 containing <div> and then 2 inside <div>s; 1 containing the image with a float:left along with the title and 1 containing the short product description.

The image and title are linked using the same <a href>. There is a null alt="" attribute on the image, you rely on the anchor text and the path/file naming conventions to provide the semantics of the link. Due to the float:left on the image, you're able to perform various linking maneuvers that you normally wouldn't have access to in a <table> environment. Actually, this works just as well with <table>s and careful planning needs to go into the structure to minimize the duplication of product destination anchors.

You'll need to carefully review the code behind the scenes to fully understand the relationships that are being formed using various linking methodologies. In our <div> example, we've taken the <table> version and have removed 2 instances of the destination link. We've also combined the image and title links and have used CSS to provide link appeal.

Here's a visual hint, we've removed all styling attributes.

<div id="SEO-Snake-Oil">

<div>
<a href="/seo-snake-oil"><img src="/images/seo-snake-oil.jpg" alt="" />
SEO Snake Oil - 55 Gallon Drums</a>
</div>

<div>
<dfn>
What is SEO Snake Oil?</dfn> It is the <strong><em>strongest</em></strong> and <strong><em>best</em></strong> liniment known to mankind for the cure of all Blogger pain and lameness. Made from the oil of Chinese Water Snakes, our products contain a minimum of 50% SEO Snake Oil, the highest concentration known to exist. No other SEO Snake Oil has our levels of <abbr title="Eicosapentaenoic Acid">EPA</abbr>!
</div>

</div>

Back to Previous

Adjacent Image and Text Links - 1 <div> Example float:right

The goal in this exercise would be to minimize the number of internal anchors and make sure that the surrounding content BEST represents the content within the anchor element. I may even take the above and go one step further by eliminating 2 of the <div>s and using more of a fluid approach to the content being displayed.

SEO Snake Oil - 55 Gallon Drums
What is SEO Snake Oil? It is the strongest and best liniment known to mankind for the cure of all Blogger pain and lameness. Made from the oil of Chinese Water Snakes, our products contain a minimum of 50% SEO Snake Oil, the highest concentration known to exist. No other SEO Snake Oil has our levels of EPA!

Here's a visual hint, we've removed all styling attributes.

<div id="SEO-Snake-Oil">
<a href="/seo-snake-oil"><img src="/images/seo-snake-oil.jpg" alt="" />
SEO Snake Oil - 55 Gallon Drums</a><br />
<dfn>
What is SEO Snake Oil?</dfn> It is the <strong><em>strongest</em></strong> and <strong><em>best</em></strong> liniment known to mankind for the cure of all Blogger pain and lameness. Made from the oil of Chinese Water Snakes, our products contain a minimum of 50% SEO Snake Oil, the highest concentration known to exist. No other SEO Snake Oil has our levels of <abbr title="Eicosapentaenoic Acid">EPA</abbr>!
</div>

In this last visual above, you'll notice that HTML markup has been trimmed considerably and certain elements have now been joined, a close relationship has been formed. You'll also notice HTML Elements that you may not be used to seeing such as <dfn> and <abbr> - you should familiarize yourself with ALL Valid HTML Elements and Attributes. I MEAN IT! - semantically speaking.

Back to Previous

H2: Combining adjacent image and text links for the same resource

This objective of this technique is to avoid unnecessary duplication that occurs when adjacent text and iconic versions of a link are contained in a document.

Many kinds of links have both a text and iconic link adjacent to each other. Often the text and the icon link are rendered in separate links, in part to create a slight visual separation from each other. Visually they appear to be the same link, but they are experienced by many people as two identical links and this can be confusing. To avoid this, some authors omit alternative text from the image, but this would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link. The preferred method to address this is to put the text and image together in one link, and provide null alternative text on the image to eliminate duplication of text.

Sometimes the text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If CSS is used, this technique can be applied to combine the links.

Back to Previous

Resources

Best Practices in HTML Authoring - Listing of all HTML 4 Elements that you as an SEO Consultant will be involved with at some point during your tenure.
http://www.seoconsultants.com/html4/elements/

  1. W3C - Helping Search Engines Index Your Website
  2. W3C HTML 4 - 6.12 Link Types
  3. W3C HTML 4 - 12 Links
  4. W3C HTML 4 - 12.1.2 Other Link Relationships
  5. W3C HTML 4 - 12.3.3 Links and Search Engines
  6. W3C HTML 5 - 5.12 Links
Back to Previous

 

SEO Consultants Directory