Check whether your words exist as text. Headlines inside images, content behind sliders, and text rendered only by scripts are invisible however good they are.

The site

A design-led business site, three years old, visually excellent and clearly expensive.

Full-width imagery, animated sections, a rotating slider carrying the main headline, and generous white space.

Real content underneath it: the owner knew the trade and had written properly about it.

The site appeared for the business name and for essentially nothing else, and the owner had been told repeatedly that the content was good.

Where the words had gone

Individually each is a design choice with a reason behind it. Together they meant a page whose visible content ran to several hundred words contained about forty that a search engine could read.

Text inside images

The oldest of these problems and still common in design-led work.

A headline set as a graphic can use any typeface, sit exactly where the designer wants, and never reflow awkwardly.

It also cannot be read by a search engine, cannot be read aloud by a screen reader, cannot be selected or translated, and disappears entirely if images fail.

The fix is to set it as text with the typeface loaded properly, which is what web fonts exist for and has been practical for over a decade.

Where an image genuinely must carry words, the alt text should contain them, which recovers most of what was lost.

The slider carrying the headline

A specific failure worth isolating, because it is so common.

The main message rotated through three panels, each with a headline and a line of supporting text.

Only one was visible at any time, and the content was inserted by script rather than present in the page.

So the most important sentence on the site, the one describing what the business does, was not reliably readable at all.

Replacing the slider with a single static headline, as plain text, was the single largest change made to this site.

It also improved the loading time and removed a decision nobody had ever been able to justify with figures.

No heading structure

The subtler problem and the easiest to fix.

Section titles were styled to look like headings: larger, bolder, spaced correctly, and marked up as ordinary paragraphs.

Which means the page looked structured to a reader and appeared as an undifferentiated block of text to anything reading the code.

Marking them up as headings changes nothing visually if the styling is kept, and it gives the page a structure that can be understood.

It also helps anybody using a screen reader navigate the page, which is a separate benefit for the same work.

A worked example

The rebuild kept the design and changed how it was constructed.

Headline and service names set as text with the same typeface. The slider replaced with one static message. Body content rendered in the page rather than inserted afterwards. Headings marked up properly. Alt text written for every image.

The nine services were split into nine pages, each with real content, which was the content problem rather than the design problem and was fixed at the same time.

Visually the site was almost unchanged, and the owner said afterwards that nobody had noticed anything except that it felt faster.

Rankings appeared for service terms over the following three months, from a site that had been invisible for three years.

How to check your own

Two minutes, and it requires nothing installed.

Open your home page and try to select the main headline with your cursor. If you cannot, it is an image.

Use your browser's find function to search for a phrase from the middle of the page. If it is not found, it may not be in the page as text.

View the page with scripts disabled, or use a text-only view, and see what remains.

Then search for a distinctive sentence from your site in quotation marks in a search engine, since a page that cannot be found by its own exact wording is not indexed as you think.

Designers are not the problem

Worth saying, since this reads as an argument against good design.

Everything on this site could have been built to look identical and be entirely readable, at no extra cost, by somebody who knew to.

The failure was that findability was never in the brief, so it was never a constraint the design had to satisfy.

A business commissioning a site should say explicitly that content must be text, headings must be marked up, and the main message must not depend on a script.

Those are three sentences in a brief and they prevent all of this.

Nobody had ever looked

The part of this worth recording, since it explains three wasted years.

The owner had asked two people why the site did not rank and had been told the content needed improving.

The content was already good, which is why that advice went nowhere: he wrote more of it, and the new pages were built the same way and were equally invisible.

Nobody had opened the page source or turned scripts off, which takes a minute and would have identified the problem immediately.

Where a site with genuine content is not ranking at all, the first question is whether the content is readable rather than whether it is good enough, because those need entirely different responses.

The counter-case within the site

The design was genuinely good and worth keeping.

There was a real argument for the imagery, which suited the business and its market, and stripping it would have produced a worse site that ranked slightly better.

Some content also legitimately loads by script, such as a gallery or a booking widget, and that is fine where it is not carrying the page's meaning.

The test is whether the page still says what it does with images and scripts removed. If it does, the design can be as elaborate as you like.

What to change

  1. Set headlines as text, not images.
  2. Replace sliders with one static message.
  3. Render content in the page, not by script.
  4. Mark up headings as headings.
  5. Write alt text for every image.
  6. Split combined service pages.
  7. Put findability in the brief next time.

Step two was the largest single change here, since the most important sentence on the site was inside a rotating panel nothing could read.

The content version of this problem is covered in a local site that ranks for nothing.


Frequently asked questions

How can a good site rank for nothing?

When design decisions put the words somewhere unreadable: headlines inside images, content inserted by script, and section titles styled to look like headings without being marked up as any.

What is wrong with text in images?

It cannot be read by a search engine or a screen reader, cannot be selected or translated, and disappears if images fail. Set it as text with the typeface loaded properly.

Why are sliders a problem?

The main message rotates, only one panel shows at a time, and the content is frequently inserted by script, so the most important sentence on the site is not reliably readable.

What does heading markup do?

It gives the page a structure that can be understood rather than an undifferentiated block. Marking up existing styled titles changes nothing visually.

How do I check my own site?

Try to select the headline with your cursor, use the browser find function for a mid-page phrase, view it with scripts disabled, and search for an exact sentence from your site.

Is this an argument against good design?

No. All of it could look identical and be readable at no extra cost. The failure was that findability was never in the brief, so the design never had to satisfy it.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Site looks good and ranks for nothing?

Try to select your main headline with the cursor. If you cannot, it is a picture of words.

Start a Conversation