‍

On Twitter, Hilary Cluet asked a great question…

If I want someone to be able to search my website, does that mean they would be searching my site's index page? @UxAnkita, do you understand it?

Is it possible to customize a site's index page, alphabetize it or create groups of pages that work for site search and are #a11y?
— Hilary Cluett (@HilaryCluett) July 8, 2022

‍

There are 2 types of searching on the World Wide Web

Using a search engine, like Google Search or DuckDuckGo, which crawl pages to find the right content
Searching for content on a page or specific website, using a site map or a site-wide search bar

Using a search engine

Search Engine Optimization (SEO) is the process of setting up your web page so that Google Search can find it. One step in this process is to create a site index. Google bots crawl the site index to understand what pages exist, and how they relate to each other.

Here’s an example of a Webflow site index from a site we built for The Stone Centre.

You can see the folder structure where the contact and privacy policy pages are part of the “legal pages” folder. In the Webflow Designer it looks like this:

‍

‍

In Webflow this page is created automatically, and you can turn off Indexing for the staging site (sitename.webflow.io) so that Google bots don't find duplicate content. Webflow > Project settings > SEO

‍

The page URL is https://www.stone-econ.org/sitemap.xml . The words site index and sitemap are often used interchangeably, and they refer to a XML page that acts as a “table of contents” for bots.

XML is Extensible Markup Language, which is used to represent data structures.

‍

Searching for content on a page or specific website

‍A site map

A site map (2 words) refers to a visual representation of a website used for planning or navigation. For example, Finsweet has a site map page (archive) which shows all the “sections” of all their websites in a graphical way.

‍

‍

While you are designing a site it’s a good idea to use a site map tool like Octopus.do to show what pages you will need, and how they relate to each other. This example shows how we planned the WebflowersPodcast.com site.

‍

‍

Making your site map accessible

Visual accessibility

In the Finsweet example above there are headings and lists, contained in different colored boxes. This gives a clear understanding of hierarchy and content.

Navigating with a screen reader

Screen reader (SR) users can navigate a page in many ways, for example

listening to all the headings
jumping from one list to the next

Often a “mini” site map is shown in the footer of a website. Here’s an example from The Stone Centre.

‍

‍

Footer headings like this are often H4, even when this would not be expected in the normal flow of heading hierarchy. Screen Reader users may jump to the Footer and then look for lists or headings, expecting to find a list of links or site map there.