Searching on the World Wide Web

Jonathan Holden
Site index

On Twitter, Hilary Cluet asked a great question… 

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 ( so that Google bots don't find duplicate content. Webflow > Project settings > SEO 

The page URL  is . 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 to show what pages you will need, and how they relate to each other. This example shows how we planned the 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. 

Aria-labelledby in Webflow

It might be useful to add aria-labelledby  to the list so that Screen reader users know what the list is about. 

Aria-labelledby for Headings and Lists in Webflow

1. Go to Webflow Designer

2. Click on Heading of the List

Click on Heading of the List

3. Go to Element Settings (D)

Go to Element Settings (D)

4. Add an ID name

I usually use the heading text as the ID, so that it will be unique.

Add an ID name

5. Select the List

NOT a list item

Select the List

6. Click on Custom Attributes

Click on Custom Attributes

7. Type "aria-labelledby"

Type "aria-labelledby"

8. Type the name of the ID

which in this case is the same as the heading

Type the name of the ID

9. Click on Save

Click on Save

The HTML with the ARIA labelledby

<div class="w-layout-grid footer_link-col">

                <h5 id="help-and-support" class="text-color-white">Help and support</h5>

                <ul aria-labelledby="help-and-support" role="list" class="footer_links-list">

                  <li class="footer-list-item">

                    <a href="/legal-pages/contact" class="footer_link">Contact us</a>


                  <li class="footer-list-item">

                    <a href="/legal-pages/terms-of-use-and-copyright" class="footer_link">Terms of use and copyright</a>


                  <li class="footer-list-item">

                    <a href="/legal-pages/privacy-policy" class="footer_link">Privacy policy</a>


                  <li class="footer-list-item"></li>




Using a Search bar in Webflow

The Search bar is only available on Site plans, from CMS and higher. 

Add the Search Bar element and design the Search results page. 

1. Go to Webflow Designer

2. Go to Add Elements (A)

Go to Add Elements (A)

3. Drag Search component onto the page

Drag Search component onto the page

4. Style the Search Bar

Style the Search Bar

5. Click on Go to Search Results Page

Click on Go to Search Results Page

6. Style the Search results page

Style the Search results page

Further Reading

Create a sitemap in Webflow

Use aria-labelledby to provide context to unordered lists

Google: Learn about sitemaps 

Webflow site search