How to Remove the "No Results Found" Message in Semantic UI React Search for Better SEO

Adam C. | 3 months ago

When implementing search functionality on a website using Semantic UI React, you might come across a situation where the message "No results found" is displayed when no search results match the user’s query. While this message is helpful from a user interface perspective, it can create SEO issues when crawlers, like Google’s, index the page.

Imagine Google indexing a page where a search query was run, and instead of actual content, it encounters a message saying "No results found." This isn't ideal for search engine optimization (SEO) because it:

• Adds unnecessary text that doesn't contribute positively to SEO.
• May show up in search results, misleading users about the page’s relevance.

In this post, we’ll walk you through how to handle this issue in Semantic UI React’s Search component.

Why Is "No Results Found" a Problem for SEO?

When Google's crawler indexes a page with a search component, it could:

1. Run into a search that returns no results.
2. Index the "No results found" message.
3. Show the "No results found" message in search engine result pages (SERPs).

This can affect the way your page is perceived by search engines and users alike, potentially lowering your page’s rank or reducing click-through rates.

How to Hide the "No Results Found" Message in Semantic UI React Search

Here’s how you can remove or conditionally hide the "No results found" message in Semantic UI React Search:

1. Use the showNoResults Prop

The Semantic UI React Search component provides a showNoResults prop. This prop controls whether the "No results found" message should be displayed if no matching results are found.

By default, this is set to true, meaning that the message will always be displayed when there are no results. To hide it, you can simply set showNoResults={false}.

Example:

import React, { useState } from "react";
import { Search } from "semantic-ui-react";

function MySearchComponent() {
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState([]);
  const [value, setValue] = useState("");

  const handleSearchChange = (e, { value }) => {
    setValue(value);
    setLoading(true);

    // Simulating an API call
    setTimeout(() => {
      const matchedResults = []; // Assume no results are found
      setResults(matchedResults);
      setLoading(false);
    }, 500);
  };

  return (
    <Search
      loading={loading}
      onSearchChange={handleSearchChange}
      results={results}
      value={value}
      showNoResults={false} // Hide "No results found"
      placeholder="Search..."
    />
  );
}

export default MySearchComponent;

In this example, when there are no results found, the search box won’t display the "No results found" message because showNoResults is set to false.

2. Conditionally Show or Hide Based on Input

You can also conditionally hide the "No results found" message based on whether the user has started typing. This ensures that search results pages or crawlers don’t see the message unless it's user-triggered.

Example:

import React, { useState } from "react";
import { Search } from "semantic-ui-react";

function SearchComponent() {
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState([]);
  const [value, setValue] = useState("");

  const handleSearchChange = (e, { value }) => {
    setValue(value);
    setLoading(true);

    // Simulating an API call
    setTimeout(() => {
      const matchedResults = value ? [] : results; // Simulating no results
      setResults(matchedResults);
      setLoading(false);
    }, 500);
  };

  return (
    <Search
      loading={loading}
      onSearchChange={handleSearchChange}
      results={results}
      value={value}
      showNoResults={value.length > 0 ? true : false} // Only show when user types
      placeholder="Search for a swimmer..."
    />
  );
}

export default SearchComponent;

In this case:

• The showNoResults message is displayed only if the user has started typing. If the input field is empty, no "No results found" message will be shown.

3. Customize the No Results Message

If you still want to display a message but need to customize it, you can use the noResultsMessage and noResultsDescription props to control what appears.

Example:

import React, { useState } from "react";
import { Search } from "semantic-ui-react";

function CustomSearchComponent() {
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState([]);
  const [value, setValue] = useState("");

  const handleSearchChange = (e, { value }) => {
    setValue(value);
    setLoading(true);

    // Simulating an API call
    setTimeout(() => {
      const matchedResults = value ? [] : results; // Simulating no results
      setResults(matchedResults);
      setLoading(false);
    }, 500);
  };

  return (
    <Search
      loading={loading}
      onSearchChange={handleSearchChange}
      results={results}
      value={value}
      showNoResults={value.length > 0}
      noResultsMessage="No swimmers found."
      noResultsDescription="Try refining your search with a team name or location."
      placeholder="Search swimmers, teams, and more..."
    />
  );
}

export default CustomSearchComponent;

SEO Benefits of Hiding "No Results Found"

By hiding or customizing the "No results found" message, you improve the overall user experience and prevent search engines from indexing irrelevant messages. This helps your pages rank better because they are focused on actual content, not a placeholder message.

Final Thoughts

While Semantic UI React's search functionality is powerful, being mindful of how elements like "No results found" affect your page’s SEO is crucial. By using the showNoResults prop effectively and tailoring your search experience, you can ensure that users (and search engines) only see relevant content, which will ultimately boost your SEO performance.