<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.

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

<p>When building a blog or content listing in <strong>Next.js</strong>, it's tempting to rely solely on client-side interactivity — such as a “Load More” button powered by JavaScript. But for <strong>Google SEO and crawlability</strong>, this alone isn't enough.</p><figure class="image"><img src="https://images.unsplash.com/photo-1716892001565-09a2d461982f?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wxNTQwMTB8MHwxfHNlYXJjaHwxNXx8cGFnaW5hdGlvbiUyMGRlc2lnbnxlbnwwfHx8fDE3NTI4MDQ5MTl8MA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@unrealamol?utm_source=DNX&amp;utm_medium=referral">Amol Srivastava</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>In this post, we’ll walk through how to:</p><p>Use a <strong>“Load More”</strong> button that saves posts to <code>localStorage</code> for better UX when navigating back</p><p>Fall back to <strong>traditional </strong><code><strong>&lt;Prev&gt;</strong></code><strong> / </strong><code><strong>&lt;Next&gt;</strong></code><strong> links</strong> when presenting a paginated view (e.g., <code>?page=3</code>)</p><p>Ensure all links are visible to <strong>search engines</strong> by rendering <code>&lt;a href="..."&gt;</code> inside <code>&lt;Link&gt;</code></p><h3>💡 Why This Matters</h3><p>Search engines like Google don’t always execute JavaScript. So if your site loads more posts with just a button and no actual <code>&lt;a href&gt;</code> to another page, Google won’t crawl or index those additional pages.</p><blockquote><p>Good UX requires JavaScript. Good SEO requires HTML.</p></blockquote><h2>✅ Strategy Summary</h2><p><strong>Page 1</strong> starts with SSR-rendered initial posts.</p><p><strong>Clicking “Load More”</strong> loads more posts via API and appends them to the current list.</p><p>All loaded posts are <strong>cached to </strong><code><strong>localStorage</strong></code>.</p><p>When viewing a post and hitting back, we <strong>restore from </strong><code><strong>localStorage</strong></code> to avoid re-fetching.</p><p>When visiting <code>?page=n</code> via a real URL, we show <strong>Prev / Next</strong> buttons as <code>&lt;a href&gt;</code> links.</p><p>We <strong>render real </strong><code><strong>&lt;a&gt;</strong></code><strong> elements inside </strong><code><strong>&lt;Link&gt;</strong></code>, so Google sees the next pages.</p><h2>🧱 Code Example (Blog Listing with SEO + UX)</h2><h3><code>pages/blog/index.js</code></h3><pre><code class="language-plaintext">import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { Segment, Button } from "semantic-ui-react";
import axios from "axios";

