This is for a very simple reason: We know that what we call things has a lot of meaning. Names connect an object to everything else and to ourselves, so the act of naming is something that should be thought through
Writing for the web requires an understanding of so many factors like user experience (UX), navigation menus, search engine optimization (SEO), and brand messaging, that it can be very difficult to know how to balance concerns that seem to be in conflict with each other. Ask different subject matter experts, and they are likely to give conflicting advice, making decision making all the more difficult
What clients need is a strategic framework that ties together all of the different concerns and gives a sensible set of standards to follow. This article outlines that framework, gives a few examples of how to use it, and finishes with a handful of bright line rules to make sure your site’s content is easy to find, easy to understand, and most importantly, easily sticks to the mind of your audience.
A recent conversation with a client prompted this article. We were discussing what exactly pages should be named in the navigation menus and how that could or should be different from their page title, URL, and other labels that point to a piece of content. They were worried that changing the labels even slightly might cause unnecessary confusion and wanted to enforce a uniformity across all of them
Their concern was coming from a great starting point: a deep concern for their users. However, uniformity is not the best approach to serve your users
What I’ve found to be the most helpful in planning the nuts and bolts of content — the URL path, the page title, navigation labels, the headings — has been this simple framework. It accounts for each thing a user or search engine sees, and helps to put the right emphasis on the right points at the right step.
What clients need is a strategic framework to ties together all of their concerns into a sensible set of standards.
Think of content like using a microscope: each layer down gets more and more detailed. By adding progressively more amounts of information, a site is able to efficiently organize content while making it easier to use that content
- Page title and meta description
- Body copy
- Images and audio, visual, or interactive elements
- Body copy
- Page title and meta description
Navigation labels are a unique case: they don’t strictly fit within the hierarchy above. They do not need to be identical to either the URL or the page title, and often, the need to keep labels very short to make navigation menus easy to use is the overarching concern when labeling. That said, it needs to be obvious that the URL, label, page title, and meta description are all referring to the same item!
This model follows the actual experience of searching for a piece of content. The first thing a search engine crawling a sitemap sees is the URL. The most prominent thing in a search result is the page title, followed by the meta description. When you land on the page, your eye will scan for headings as you scroll, and if what you see matches what you hoped to find, you’ll stay to read the copy and examine the media. At each stage, you or the search engine are getting more information, so naming your content so that you can give more information as someone finds it makes both intuitive and technical sense.
Without further ado, here are some examples and explanations to illustrate this model:
|Meta||Learn about us|
|Label||Who we are|
|Title||Meet the team!|
|Meta||Get to know who we are, our core values, and more|
Why is this better? Progressive detail
What could be better: About-us isn’t really the same as “who we are.” One is pure description — think about a Wikipedia page versus a profile piece in a magazine. The title is probably a better secondary heading/section or its own page.
|Title||Our history and traditions|
|Meta||At [name], our history and traditions inform our decisions today. Read our story to learn more about us.|
Why this is better: Because this again follows progressive detail, but isn’t great because it’s boring to read. Users aren’t necessarily looking to be entertained when trying to find information, but having a strong subjective point of view makes it far more likely for your content to be noticed, remembered, and shared.
|Title||A young woman’s dream: [Name]’s story and traditions|
|Meta||[Name’s] story began [x] years ago when she left her home country for [place]. Her dream became our story and her traditions still guide us.|
Why is this the best in this example? Title uses 60-character limit (52 characters); the meta uses the ~160-character limit, has the most progressive detail, is aligned with URL and label, and immediately begins content. Note that you can use stop words and punctuation! If you’re going to tell a story, you need to start telling a story!
This might not be the most helpful example for you. About pages are notoriously difficult to write and often the least-visited top-level navigation pages. Usually they only out perform privacy and legal disclosures. Virtually no one searches for them specifically, so there is some license there.
When URLs, meta, and headings all fit, readers get lots of strong clues about the content’s meaning.
Unlike an “About Us” page, most pages on your site need to focus on a specific primary keyword. Here’s an example that illustrates how to apply the same model to that content
|Meta||Department of Chemistry|
|Title||Department of Chemistry|
|Meta||Degree programs, faculty, labs, and research offered by the Department of Chemistry|
Why: More specificity in title, much better meta.
|Title||Prepare for change by studying chemistry|
|Meta||Chemistry students study change in world-class labs, perform leading-edge research under renowned faculty, and prepare for med school at [University]|
Why: This anticipates user needs without getting too clever. This recognizes that sometimes people search for things with related terms like “[university] chemistry” or “pre-med study programs” more generally
In the “Best” example above, note how there is also a bit of a built-in content structure emerging. A well-written version of that page will likely have section headings about the labs, research, faculty, and career outcomes that students interested in the Department of Chemistry can expect. Congruence between the terms in the meta description and especially the headings gives both users and search engines lots of strong clues about a page’s meaning, and when those clues are supported with body copy and media, the content is rewarded with attention and conversions
Dos and don’ts
Mislabel or mislead. Enough said! The entire point is to get the right content in front of the right person in the right context. Mislabeling or misleading defeats the purpose of this!
Acceptable, but not actually good
URL, page title, nav labels all identical. This is fine because it does not mislabel or mislead, but often results in items devoid of meaning. The point of navigation labels and page titles is to convey meaning, not to enforce congruity
Meta descriptions are bland or missing. Technically, Google doesn’t have to use these. However, they are often useful in “coloring” in the meaning of a page
The effect of meta. Meta descriptions go only so far in impacting search rankings, and most users never see this itself. It’s important for many reasons, but it has to reflect what’s actually on the page to be useful!
Being too clever. Content on the web should conform to certain conventions and standards for multiple reasons. Trying to outsmart users or Google only results in penalties — either your content is found but not considered useful or relevant, or not found in the first place. e.g., “Insights” or “Dispatches” instead of “News” or “Blog.” Nobody cares if you’re trying to sound cool!
Decide on a primary keyword for each page. This helps you enforce alignment through content. This will help you define secondary keywords, which can then be used in the headings of the body
Remember that users go to sites to find, not to explore. Make it easy to find what they need by productively limiting options and using clear, declarative language, including multiple signs, paths, and calls to action
Break things down. Long lists can often contain their own groups, and long articles or other content can be split up. Here are some shortcuts for when to break things apart:
- When lists are longer than four items, there might be an opportunity to divide
- When lists are between five to nine items, there is at least one subgroup to break out
- When lists are more than 10 items, try to break into groups of three to four
- Regardless of article length, think about how to break up text every 300 to 400 words with media, a pull quote, or a heading
- Within bodies of articles, when a section gets to be more than one layer deep, ask if this can be its own piece of content. (This gets into a great discussion of what should and should not be its own content, but that is outside the scope of this article.)
At each step, users get more information, which makes both intuitive and technical sense.
Use standard structures.
- Page title should always be the only h1 in the body.
- While there are technically ways to include multiple H1s on a page, for the most part, this is going to be the simplest and best approach.
- Refresher: In HTML, there are six different levels of headings for content, with one being the highest level (h1) and six being the lowest (h6). These heading tags help the machine “read” the body in a more accurate way, and each level is visually differentiated, which makes it easier for a real person to read.
- Titles should be less than 60 characters (generally). Meta descriptions should be less than 160 characters, but you should try to use most of the available space.
- In the lede (your first paragraph), answer “What, when, where, and (if appropriate) how.” The entire body of the article should answer “Why” or “Who cares.”
- Progressively get more detailed as the body goes on.
- Always put the most important information first.
- Use lists, emphasis, media, and pull quotes often. This is because people tend to scan first, and then zoom in on things they find interesting instead of reading a wall of text.
- If you can use structured data formatting, it makes the machine’s job easier.
- This is not a concern for content entry in the body of an article as much as it is an engineering concern (labeling markup) and content architecture issue (i.e., having correct fields to enter specific information).
- Structured data makes it possible for search engines to show more information from your content in search results. Not surprisingly, these rich results tend to rank higher and receive more clicks.
- Not every content type needs or is able to be put into a structured data schema, so be sure to check if it is appropriate for your content.
- Include recaps/summaries, because people are busy, distracted, and need helpful reminders.
- Use headings (h2-h6) in order, incorporating secondary keywords into headings.
- Headings “nest” like Russian dolls — so inside of an h2, you may have some h3s, and collectively, those should all relate to the h2.
- As above, if you find you need to go h2 > h3 > h4, consider writing that as a new page/node.
- Write useful alt text.
- Relevant internal linking throughout the body!
Vary everything else. These are the things that make a piece of content truly “stick” with a reader. This is where you can be as smart, clever, funny, and interesting as context allows. You want to treat serious topics seriously, because no one wants to read a memorial announcement that treats the deceased or their family with disrespect or irreverence, but injecting even the slightest bit of your humanity can go a long way into making this the thing that gets shared, talked about, bookmarked, and followed through on
- Art direction
- Point of view/opinion (where applicable)
- Layout (if possible/desirable)
- Calls to action (if possible/desirable)
Naming things is hard, no matter what the thing is. It’s especially difficult for content on a site or application, because the meaning of the name has to be clear and readily understood. Fortunately, we can add meaning to the name or label at each level of the content, from the URL straight through to each sentence, caption, or user prompt. By using the microscope model, you can write content that is likely to rank better in search engine results, is easier to understand, and is more helpful to your readers
Lastly, when you apply that model and give it a strong and informed perspective, your content can go beyond useful and helpful to being truly effective and impactful
Mike Zarafonetis, Ashley Hitson, David Harder, Randy Oest, and Callin Mullaney contributed to the insights in this article.
Making the web a better place to teach, learn, and advocate starts here...
When you subscribe to our newsletter!