How to Add a Search Bar to a Small Website, Step by Step

A search link in the header looks tidy. Visitors treat it as a button that opens something unknown, so many skip it. A field they can type into right away gets used.

Nielsen Norman Group makes the same point in Search: Visible and Simple: on a home page, search should be a type-in field and not a link. The author reports that when he swapped the link on his own site for a box, search use rose by 91%. That is one site, so read it as direction, not a promise for yours.

This guide covers one job: adding a search bar to a small site (say ten to fifty pages) and checking that it works for a person holding a phone.

What you need before you start

• Edit access to the page template that holds the header, so the field appears on every page, not only the home page.
• A list of the pages you want found. Skip login pages, cart steps and thank-you pages.
• A page that will show results, or a search tool that draws results itself.
• A phone, and five real questions your visitors ask.

The order of the work

Steps

1. Decide what gets indexed. Public pages with real text: guides, products, policies, the FAQ. Leave out duplicates such as printer versions and tag pages that list the same posts again. A smaller, cleaner index gives better results than everything at once.
2. Pick the way to search. On a small site there are three common routes: a plugin or built-in search from your site builder, a hosted search service, or a search engine you configure yourself and embed. Which one fits depends on your platform, so check what yours already offers before adding code.
3. Put the field where the eye lands. Nielsen Norman Group places it near the top of the page, typically the upper-right corner, and says the left side works almost as well. NN/g also says the box must be wide enough for a typical query, or the text scrolls out of view while the visitor types. On a phone, a visible field across the top beats an icon that hides it.
4. Wire the results. With an embedded engine, you usually choose between one block that shows box and results together, and two parts: a box on every page and a results page. In the documentation for Google's Programmable Search Engine (as of November 2026), the two-part version uses <div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div> on the page with the box and <div class="gcse-searchresults-only"></div> on the results page, and the results page reads the query from the q URL parameter, such as ?q=myQuery. Whatever tool you pick, a results address that carries the query lets a visitor share or reload it.
5. Give an empty result a next move. Show what was typed, in a box the visitor can edit. Add three links the page can always offer: the FAQ, the contact page and the main categories. The guide on empty search results covers the log-based repair in more depth.
6. Test it with five queries. Take five questions from your inbox. Type each into the field on a phone, not at the desk. For each, note whether the right page came first, came lower, or did not come at all.

What the test tells you

Count the result for each of the five queries and act on the pattern.

Result	What it usually means	What to change
Right page first	Title and text match the visitor's words	Nothing
Right page on the second screen	Page is indexed but its title is vague	Rename the title and the first heading
Wrong page first	Another page repeats the same words more often	Trim the duplicate or retitle it
No result	Words differ, or the page is not indexed	Add the visitor's term to the page, or add the page to the index

Mistakes that keep showing up

Mistake	Why it hurts	Fix
Field only on the home page	Visitors arrive on inner pages from search engines	Put it in the shared header
Search hidden inside the hamburger menu	The visitor has to know it exists	Show the field, or a clear magnifier with a label
Field too narrow	The query scrolls out of sight	Widen it until a normal question fits
Empty result with no links	The visit ends	Offer FAQ, contact and categories
Index never refreshed	New pages cannot be found	Rebuild the index when you publish

Search is not an answer engine. It returns pages, and the visitor still has to read them, so a page with the answer in its first lines does half the work. If you later add a helper that replies in plain sentences, it will draw on the same pages, which is one more reason to keep them tidy.