What is alternative text?

The purpose of alternative text (also know as alt text) is to provide an alternative for users who cannot see images. This could be because they had a text only Web browser (like Lynx), had images turned off (usually due to slow Internet connections) or could not see the image due to a visual impairment. All images must have alternative text.

Although I’ve already said that alternative text describes an image, that isn’t actually correct. Alternative text should describe the purpose of an image, which is subtly different.

Take the image on the right. If you were describing the image you may say something like:

Four individual type block letters together, forming the word news

If you describing the purpose of the image, you may just say

News

Depending on how you are using the image will affect what you use as the alternative text. For example take the photo on the left, in a general page about Robin Hood it may simply read:

Robin Hood

On the other hand in a page about Robin’s adventures it might read:

Robin aims his bow towards Nottingham Castle

While in a tourism page about Nottingham, it could be:

Bronze statue of Robin Hood, outside Nottingham Castle

Sometimes images are purely used for decoration and don’t really provide any useful information. In that case we still need to tell the image that the alternative text is empty, this means that text only browsers and screen readers (used by visually impaired people) can ignore the image.

So what does all this have to do with SEO?

Now we know what alternative text is, how can we use it in SEO? We can use the alternative text of images as another way of highlighting the key words and phrases for our page. Don’t just stuff key words into your alternative text, but make sure that along with helping people to understand the page it can help people to find it.

Looking at our Robin Hood examples above, they help people to understand the image purpose while giving information to search engines. The final example gives several different key phrases that we might want in a Nottingham tourism page.

Not only does it help our standard search but it means that your page can be found in image searches. If a standard search finds enough images it will often display images there too, making your page stand out more.

Making sure you add good alternative text is really important if you are selling online as people often search for specific items. Making sure your images have good alternative text with key words or phrases that people are searching for will help your product pages rise to the top of search results.

Anchor text plays a large role in search engine rankings. This is because it usually refers to the content of the page it is linking to and so the search engine takes notice.

Google’s own Search Engine Optimization Starter Guide (PDF) advises writing better anchor text and says:

The anchor text you use for a link should provide at least a basic idea of what the page linked to is about.

Internal links

You have full control over your internal links (links from inside your own site), so make sure they are always descriptive of their destination and maybe even include some of the keywords for that page.

External links

External (or incoming) links are links from other sites. It is even more important to get good anchor text on these, but you are not in control of them. Here are a few tips though to try and get good anchor text from external links:

1. If you are asking for a link from another site, let them know what you’d like the link text to be.
2. Give your pages meaningful and concise titles, people linking to other sites often use the page title.
3. If you find a link to your site that isn’t using great anchor text the send a polite email asking them to change it.

As you don’t have direct control over external anchor text it is actually more important to the search engines. This is because it tells the search engine what other people think your page is about, so you can’t fool it.

Click here

All too often click here is used as the anchor text for a link. Using click here doesn’t help anyone as it doesn’t describe what you are linking to, so it doesn’t help people quickly scanning links and it doesn’t help your search engine rankings.

To see the power of anchor text and click here try visiting your favourite search engine and putting in the search phrase “click here”.

You’ll probably find that the top 2 links are for Adobe reader and Adobe Flash. Now see if you can find any reference to “click here” on those pages.

The reason they rank so highly is the number of Web sites with links like click here to download Adobe Reader/Flash.

In the early days of search engines (the 1990s), this was a major factor in the pages they returned. However like many other things it was often abused by Web site owners and so now plays a much smaller part. In fact search engines now penalise sites where the keyword density is too high as they are more likely to be spam.

The basic way of finding your keyword density is to divide the number of times the key word appears by the total number of words, multiplied by 100 to get the percentage. So if you’ve got 120 words and your key word appears 3 times you would do (3÷120)×100, to get a keyword density of 2.5%.

Many SEO experts believe the optimum keyword density to be between 1 and 3%. You can use a keyword density checker to test your site.

It’s important to remember that keyword density plays a very small part in the search results. It’s much more important to have good quality, well written content than to stuff your content full of key words and make it unreadable. Just remember being at the top of the search results is great, but if your visitors are turned away by poorly written content stuffed with too many keywords it’s a waste of time.

My advice is to write your content naturally while thinking about what your key words are, but not forcing them in at every opportunity.

Many people think that the design of a Web site’s layout comes first and the content just gets dropped into it. To be honest a lot of Web sites do get designed layout first and content second. But that doesn’t mean it’s the right way.

The concept of pages