export default function BlogPage({ initialPosts, initialPage, initialShowMore }) {
  const router = useRouter();
  const [posts, setPosts] = useState(() =&gt; {
    if (typeof window !== "undefined") {
      const cached = localStorage.getItem("blogPosts");
      return cached ? JSON.parse(cached) : initialPosts;
    }
    return initialPosts;
  });
  const [currentPage, setCurrentPage] = useState(initialPage);
  const [showMore, setShowMore] = useState(initialShowMore);
  const [isLoading, setIsLoading] = useState(false);

  const isPaginatedView = !!router.query.page;

  useEffect(() =&gt; {
    // On mount, if paginated view, overwrite cache
    if (isPaginatedView) {
      localStorage.setItem("blogPosts", JSON.stringify(initialPosts));
    }
  }, [initialPosts, isPaginatedView]);

  const loadMore = async () =&gt; {
    setIsLoading(true);
    const nextPage = currentPage + 1;
    const res = await axios.get(`/api/posts?page=${nextPage}`);
    const newPosts = [...posts, ...res.data.posts];
    setPosts(newPosts);
    setCurrentPage(nextPage);
    setShowMore(res.data.hasMore);
    localStorage.setItem("blogPosts", JSON.stringify(newPosts));
    setIsLoading(false);
    router.replace("/blog"); // clean up ?page= after JS
  };

  const prevPage = currentPage &gt; 1 ? currentPage - 1 : null;
  const nextPage = currentPage + 1;

  return (
    &lt;div className="blog-wrapper"&gt;
      {posts.map((post) =&gt; (
        &lt;div key={post.id}&gt;
          &lt;h3&gt;
            &lt;Link href={`/blog/${post.slug}`}&gt;
              &lt;a&gt;{post.title}&lt;/a&gt;
            &lt;/Link&gt;
          &lt;/h3&gt;
          &lt;p&gt;{post.excerpt}&lt;/p&gt;
        &lt;/div&gt;
      ))}

      {!isPaginatedView &amp;&amp; showMore &amp;&amp; !isLoading &amp;&amp; (
        &lt;Segment textAlign="center"&gt;
          &lt;Link href={`/blog?page=${nextPage}`}&gt;
            &lt;a onClick={(e) =&gt; {
              e.preventDefault();
              loadMore();
            }}&gt;
              &lt;Button primary&gt;Load More&lt;/Button&gt;
            &lt;/a&gt;
          &lt;/Link&gt;
        &lt;/Segment&gt;
      )}

      {isPaginatedView &amp;&amp; (
        &lt;Segment textAlign="center"&gt;
          {prevPage &amp;&amp; (
            &lt;Link href={`/blog?page=${prevPage}`}&gt;
              &lt;a&gt;
                &lt;Button secondary&gt;Previous Page&lt;/Button&gt;
              &lt;/a&gt;
            &lt;/Link&gt;
          )}
          {showMore &amp;&amp; (
            &lt;Link href={`/blog?page=${nextPage}`}&gt;
              &lt;a&gt;
                &lt;Button secondary&gt;Next Page&lt;/Button&gt;
              &lt;/a&gt;
            &lt;/Link&gt;
          )}
        &lt;/Segment&gt;
      )}
    &lt;/div&gt;
  );
}
</code></pre><h3><code>getServerSideProps</code></h3><pre><code class="language-plaintext">export async function getServerSideProps(context) {
  const page = parseInt(context.query.page || "1", 10);
  const pageSize = 20;

  const res = await fetch(`https://yourdomain.com/api/posts?page=${page}`);
  const data = await res.json();

  return {
    props: {
      initialPosts: data.posts,
      initialPage: page,
      initialShowMore: data.hasMore,
    },
  };
}
</code></pre><h2>✅ Best Practices Summary</h2><p>✅ <strong>Use </strong><code><strong>&lt;Link&gt;&lt;a&gt;...&lt;/a&gt;&lt;/Link&gt;</strong></code> for SEO — never wrap <code>&lt;Button&gt;</code> directly</p><p>✅ <strong>Use </strong><code><strong>localStorage</strong></code><strong> to cache posts</strong>, improving the "Back" experience</p><p>✅ <strong>SSR-render each page (</strong><code><strong>?page=n</strong></code><strong>)</strong> so crawlers can reach it</p><p>✅ <strong>Avoid infinite loops</strong> in <code>useEffect</code> by keeping dependencies controlled</p><p>✅ <strong>Use </strong><code><strong>router.replace('/blog')</strong></code> to clean up query strings after <code>Load More</code></p><h2>🚫 A Common Mistake: Trusting Eslint Uncritically</h2><p>You might see a warning:</p><pre><code class="language-plaintext">React Hook useEffect has missing dependencies: 'initialPosts', 'currentPage', etc.</code></pre><p>Be careful: if you <strong>add all those as dependencies</strong>, you may accidentally cause <strong>infinite re-renders</strong>. It’s fine to <strong>intentionally ignore</strong> the warning in some scenarios where you’re controlling when updates should happen.</p><h2>Conclusion</h2><p>This hybrid approach gives you the <strong>best of both worlds</strong>:</p><p>Instant “Load More” interactivity for users</p><p>Crawlable <code>&lt;Prev&gt;</code> / <code>&lt;Next&gt;</code> links for search engines</p><p>Cached session state for great user experience when navigating back</p><p>It’s not magic — just careful balance between <strong>JavaScript UX and HTML SEO</strong>.</p><p>Let me know if you want this packaged as a markdown post or published to your blog!</p>

This pagination strategy combines great SEO and user experience by using real <a> links inside <Link> for Google to crawl paginated pages (?page=n), while also supporting a dynamic “Load More” button that appends posts via JavaScript and caches them in localStorage for fast navigation when users go back from a post. It ensures Google can discover all content through <Prev> and <Next> links, and users enjoy smooth interaction without losing previously loaded posts.

All Posts In Seo