The anatomy of a (healthy) webpage

6/13/18

A website is only as strong as its weakest page.

We like to think of websites as living, breathing things. They usually start out as fine, fit specimens, but as the weeks, months and years go by, content and structure change. New pages pop up. Without the proper care, websites get out of shape.

When it comes to a website review, we recommend a page-by-page checkup.

The bones (metadata)

Let’s start with an X-ray. Supporting a webpage like a skeleton is a somewhat unseen set of information called meta data.

Although the term covers a lot of territory, the most pertinent examples include page titles, meta descriptions and alt text for images.

Page titles

Every webpage needs a unique title that expresses what visitors can expect to find there. While most browsers’ tabs don’t display the full text, page titles are important because they are what appears on search engine results pages (SERPs).

For strong page titles:

• Put the topic of the page before your company name — for example, “Anatomy of a healthy webpage | BrownBoots” or “Anatomy of a healthy webpage - BrownBoots.”
• Keep page titles to less than 60 characters (including spaces), though you may wish to be even more conservative: since the exact limit is passed on pixels, wider characters (like “w” and “m”) could cause your page title to get cut off on SERPs.
• Inject search engine optimized (SEO) keywords to increase the likelihood of your website appearing on SERPs.

Meta descriptions

Like page titles, meta descriptions appear most often on SERPs. They build upon the page title, giving visitors a snapshot of the webpage’s purpose. It’s an easy piece to overlook, but if it’s broken — or, worse, missing altogether — the entire page suffers.

For sturdy meta descriptions:

• Make meta descriptions less than 150 characters but greater than 50 characters (including spaces); although SERPs’ displays fluctuate, you’re generally safe if you put your most important, useful and enticing information in the first 120 characters.
• Do not reuse generic meta descriptions from webpage to webpage; each page serves a separate, specific function within a website.
• Infuse your meta descriptions with SEO keywords to boost your rankings.

Alt text for images

Simply put, alt text is a description of every photo, illustration and graphic on a webpage. Most visitors will never see alt text, yet this attribute is incredibly important — not only because ADA compliance demands it, but also because visitors who depend on screen readers to comprehend content need alt text to interpret what they cannot see.

For well-fortified alt text:

• Keep alt text under 150 characters because older screen readers won’t go beyond that limit.
• Describe the subject of the image in a concise manner, going into as much detail as necessary to convey the meaning; alt text for graphs and other info graphics will require more words than a stock image for marketing purposes.
• Don’t spam your alt text with SEO keywords but definitely include any keywords that pertain to the image you are describing.

The brain (navigation)

It’s not brain surgery, but it takes some effort to get into the minds of your visitors. Because the webpage might not have the information the visitor is looking for, he or she needs to be able to get around. Navigation to the rescue!

Search boxes and sitemaps can help, but it’s even better to give a visitor a clear view of where they are in relation to other pages and a path to related content. Common examples of navigation include:

• Links embedded in headers and footers
• Drop-down menus
• Sub-navigation in right- or left-most columns
• Breadcrumbs (if a website’s depth warrants them)

Remember, not every visitor arrives via the homepage. While specialty landing pages might feature streamlined navigation, you will always want to give your visitor access to multiple pathways presented in a smart and logical manner.

The muscle (content)

Of course, the meat of any webpage is the content. Here are a handful of tips to keep your content in peak physical condition:

Stretch your composition

Words usually make up the majority of a webpage’s content. Text should be salient, but even if you trim the marketing fat and give visitors exactly what they’re looking for, steps should be taken to make reading — or scanning — easier.

• Avoid large block of text. A pile of thick paragraphs is intimidating to the eye.
• Make your content scannable by including headers, bullets and charts/tables in your content regimen.
• Exercise discretion when it comes to information hierarchy. Top-load what’s the most important (in case the visitor doesn’t make it to the bottom of the page) and stack sections in descending order of significance.

Flex your text

Every webpage should include only what is necessary. What happens if there happens to be a ton of important content? Visitors aren’t afraid to scroll, and yet an extremely long webpage can be cumbersome to navigate.

• Consider using accordion elements so that visitors can expand and collapse content.
• Ask yourself whether larger sections could be their own subpage and link accordingly.

Get tough on PDFs

While it can be tempting to repurpose existing files on your website, linking to copious PDFs is a weak move. Why?

• Jumping from a well-designed webpage to a randomly styled PDF is a jarring experience for your visitors.
• Some devices, browsers and browser settings don’t handle PDFs well.
• Even though search bots will scan a PDF for SEO keywords, they are far less valuable than if they had appeared on an actual webpage.

This doesn’t mean PDFs should be eschewed entirely. It’s OK to occasionally link to longer publications or legal-centric documents like policies and disclosures. As a general rule, however, unless there’s a compelling reason not to, port PDF content over to a webpage.

The heart (calls to action)

A healthy webpage is more than a repository of information. You want to capitalize on a visitor’s curiosity and interest. You want conversions, which means you want them to do…something.

That’s where a call to action (CTA) comes in. CTAs, the lifeblood of any webpage, are prompts that encourage visitors to take some specified step. Here are a few examples of CTAs:

• Phone number (link)
• Email address
• Contact form
• Application
• Text link or button to another page on your site
• Text link or button to an external website

If a visitor gets to the end of a webpage and there isn’t a clear next step, you’re leaving a lot up to chance. Webpages with a healthy pulse have at least one CTA, though you certainly can have more. Just be sure not to overwhelm the reader: sprinkle them throughout the page where appropriate.

And you simply can’t go wrong with a strong link at the end of the content.

Make your webpages thrive with a bank website design from BrownBoots.