We probably think this way because in traditional graphic design we know how big the page is. If we’re designing a brochure it’s usually A4 or A5 size.

The Web doesn’t work in the same way though, we don’t know how big the page is. In fact the whole concept of pages is actually artificial on Web sites. It’s just there to try and help us understand Web sites more easily.

People can look at our site on a variety of devices from smart phones with small (3 inch) screens to desktop computers with huge (27 inch) screens. Not only do we have to worry about size, but most smart phones and tablets can be used horizontal or portrait.

Responding to devices

Early in spring 2010, Ethan Marcotte published an article called Responsive Web Design. In the article Ethan talked about how the design and layout of a site could and should respond to the device it was being viewed on. This meant doing things like changing from a 3 column to a 2 column layout on smaller screens and even a single column layout on really small screens.

Responsive Web Design was an important step in the evolution of Web site design. But the evolution wasn’t over yet. We were still thinking about the page first and how to squeeze our content into it.

Designing from the content out

In January 2011 at the New Adventures in Web Design conference, Mark Boulton introduced us to his concept of a new canon for Web design. Mark suggested that instead of working from the canvas (or page) in we should should be designing Web sites from the content out. In his article A Richer Canvas, Mark goes into much more detail about this concept.

I believe he’s spot on. We need to make the design compliment the content, not just make something that looks pretty and pour the content into it without creating a relationship between them.

So that is why I ask for the content before designing the layout. I’ve always tried to get the content first but now I believe it’s more important than I ever have before. Instead of creating a good Web site, let’s build a great Web site.

What are headings?

Headings on Web pages are defined by using heading tags, these range from H1 (the main heading) down to H6 (the least important heading). Most pages will only go as far as H2 or H3. Headings are usually displayed larger (and often more bold) than body text, but should not be used just for display purposes. Headings should be used to give your page structure, so the main page title would be H1 (or heading 1) and each sub-section of the page would be H2. If you then further break up content under the H2 section, you would use H3 and so on.

You can use headings to help you plan your page content by starting with the heading structure and then adding the detailed content under each heading. Don’t use too many headings though as this can stop the flow of your text.

Most content managers should include formatting options to add headings, often labelled Heading 1, Heading 2, Heading 3 etc. If you don’t have these options then ask your Web designer about how you can use headings.

Making your content findable

People very rarely read the whole of your page from beginning to end. Usually they are looking for a specific piece of information. Headings are a great way to break up the content on your page and act as sign posts to help people find what they are looking for.

Search engine benefits

Search engines know that headings should give structure to your content and so they take more notice of them than the standard body text. Good headings not only act as good sign posts for readers but also provide the important key words and phrases to search engines.

Don’t overuse headings though as each heading dilutes the effect of the other headings.

What is a page title?

The page title is used in a number of places like:

• Search engine results pages,
• Browser window title bar,
• Default name of bookmarks and favourites

Too often you find sites which have a single title for every page (usually the site name), simple but meaningless titles like home or about, or worst of all untitled.

How important is a page title?

Some experts believe that it may be the single most important part of a page to Google (although no one really knows how Google works things out). However in the Google Search Engine Optimization Starter Guide the first piece of advice is “Create unique, accurate page titles” and it later says:

Page titles are an important aspect of search engine optimization.

So this seems to confirm that Google certainly do value page titles.

How do I add/change my page title?

Using HTML

If you are using html then your page title should look something like this:

<title>Miniature Sculptures by Miniaturist Penny Thomson</title>

It will be between the <head> and </head> tags.

Using software (like Dreamweaver or FrontPage) on your computer

At the top of the screen usually near the tool bar should be a box labeled name or title. This is where you type your page title.

If you use an online editor or Content Management System (CMS)

Whatever name you give your page when creating or saving it is usually used as the title.

What makes a good page title?

Now you know what a page title is, how important it is and how to change it. Let’s look at what makes a good page title, here are a few guidelines:

• Accurately describe the content of the page
• Each page should have a unique title
• Be brief but descriptive
• Use key words or phrases you’ve identified for your page
• Start with the most relevant words

It’s worth mentioning that you might want to include your site name in all your page titles. This is not a problem, it helps people know they are still on your site (although it does make the title longer than it needs to be). Keep your site name to the end of the title though e.g. Design process (TwoLittleFishes Web Design) instead of TwoLittleFishes Web Design Process. This keeps your unique and keyword heavy text at the beginning of the title.

Bad page titles are often single generic words, good page titles give an accurate description of the page using key words and phrases.

