Designing news section pages: categories, subcategories and pagination

In April 2006 a phpWordPress customer asked for more control over categories, specifically the option to show the content of all subcategories under the main category. The request is still one of the first things a newsroom specifies, and current CMSs mostly answer it in their category settings or templates.

What is the difference between a section and a tag?

Treat them as two tools.

WordPress lets each category have a parent to set up a hierarchy, and Drupal’s User Guide says a vocabulary can organise its terms in a hierarchy or be flat, noting that blog tags are normally flat. Using one for sections and another for tags keeps the structure clean. A story normally sits in one primary section and carries several tags.

Should the parent section show its subsections’ stories?

For news, yes. A reader opening “News” expects the latest news, whichever subsection it was filed under. WordPress’s documentation describes this as the normal behaviour: clicking the Animals category shows all posts in Animals and all its sub-categories, whether or not each post was also assigned to the parent. That is the behaviour the 2006 customer wanted, and it is the default in that system.

Check your CMS in a staging copy, as defaults differ and some systems need a setting or a query. Two design points follow from it:

• Do not file a story in both parent and child just to make it appear. If the CMS includes children automatically, double-filing creates noise.
• Decide whether the parent page lists subsections as links. A short row of subsection links above the story list helps readers and gives crawlers a path to the child pages.

One catch in WordPress’s documentation affects templates: you cannot match a child category by its parent, so category-foo.php will not match posts in a child category of foo. A subsection that needs its own layout needs its own template, or a conditional in the parent’s.

How deep should the hierarchy go?

Two levels cover most newsrooms: a handful of top-level sections and a few subsections under the busiest. Each extra level adds a menu layer, another archive page to maintain and a thinner set of stories. If you want finer grain, use tags or curated topic pages. Revisit the structure once a year, using what readers actually click, and avoid renaming sections casually, because the slug is part of the URL. WordPress, for instance, uses the unique category slug in addresses such as example.com/category/animals/. If you must change one, redirect the old URL.

How should paginated section pages work for search?

A busy section has more stories than fit on one page. Google’s pagination guidance gives clear rules:

1. Give each page a unique URL, such as a ?page=2 parameter. Do not use fragment identifiers (#page=2), which Google ignores.
2. Link to the next page with a real link, an <a href>, so Googlebot can discover later pages. Buttons that only run JavaScript may not be followed.
3. Give each page its own canonical. Pointing every page’s canonical at page one is the wrong pattern in Google’s guidance, because the stories on page two are not on page one.
4. Do not rely on rel=prev and rel=next. Google says it no longer uses them, though other search engines may.

Google describes rel=canonical as a strong signal but guidance rather than a command, and recommends absolute URLs in the annotation. Do not use robots.txt to choose between versions of a page. A self-referencing canonical on every section page is the simplest consistent setup.

For infinite scroll or “load more” buttons, make sure the same content is reachable through plain paginated URLs as well, or it may not be discovered.

How do I keep archive pages useful and not thin?

• Put a short introduction and the section’s editor or focus at the top of page one.
• Show headline, date, summary and image, so the page is useful in its own right.
• Keep filtered or re-sorted variants out of the index. Google’s guidance suggests noindex or robots.txt for filter and sort variations of the same list.
• Limit empty tag pages. A tag with one story is rarely worth its own page, so consider hiding tag pages below a threshold.

How should navigation and breadcrumbs reflect sections?

Readers and crawlers both use navigation to learn what a site is about. Keep the main menu to the top-level sections, show subsections in a dropdown or on the section page, and add breadcrumbs on every article that follow the primary section path (Home, News, Politics, then the story). Use the same section names in the menu, on the page heading and in breadcrumbs, so the site describes itself consistently. Where a story has several tags, link them at the foot of the article rather than in the breadcrumb, which should show one path only.

Check the result on a phone. A three-level menu that works with a mouse often fails with a thumb, and a section page that is hard to reach is also hard for a reader to return to.

Where to configure all this

Section hierarchy, parent behaviour and archive templates are configuration and theme work. Use the CMS’s category or taxonomy settings first, and a theme override second, as described in our answers on themes and safe customisation. The feature checklist covers the wider set of questions to ask before choosing a system.