Squidoo Tips - Having a Great Looking Table Of Contents

A Table Of Contents if done correctly immediately makes the content more accessible to a reader. If they want to jump to a particular piece of content in the page, they can quickly look it up and link to it, as opposed to scrolling down.

The most common type of web page reader is what is known as "The Hummingbird" - who will use a search engine like Google to look up detail on a specific subject and then link to it. They will stay on a page for moments, looking to link away, press back to the results flitting from site to site or read if they find what they are looking for. If you make it any harder than it needs to be to find the content, they will hit back and go elsewhere. If you make it easy to get to each part, they will stay and then may follow a link from you page or bookmark you for later. Following a link is great for your lensrank and may lead you to sales or other revenue generation.

The other most common type of lens reader will be a squidoo regular. They may be checking out your lensography or reviewing a lens for you. A well laid out TOC gives them at a glance information on what is on your lens, so they know what to expect. This may lead to more review comments, which is a good thing if you want a tip-top lens.

The first and most obvious one is that a Table Of Contents with links to titles inside the lens with relevant keywords will boost your lensrank and your search engine rankings. These in turn boost page views, and the revenue generation.

SEO experts often recommend links with relevant keywords in the titles, and if they link into your lens, to the right content, you will have a great lens which will look good to search engines, reviewers and readers.

The next advantage is that you can quickly see what is on the lens. While you may exclude some headings from the TOC, you will include many and now you can make sure you are not publishing with default module lenses or with irrelevant content. Both those things would harm your search engine and lens ranks.

With all these advantages, you may rush out and add one to every lens. But you should try to get it right!

A TOC will take up too much space
I have heard this a number of times. The first thing is that there are many ways to style a TOC so that this is not the case.

If there are too many modules, you can exclude some from the TOC, or use major/minor heading styles to make it smaller. This may also identify areas to split off into new lenses, which are always a very good thing!

My lens is very short, I do not need a TOC

A lens that short will not have much content either. A good ranking lens or website will have plenty of content and subheadings to link to. Huge introduction modules or single large text/write is not a good strategy for SEO, Readability or Lens rank.

If you really care about the quality of your lens and the readership, there is little excuse not to make a TOC for it.

This is the simplest option, with the least control. In the workshop editor for the intro module of every lens, there is a tab for a table of contents. this has radio buttons to turn it on and off, and it does tell you that turning it on will increase clicks and revenue. This is correct, but it is not very customizable.

This option will place it directly in the intro module, and show some of the contents at a glance, with a button for the user to see more. That means that the "hummingbird" users I discussed may not see stuff at the bottom of the lens if they are too lazy to hit that "more.." button.

The option allows you to enable or disable the modules that will be shown in the TOC generated, and it will have appropriate default styling. However, you are not able to customize the style of this much, so you have little control over the output.

Another disadvantage is that this is not shown in the preview you get in the current lens workshop, so you can not see the resulting TOC until you publish the lens.

This shares an advantage with the TOC module that these links should always work, even if Squidoo make tech updates, you should not end up with invalid refs.

The TOC Module is a little customizable with a few choices of menu type, although most of the fancy ones suffer the same "more" issue. It allows you to select which modules are in and out, a title, and some Text/Write content. You can add pictures and styling if you are clever with the Text/Write area, but this is only around the list.

The list itself can not be restyled, and can not have pictures. So it is still stylistically quite limited. You can however enable/disable links in the list, so not every module has to have an appearance in this TOC.

It is shown clearly in the preview, and is still fairly simple to set up. The TOC module appears in the "Popular" modules in the "Add Modules (Shortcut!)" panel on the right of the Lensmaster workshop.

An interesting feature of this is that you can add the module multiple times, so you could do sub content tables, or use it for an "index" at the end of the lens which is just another TOC. I have used it with a sub-toc where I exclude some modules from the main TOC, and link to a Text/Write above the other TOC. TOC modules are automatically excluded from TOC content. In the other TOC I make sure I link only to the sub topic modules there.

Note that rel="nofollow" is added to these links, so they do not give great SEO opportunities that you would get by customizing your own.

This is the most flexible way - just using a Text/Write and styling it all yourself. It means you can individually style each link, add stuff around the list like images and change fonts and colours or add borders and backgrounds. It means you can go for something that takes up less space than a long flat list, but showing more than the "At a glance" without the reader hitting the "more.." button.

There are slow and painful ways to harvest the links to individual modules, but the simplest is to cheat and use a TOC module to get them. I detail the process below.

This way has a maintenance cost, in that you will need to update the TOC when you add new modules or change module titles. You should also periodically check that the links still work as if Squidoo tech changes, the links may become invalid.

