Website Problems You Can't See

This fall we did a search and accessibility cleanup for a local service business. The site was built on a popular do-it-yourself platform, it looked good, and customers were already finding it and booking from it. The owner had good reason to feel fine about it. She’d click through the homepage and her service pages and everything worked.

What we found was the sort of thing that builds up on any site that’s been online a few years and updated by busy people. Almost none of it showed up when she browsed her own pages. Google picked up on it, and so would anyone using a screen reader or reading their phone outside on a bright day. Nothing on the list called for a rebuild. Each fix was small, and by the end the site was noticeably easier to find in search and easier to use on a phone.

The first thing we noticed was what the platform had left behind. Website builders start you off with sample content, and some of it tends to survive launch. This site still had a dozen demo services from a booking app the business never used, a cart and checkout page for a store that didn’t exist, a few policy pages with placeholder text, and a newsletter box that wasn’t connected to anything. Visitors never went looking for those pages, so nobody had a reason to notice them. Google had indexed them anyway. Clearing them out means a search for the business now turns up its real services instead of leftovers. If you want to check your own site, go through the full page list in your builder’s dashboard instead of the menu. The menu only shows what you put there on purpose.

Next were the old links. Over the years, pages had been renamed, merged and retired, which is normal for any growing business. Each of those changes left an old address behind that Google, other websites and customers’ bookmarks still pointed to. Some led to an error page, and a few bounced through two or three redirects before landing somewhere. Google Search Console lists these for you under Pages, as “Not found (404).” We pointed each one at the closest live page with a single permanent redirect, more than 50 in all. That way anyone following an old link lands on a real page, and most of the credit Google had given the old address carries over to the new one.

A few pages also had text on them that visitors couldn’t see. Earlier versions of the design had left a couple of text boxes sitting just off the edge of the page. They never showed up on screen, but search engines and screen readers read the page’s code, so for them those boxes were part of the page. One of them still described a service the business had since stopped offering. You can look for this on your own site by selecting all the text on a page (Ctrl+A, or Cmd+A on a Mac) and reading what gets highlighted, or by checking your builder’s layers panel for anything parked outside the page area. Removing those boxes made sure that what Google read matched what customers saw.

The headings needed some attention too. On a lot of pages, the big text at the top was regular text styled to look like a heading, and on a couple of others a whole list of links had been set as one large heading. That looks fine on screen, but Google and screen readers only treat text as a heading when it’s marked up as one, and screen reader users often move through a page by jumping from heading to heading, much the way the rest of us skim. Google has said it can cope with more than one main heading, but a single clear Heading 1 with sensible subheadings under it is easier for everyone to follow. We gave every page one main heading that says what the page is about. While we were at it, we replaced a couple of image sliders with simple grids, so the content that used to sit on the third or fourth slide is now in plain view.

The page titles and descriptions were the quickest fix. The title is the blue link people click in Google, and the description is usually the gray text underneath it. Many pages on this site shared the same title and most had no description, which leaves Google to piece one together on its own. We wrote a distinct title for every page, about 60 characters, since Google tends to cut off anything much longer, and a description of around 150 characters that gives someone a reason to click. Google sometimes rewrites descriptions anyway, but it usually works from what you’ve written.

We also added structured data, which is a small block of code that tells search engines who you are, what you do, where you are and when you’re open, in a format they’re built to read. The homepage got an entry for the business and the About page got a profile for the owner. Visitors never see it, and it doesn’t guarantee any special treatment in search results. It hands Google the basic facts directly, so it doesn’t have to work them out from the page. Most builders have a place to paste it in, and you can check yours with Google’s free Rich Results Test or the Schema Markup Validator.

Then there were the photos. Every image can carry a short text description called alt text, which screen readers read aloud and which Google uses to understand the picture. Most of the photos here had none, and a few still carried their camera file names. We wrote descriptions for about 45 images, the way you’d describe each photo to someone over the phone. For purely decorative images, like a background texture, the right alt text is no alt text at all, so screen readers skip right past them.

The last piece was the footer, which had light text on a medium background. Indoors on a laptop it looked fine, but measured, the contrast came out to 2.6 to 1, and the accessibility guidelines call for at least 4.5 to 1 for normal-sized text. The menu links were also close enough together to be easy to mis-tap on a phone. We adjusted the colors and gave the links more room. The hours and phone number are now easy to read in a sunny parking lot, and much easier going for people with low vision. WebAIM’s free Contrast Checker will tell you in a few seconds whether two colors pass.

When we finished, Google’s Lighthouse test gave every page we checked an SEO score of 100. An automated accessibility scan of every page on a phone-sized screen came back with no contrast, image, link or button problems. Automated scans can miss things a person would catch, so we also went through the pages by hand on a phone and a laptop. The look of the site barely changed. What changed is how clearly Google can read the site and how comfortably more people can use it, all on the same platform the business already had.

Most sites that have been online for a few years have at least a couple of these. The free tools linked above will find many of them in an afternoon, and our free audit covers a lot of the same ground if you’d rather we take a look.