JSON-LD 404 Error Block for React

Searching stays local: sending the form checks that the query isn't empty, then says what a real one would do ("Would search for ... Searching is not wired in this demo"). Nothing is sent. Copy is real: it writes the JSON-LD text to your clipboard, and says so for screen readers, or says it couldn't if your browser refuses, which it does on a page that isn't served over HTTPS. To wire the search, send the visitor to SEARCH_PATH with the query in the q field, which is what the form's action and method="get" do by themselves if you remove the submit handler.

It's a sample of what to put in your page's head, not a script this block adds: a block renders inside the page body, while structured data belongs in the head, where your framework's metadata or layout code puts it. Copy the lines and add them to your head in your framework's way, such as a script element of type application/ld+json in the layout, with the real host and search address in place of Stilebrook's.

Yes, by construction. SEARCH_PATH and SEARCH_FIELD are typed once: the form's action and the input's name use them, and so does the SearchAction target in the source panel (/search?q={search_term_string}). If you change the search address, change the constant and the panel follows. Google stopped showing the sitelinks search box in late 2024, but the SearchAction markup is still valid schema.org for other consumers.

No: it's a safeguard, not the fix. The page has to answer with a 404 status, which crawlers treat as "remove this address from the index" over time; a page that answers 200 and says "not found" is a soft 404 that noindex only partly rescues. The block can't set the status, so render it from your framework's not-found route. It shows both lines because the status and the tag are the two things a crawler reads first.

Yes. The panel's scroll region is a tab stop named "Page source, numbered lines", so the arrow keys scroll it sideways and down once it has focus, and the line numbers are hidden from assistive technology so they aren't read in the middle of the code. The Copy button is named "Copy the JSON-LD". The code stays left to right in a right-to-left page.

The form comes first with its search button full width, so the way forward is on the first screen. The source panel follows, shorter and scrolling inside itself both ways, so a long line never widens the page.