Some people use interesting ways copying/pasting individual links or looking at the anchor tags on each module title. However, there is a neat little cheat here exploiting the fact the a TOC module has all of this sorted out for you. The links in it are relative so they will work in both a preview and the actual published lens view. Even better, this TOC module supports text/write style input, so you can style anything you put in the free text area at the top of the module.

You could even take this TOC HTML and place it straight into the intro, but watch out for any stylistic interactions with the lens image.

• First add a TOC Module.
  


• Select the content.


• Select view source (either in the context menu or view menu).
  


• Copy the HTML from the view source.
  


• This HTML is suitable for a text/write, or most module Intro's - edit the TOC module, paste the copied HTML into that .


• You can now proceed to add a title to it and customize or style the list.


• Tick all the boxes below the TOC content to prevent the titles showing up again as TOC module entries.


• Save the TOC module.

The bonus here is that if you later add content, it will show up below your customized TOC in the TOC module, so you can then go and edit that back into your custom TOC - you are in no danger of forgetting to add something in.

The first thing I did is divide the lens into some subsections with section headings in the contents. I used Unordered lists for items, highlighting the section headings


<ul>
<li> <a style="font-size: larger; href="#firstmodule">The main title</a> </li>
<li> <a href="#firstmodule">The first sub title</a> </li>
<li> <a href="#secondmodule">The second sub title</a> </li>
<li> <a href="#thirdmodule">The third sub title</a> </li>
</ul>


Which looks like:

• The main title


• The first sub title


• The second sub title


• The third sub title

I have made the TOC on this lens a wide style. This means that much more info can be conveyed in a smaller space. The type is a list, but by applying styles to the list, it looks like something else. This means that search engines and screen readers will get the right kind of information.

To remove the list bullets add the following to the UL elements:

style="list-style-image:none;list-style-position:outside; list-style-type:none; "


So you get:

<ul style="list-style-image:none;list-style-position:outside; list-style-type:none;">
. . .
</ul>


Which looks like:

• The main title


• The first sub title


• The second sub title


• The third sub title

The wide style is then made by floating two lists - one to the left, and one to the right:

<ul style="float:left; margin:0; padding:0; width:50%; list-style-image:none;list-style-position:outside; list-style-type:none;">
<li> <a style="font-size: larger; href="#firstmodule">The main title</a> </li>
...
</ul><ul style="float:right; margin:0; padding:0; width:50%; list-style-image:none;list-style-position:outside; list-style-type:none;">
<li> <a style="font-size: larger; href="#firstmodule">The main title</a> </li>
...
</ul>

• The main title


• The first sub title


• The main title


• The first sub title

Then I have also placed a border and background that makes the TOC stand out from the page a little. I have done this by wrapping the whole thing in another UL tag, which can be nested on Squidoo when P tags do not. The clear both bold tag with a no-break space at the end prevents the box rolling up into one line because of the floated stuff. If this means nothing to you - you need to read some of the lens styling guides below.

<ul style="border: 1px solid black; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background: rgb(200,200,230)">
<ul style="float:left; margin:0; padding:0; width:50%; list-style-image:none;list-style-position:outside; list-style-type:none; " > <li> <a style="font-size: larger; href="#firstmodule">The main title</a> </li>
...
</ul>
<b clear="both">&nbsp;</b>
</ul>


Which looks like:

• The main title


• The first sub title


• The second sub title


• The third sub title


• The main title


• The first sub title


• The second sub title


• The third sub title



 

You will note there are gaps between the items, this is because newlines will be used by Squidoo to introduce BR tags. There are two methods to deal with this. The first is to run all the tags together - this makes the whole set very hard to change and makes for some ugly code. The second is to use stylesheets to chop out the extra space by halving the line height. Adding "line-height: 0.5em" to the sheet will do this - you can tweak that number as well to produce different spacing effects if you want a little space there.


<ul style="border: 1px solid black; line-height: 0.5em; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background: rgb(200,200,230)">
<ul style="float:left; margin:0; padding:0; width:50%; list-style-image:none;list-style-position:outside; list-style-type:none; " > <li> <a style="font-size: larger; href="#firstmodule">The main title</a> </li>
...
</ul>
<b clear="both">&nbsp;</b>
</ul>


Which looks like:

• The main title


• The first sub title


• The second sub title


• The third sub title


• The main title


• The first sub title


• The second sub title


• The third sub title



 

• Signpost image - Freely downloadable and reusable under CC license, see link.


• Hummingbird Image - Freely downloadable and reusable under CC license, see link.

Today I figured out a great way to simplify building custom TOCs using text/write modules. Before I was suggesting users add a TOC module, scoop its content, then remove it. However, the top of a TOC module behaves like a text write, so pasting it in there, and then disabling TOC items from the module means that you don't have to remove it, and new modules will show up there for you to add them. Very cool!