That is just a few examples, please leave any suggestions of good and bad page titles in the comments.

For some more advice see Writing useful page titles on 456 Berea Street.

I think schools have a lot to answer for when it comes to poor Web site content. They encourage students to fill their essays with filler by giving minimum word counts and often the only other writing that students do is write science reports.

Most science reports start by outlining the experiment and giving information about what should happen, but doesn’t give a conclusion until the end. While this way of writing is fine for a science report, students often come away writing everything else the same. If this style is used on a Web site then it means that users have to read the whole page (or at least scroll through the whole page), to reach the conclusion. According to research done by the Nielsen Norman Group, only around 20% of users see 2 or more screens of information on each page. That means that on a page with a fair amount of information only 20% of users will see the conclusion if you leave it until the end.

Most newspaper articles on the other hand start by giving a summary of the whole story including the conclusion, then add more detail to the story as it continues. This means that almost all users will see the conclusion if they just want a simple answer and can continue reading if they want more detail. It also helps the user to know that they are in the right place as they can quickly see a summary of what the whole page is about.

Bite size chunks

Using lists can help break up content into chunks that are easier to understand and remember. Research by usability expert Jakob Nielsen shows that using lists can improve readability by 47%.

Using lists helps to highlight important information and so helps people complete tasks more quickly and accurately.

Creating readable lists

Start a list with a leading sentence fragment that each of the items in the list complete.

e.g.

Some of the ways to make your Web site more readable are using:

• highlighted key words and phrases,
• meaningful titles and headings,
• concise text and short paragraphs,
• conversational style,
• bulleted lists and numbered steps,
• inverted pyramid style.

Make sure the first words in each list item are important information carrying words. Try not to include duplicate words at the beginning of multiple lines or begin lines with filler words like “an” or “a”.

It may be worth writing all of the list items you want first and then write the leading sentence to include those items without filler text. You’ll probably then need to change the list items too to make sense.

Don’t overuse lists though, if your page is filled of lists that each have only 2 items you’ve probably taken it too far.

Numbered steps

Numbered steps are a great way of providing instructions. It’s easy to keep track of where you are with numbered steps to carry out a task like baking a cake or finding a pub.

Try to break the steps down into individual smaller tasks that are easy to do.

This might be a good way of making a task that seems difficult into a more manageable one.

Why use a conversational style?

The original purpose of the Web was to share things, and that is still what it’s used for today. Many people are part of communities on the Web, whether it’s Facebook or a specialist site about our hobbies and interests. This means that we expect a more personal and conversational tone than some other forms of communication.

What is a conversational style?

Make writing on the Web more personal and conversational, by using I, we, you and us.

Express yourself in a more personal way.

I have made a mistake instead of a fault has become apparent.

Use an active voice.

I have taken steps to put it right instead of steps have been taken to put it right.

Telephone conversation

Be careful with being conversational though, because the Web is not a face to face conversation. When we talk to someone face to face, the words only account for about 10% of the conversation between us. Without the extra visual cues it is easy to misunderstand our words. When we have a conversation over the telephone though, we don’t have those visual cues.

So try to write the way you would have a telephone conversation.

Steve Krug in his book Don’t Make Me Think!: A Common Sense Approach to Web Usability goes as far as saying:

Get rid of half the words on each page, then get rid of half of what’s left.

If people only scan Web pages, then most of what you write won’t be read. So why bother writing it?

Writing less means that only the valuable information is left and doesn’t get drowned out with useless noise.

Writing less

The first thing to remove is the filler text, the kind of thing that doesn’t really need to be there, but fills up empty space. On a portfolio page, do we really need

Here are some of the Web sites I’ve designed or developed lately.

It’s not as though our portfolio page is going to promote someone else’s work, so it’s just filler text.

The next thing is to remove redundant words:

• Don’t say the same thing twice (e.g. past history, careful consideration);
• Use 1 word instead of 2 (e.g. merge together, ongoing plan);
• Use 1 word instead of a phrase (e.g. apply instead of make an application)

We often try to use more words to impress people and make them think we are clever, but we impress them more when we are clear and concise.

Short paragraphs

Use 1 subject per paragraph.

The first 2 words should be important information carrying words so that readers scanning the text quickly know if the paragraph contains what they are looking for.

Short paragraphs break up the text better, allow white space and don’t give the reader a solid wall of text that’s hard to read. Shorter paragraphs are also easier to understand because people don’t have to process as much information.