<p>When implementing search functionality on a website using <strong>Semantic UI React</strong>, you might come across a situation where the message <strong>"No results found"</strong> 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.</p><figure class="image"><img src="https://images.unsplash.com/photo-1562577309-2592ab84b1bc?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wxNTQwMTB8MHwxfHNlYXJjaHwxfHxzZW98ZW58MHx8fHwxNzI2NTM1MzEyfDA&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@merakist?utm_source=DNX&amp;utm_medium=referral">Merakist</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>Imagine Google indexing a page where a search query was run, and instead of actual content, it encounters a message saying <strong>"No results found."</strong> This isn't ideal for search engine optimization (SEO) because it:</p><ul><li>Adds unnecessary text that doesn't contribute positively to SEO.</li><li>May show up in search results, misleading users about the page’s relevance.</li></ul><p>In this post, we’ll walk you through how to handle this issue in <strong>Semantic UI React’s Search</strong> component.</p><h3>Why Is "No Results Found" a Problem for SEO?</h3><p>When Google's crawler indexes a page with a search component, it could:</p><ol><li>Run into a search that returns no results.</li><li>Index the "No results found" message.</li><li>Show the "No results found" message in search engine result pages (SERPs).</li></ol><p>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.</p><h3>How to Hide the "No Results Found" Message in Semantic UI React Search</h3><p>Here’s how you can remove or conditionally hide the <strong>"No results found"</strong> message in <strong>Semantic UI React Search</strong>:</p><h4>1. Use the <code>showNoResults</code> Prop</h4><p>The <strong>Semantic UI React Search</strong> component provides a <code>showNoResults</code> prop. This prop controls whether the "No results found" message should be displayed if no matching results are found.</p><p>By default, this is set to <code>true</code>, meaning that the message will always be displayed when there are no results. To hide it, you can simply set <code>showNoResults={false}</code>.</p><h4>Example:</h4><pre><code class="language-css">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 }) =&gt; {
    setValue(value);
    setLoading(true);

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

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

export default MySearchComponent;</code></pre><p>In this example, when there are no results found, the search box won’t display the <strong>"No results found"</strong> message because <code>showNoResults</code> is set to <code>false</code>.</p><h4>2. Conditionally Show or Hide Based on Input</h4><p>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.</p><h4>Example:</h4><pre><code class="language-css">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 }) =&gt; {
    setValue(value);
    setLoading(true);

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

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

export default SearchComponent;</code></pre><p>In this case:</p><ul><li>The <code>showNoResults</code> message is displayed <strong>only if the user has started typing</strong>. If the input field is empty, no "No results found" message will be shown.</li></ul><h3>3. Customize the No Results Message</h3><p>If you still want to display a message but need to customize it, you can use the <code>noResultsMessage</code> and <code>noResultsDescription</code> props to control what appears.</p><h4>Example:</h4><pre><code class="language-css">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 }) =&gt; {
    setValue(value);
    setLoading(true);

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

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

export default CustomSearchComponent;</code></pre><h3>SEO Benefits of Hiding "No Results Found"</h3><p>By hiding or customizing the <strong>"No results found"</strong> 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.</p><h3>Final Thoughts</h3><p>While Semantic UI React's search functionality is powerful, being mindful of how elements like <strong>"No results found"</strong> affect your page’s SEO is crucial. By using the <code>showNoResults</code> 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.</p>

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.

All Posts In Seo